Jump to content

external stylesheets


scrawny

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...