Jump to content

Webgremlin

New Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by Webgremlin

  1. 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
  2. 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
×
×
  • Create New...