external stylesheets

[scrawny]

I've created a page with internal stylesheets. I know how to create the external from the internal but I simply don't know how to then go back and tag the elements on the pages. How do I tag them? and what code should I remove from the first page which has the internal stylesheets attached?

[Andrea]

This explains the difference:

 

http://how-to-build-websites.com/2011/adding-css-to-a-webpage/

 

and that there is no need to

....then go back and tag the elements on the pages.

 

Does that help, or do you still have questions?

[Webgremlin]

Scawny,

I think I understand your question, please let me know if I do not answer your question.

 

First which you probably already know:

1. External style sheets are for use on multiple pages which have the same style.

2. CSS that is on the page itself (known as embedded) will over-ride external style sheets.

 

So I would use externally linked style sheets on any pages that have the same type of style. Makes it much easier to manage if you want to make a change. You will only be making one change to an externally linked CSS file that will affect any pages that are linked to it.

 

So if you are using an externally linked CSS file add this code between the head tags and after your page title.

 

 <link rel="stylesheet" type="text/css" href="myexternalcss.css" /> 

 

At this point I would remove all embedded CSS except for the styling that you want to over ride on the specific page. (remember to put your embedded CSS after your linked CSS in the "head" part of your document.

 

Then I would use internal (or embedded) CSS for any style that you would like to over ride in your external style sheet. If you go this route I would put your embedded CSS after your externally linked CSS to make sure that your over ride performs correctly (this is known as cascading). If you had several pages to over ride then I would make another external CSS sheet "override.css" and use specificity to over ride the CSS. I would also put the "override.css" external link after your regular external style sheet link.

 

reference:

This link to Smashing Magazine explaines CSS Specifity.

Link to Boogie Jack.com that explains CSS Cascading order.

 

 

 

 

Good luck and let me know if you have more questions.

 

-Tim

[scrawny]

Thanks, this is very good. The only thing I'm still not clear about is that after adding the code for the externally linked CSS, removing all embedded CSS except for any overrides I want. For instance, in my page for the first heading I have <div class="h1">

Environment</div> Would I just take out the word class? and leave everything else in order for it to find the h1 style in the external stylesheet?

[scrawny]

I'm still not getting the answer about how to tag the different elements. Just i.e., <div ="h1">Environment</div>

Is that all that's necessary? and to take out class in the following? <div class="h1">Environment</div>

[danhodge]

For h1, all you need is <h1>Enviroment</h1>, and it still 'connects' with your stylesheet perfectly fine (unless you have any other issues with your code, of course

[scrawny]

So I can take out all the <div /div> tags and that's what tells the elements to go to the style in the external stylesheet?

[Andrea]

For instance, in my page for the first heading I have <div class="h1">

Environment</div> Would I just take out the word class? and leave everything else in order for it to find the h1 style in the external stylesheet?

 

That code doesn't really make sense. The h1 tag is a title tag. so you would code the most important heading on your site like this:

<h1>The most important heading on my page</h1>

Technically, there is nothing wrong with calling a class 'h1' - but looking at it semantically and from the POV of what the h1 tag is and how it's intended to be used, it doesn't.

 

The div tag creates divisions, for example:

<div id="header">
<h1>The most important heading on my page</h1>
</div>

 

The difference between ID and class is that an ID can only be used ONE time on a page,where class can be used as often as you want.

 

And with the above code, you would not remove the 'ID' (or class"). You would add the style you want to your external stylesheet. So for example:

 

h1 {
  color: #FFF;
}

 

or - if you want to address the h1 tag inside your header division different than some other h1 tag you may have elsewhere on your site, then you'd write your CSS like this:

 

#header h1 {
	color: #fff;
}

 

If you have a link to a page you're working on, post it, then we can give you specific examples of what /how things may need to be moved.

[Webgremlin]

Thanks, this is very good. The only thing I'm still not clear about is that after adding the code for the externally linked CSS, removing all embedded CSS except for any overrides I want. For instance, in my page for the first heading I have <div class="h1">

Environment</div> Would I just take out the word class? and leave everything else in order for it to find the h1 style in the external stylesheet?

 

The div's on a html page are more like a place holder or a block of html for a particular section. These blocks can then be styled in a particular way. You typically wouldn't name add a class name to a div of "h1" as h1 is an element all on it's own and can be styled that way. I would remove the "h1" class from your div and either change the class or remove it and add an "id". Classes can be reused over and over in a html page where an "id" can only be used once.

 

<head>
 <title>Web pages Title </title>

</head>
<body>
<div id="wrapper">
 <div id="header">
   <h1> Some appropriate Heading Title </h1>
   <p>Some appropriate header content</p>
 </div>

 <div id="main-content">
   <h1> Some appropriate heading title </h1>
   <p>Some appropriate content for main area of website<p>
 </div>

</div>
</body>

 

Then using an external style sheet you might style all of your h1 elements :

h1 {
   font-size: 1.3em ( or 18px or other);
   margin-right: auto;
   margin-left: auto;
   font-family: Georgia, Serif;
}

 

Then internally (embedded) you can use specifity or cascading to override the CSS (added in "style" after title in head).

Specificity example:

 

<style type="text/css">
div#header h1 {
              font-size: 1.5em;
}

</style>

 

The embedded style will take only the h1 elements that have a div with an id of header (id="header") This not only could be done in the embedded style sheet but it could be done in the external style sheet to provide an override to the styling that you have set for h1 elements.

 

Or you could just add the "h1" element to the embedded style which will override the "h1" in the external CSS sheet do to the Cascading order.

 

-Tim

[scrawny]

Thank you, I think I can manage it now. I appreciate all the help!

[Emmy]

1.First we have to create the style sheet for the particular webpage.

 

<link rel="stylesheet" type="text/css" href="style.css" />

 

and link the style sheet using the syntax.