HTML: Using Cascading Style Sheets, an introduction

Our First CSS Example

HEL LO WOR LD!

After what I have been telling you about CSS saving work, this may not be the best example, as it actually takes less code to do this with the old font tag. But it does illustrate the changes made when I use individual style elements. I used a large heading tag here and it overrides the style sheet I am using for the tutorial, which ordinarily colors headlines blue.

Here is the code

    <h1>
        <text style="color:red;">H</style><text style="color:blue;">E</style><text style="color:green;">L</style>
        <text style="color:black;">L</style><text style="color:blue;">O</style>  
        <text style="color:brown;"> W</style><text style="color:lime;">O</style><text style="color:blue;">R</style>
        <text style="color:red;">L</style><text style="color:green;">D</style><text style="color:blue;">!</style>
    </h1>

This first example illustrates well the syntax of the CSS style property. As an example I will color a word red.
Word
Here is the code

<b> <text style="color:red;"> <span> Word </span> </style> </b>

There are 2 parts to a CSS statement. A Selector and a Declaration Block In this simple statement, "text" is the selector. style="color:red;" is the declaration block. Declarations end with a semi-colon. If there is only one declaration, you can omit the semi-colon, otherwise it is required. The <span> </span> tags indicate that the style will only "span" this particular area. If you do not include these, the same style will apply to the rest of the text in the document. (The <b> tags are only for emphasis. )

If you were creating a definition with more declarations, you would include them in curly brackets. The following example would create an H1 heading with a red font color and center the text. If all of the web pages in the site were linked to this style sheet, it would apply to every single H1 tag

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

CSS ignores white space, so the above statement could also be written as follows:

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

And for a short statement, it may be simpler, but if there are many declarations, it is much better to separate them with a full line to make them easier to understand.

Inheritance

When you declare an element of a selector which may contain various other elements, those elements will inherit the features of the parent.

For Example: 

	body{
		text-align:center;
		text-color:blue;
		font-family: "Times New Roman";
	}

Here, all of the text within the body of the HTML document will align to the center, The font-family will be "Times New Roman", and it's color will be blue, unless you over-ride these later. Some declarations do not inherit however, such as a body margin.

It is also possible to declare multiple selectors with one statement. For example: 

		h6, h5, h4, h3, h2, h1{ color: red; }

This would color all of your headlines red.

Linking to an external stylesheet

Here is the code you use when linking to an external style sheet. This is placed in the <head></head> of the HTML document.

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

In this case, the attribute href="style.css" refers to the style sheet. In this case the style sheet is in the same directory as the HTML file. But you may have to change the file path. Style sheets can also be linked to a URL elsewhere on the Internet, though this may take a second or 2 to load. If you need a refresher on file paths, here is a link to that tutorial. File paths work the same as they do in regular HTML.

If you are inserting CSS style into the head of the HTML document, here is the code you would use. 

		
			<style type=”text/css”>
			 	            	h1{
							color: red;
					    	}
			</style>

This would change your h1 headings to red.
You would insert all of your CSS changes into the one set of <style type=”text/css”></style> tags.

Comments

Comments in CSS are written as follows: /* */ Thus /* Everything here is a comment */
It may be important for you to relate design decisions, or to comment on any overriding styles you may have used within the document later.

Thank you for reading my introduction to CSS. I hope you will join me for the rest of the tutorial!
CSS Lesson 2

Additional Resources