A Styles Icon HTML presents the document content, that is, it mainly displays the text and the images. Styles are used to declareDeclaration

A declaration contains an element name and the values the properties of that element will have. Properties are assigned their values with a colon (:). An example of stylesheet declaration for an <h1> tag might be:
h1 {color:blue; text-align:center} or modify the attributes or properties of that content, that is, styles format the appearance of the text and images, defining how content should rendered in a browser. For instance, you should use a CascadingCASCADING

"Cascading" because a single change on a cascading stylesheet such as a new background color, can cascade down to every page on a site. Stylesheet (CSS) to format a site to set consistent colors, fonts, font sizes, background images, block alignment, and the layout for the entire Web site.

Inline Styles are used "inline" or inside tags in a page, such as the <body>, <h1>, <p>, <table>, <div>, and <span> tags. Below are two examples of inline styles:
<h1 style="font-family:Arial, Helvetica, sans-serif; color:blue">Title</h1>
<p style="font-size:20px; text-align:justify">This is demo text</p>
You should avoid inline styles for an individual instances such as the <h1> and <p> tags above. It is much easier and more productive to declare these styles once in a single cascasing stylesheet, so that one change can cascade down to every <h1> and <p> tag in the entire site.

Virtually all of your style definitions for your entire site should be set in an External Cascading Stylesheet. A CSS page is a separate file created in distinct stylesheet language that is used to describe the presentation or formatting of a Web page. CSS files have a .css extension. One of the most important tags used within an HTML document that is linked to an External Cascading Stylesheet is the <div> tag. A div is a block element used to define a division or a section in an HTML file, such as the MastHead or LeftColumn or Footer; and the formatting of that HTML division is declared in the separate CSS page.

There are three types of SelectorsSELECTORS

A CSS selector either names and modifies the properties of an existing HTML tag (type), or it declares a custom defined class or custom defined ID element in a stylesheet. Once the selector has properties assigned to it, those properties can be displayed for those particular elements on all pages linked to the stylesheet. used with internal and external cascading stylesheets: existing type or tag selectors, custom class selectors, and ID selectors. They use this syntax: Selector {Property:Value}

1. Examples of HTML Type Selectors (existing tags) used in a stylesheet:
body {
width:800px;
margin:auto; /* center the page when using current DOCTYPE */
background-color: yellow;
}

h1 {color:blue; text-align:center}

p {font-size:14px; font-weight:bold}

a:hover {color:green} /* produce a rollover effect on hover */

Notice how the attributes are enclosed in curly brackets or braces { }
   If you fail to close a brace, or mismatch braces, the style will not work
Notice how each attribute is followed a colon (:) which is used to assign the value
Notice how multiple attributes are separated by a semicolon (;)
Notice how comments are placed in CSS pages using this format: /* comment */

Once the values of existing tags, such as <h1> or <p>, have been declared in CSS, any <h1> or <p> tag used in a Web page linked to the stylesheet will have those declared values and effects. That is, if you set the h1 selector to color:blue, every <h1> tag in the site will be blue (unless there is a local inline h1 style to override the css definition.)

In HTML 5 you will also define your nav, header, main, aside and footer elements. For example:

header {background-color:#FAFAD2}
or
header {background-image:url(images/MastHeadWinchester.jpg);
background-repeat:no-repeat;}

nav {background-color:#0000CD; /* medium blue */
border: 2px solid blue; color:white;}

2. ID Selectors are used in a stylesheet to define a division on a page. They start with a #.
Stylesheet ID example definition 1 (a #wrapper ID can tie the header, nav, main & footer elements together)
#wrapper {border:solid blue 1px; background-color:white;}

Stylesheet ID example definition 2 (the header element has replaced the older #masthead ID):
#masthead {background-color:#FAFAD2} /* LightGoldenRodYellow */

Below is an example of how to reference an ID which was defined in a stylesheet.
<div id="container">
    Add several paragraphs of content here
</div> <!-- Close container div -->

3. Class Selectors are custom defined styles in a stylesheet. They start with a period (.)
Stylesheet class example definition 1:
.topic {font-family:Arial, Helvetica, sans-serif; color: blue}
Stylesheet class example definition 2:
.important {color:red; font-weight:bold}

Below is an example of how to reference a class which was defined in a stylesheet.
<p class="important">Notes:</p>

Note 1:  Set the value of each style property with a : (colon)
Note 2:  Separate multiple properties with a ; (semicolon)
Note 3:  Follow selector names with an { (open brace). Use a } (close brace) at end of style definition.
Note 4:  When using multiple divs on a single page, it is very helpful to add a comment next to each closing div to indicate which ID the closing div is associated with.

As mentioned above, an external cascading stylesheet is saved as a separate file. Its file extension is .css. There are only style definitions in an external stylesheet, and no HTML tags, not even the <style> tag. Typically, the same external cascading stylesheet is linked to every page on your site by adding the following line inside the <head> tag to every page on your site. An example of how to link a Web page to a stylesheet is shown below:

<link href="yourSite.css" rel="stylesheet" type="text/css">
(The rel used in the link above is short for Relationship.)

Below is the HTML code from a sample two column Web page linked to yourSite.css.
It uses both Div IDs and HTML5 Nav and Footer Elements.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>Demo page linked to CSS</title>
  <link href="yourSite.css" rel="stylesheet" type="text/css">
</head>

<body>
<header> <!-- this used to be #header -->
  <!-- Background Image declared in CSS -->
</header>

<div id="wrapper">
  <nav>
    <a href="index.htm">Home</a> |
    <a href="Products.htm">Products</a> |
    <a href="Contact.htm">Contact Us</a>
  </nav>

  <aside> <!-- before HTML5 this was #left_column -->
      Side<br>
      Info<br>
      Here<br>
  </aside>
  <main> <!-- before HTML5 this was #content -->
      <h1>Page Title Goes Here</h1>
      <p>Text for paragraph 1 goes here</p>
      <p>Text for paragraph 2 goes here</p>
      <p>This is <span class="important">important</span></p>
  </main>

<footer>Last Modified Date
</footer>
</div> <!-- Close wrapper -->
</body>
</html>

Copy the HTML code above into a new practice Web page. Save it as yourSite.htm. (Use your name : -)

Below is the CSS file from a sample cascading stylesheet saved as yourSite.css.

body {
width:800px;
margin:auto; /* center the page when using current DOCTYPE */
background-color:yellow;
}

h1 {color:#0000CD} /* medium blue */

/* IDs */

header {
background-image:url(images/MastHeadWinchester.jpg);
background-repeat:no-repeat;
height:82px;
}

nav, a {
background-color:#0000CD; /* medium blue */
color:white;
font-weight:bold;
text-align:center;
}

nav a:hover {color:fuchsia;} /* create a mouseover rollover effect */

#wrapper {
border:solid blue 1px;
background-color:white;
}

aside {
width: 180px;
float: left;
padding-top:30px;
margin-left:20px;}
main {margin-left:200px;}

footer {text-align:center;}

/* Classes */

.topic {font-family:Arial, Helvetica, sans-serif; color:blue}

.important {color:red; font-weight:bold}

Copy the CSS code above into a new practice CSS page. Save it as yourSite.css. (Use your name : -)

Below is a screen shot of yourSite.htm which is linked to yourSite.css.

Screen shot of Web page linked to Cascading Stylesheet

Click here to see this sample web page live  (then right-click > View Source for code)

Perhaps the best way to understand CSS is to modify yourSite.css and then see how it effects yourSite.htm. Then add some more <h1> tags and other content in yourSite.htm and see how the changes are rendered by the browser.

1. Create at least two simple practice pages and link them to yourSite.css.
2. Modify the stylesheet and see how they affect your pages
3. Experiment and learn.

The short 6 minute YouTube video below shows you how to quickly create and edit a simple introductory Cascading Style Sheet. In order to save viewing time, and to instantly show split screen result, and to allow for color coded presentation, Notepad was not used. However the CSS code is the same regardless of what software platform is used. (Please wait for the video to load.)

For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com
ValidateValidate

Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements...  your file, see: http://validator.w3.org

Review Assignment Learning Project: 10 Practice Review Steps

Return to Menu   Top   Valid XHTML 1.0 Transitional