You can apply what you know about XHTML code to learn about CSS style rules.
So, assume that you want to make level 1 headings all centered on the page. Using XHTML coding, you would add the align attribute with a value of "center" to every <h1> tag on the page.
Using XHTML attributes to format text is the old way of coding. It is NOT recommended. CSS rules are the new way to format web pages. It is a better way to establish formatting in a website.
In the above example, it would be necessary to find every <h1> element and add the align="center" code.
You can do the same thing to center every h1 element in a website using one CSS style rule.
CSS rules are written with this format:
html tag {property: value}
A CSS rule to make all level 1 headings centered would be:
h1 {text-align: center}
If this code is in a stylesheet, the stylesheet could be linked to every page in a website and every level 1 heading would be centered. The <h1> tags would not need to have the align="center" code added to the html tags on the page.
The link tag is used to attach an external style sheet to an html page. The code is added in the <head></head> section of coding. The tag to link a stylesheet named styles.css looks like this:
<link rel="stylesheet" type="text/css" href="styles.css" />
Things to notice about the link tag:
An online resource with basic information about creating CSS rules:
http://spot.colorado.edu/~baileysm/tutorials/css_beginner.html
Example:
h3
{text-align: center;
font-family: "Century Gothic",sans-serif}
In the above example:
More examples:
Suppose you want to format all paragraphs in a website as double-spaced and using the Arial font (which is a sans-serif font).
The result will be:
p
{line-height:2em;
font-family: arial,sans-serif}
Sample style rules for HTML elements are shown below. Each property-value pair is listed on a new line to make the code more readable. That is not required in CSS syntax rules, but it certainly makes it easier to read the code. Please use this method when you create style rules for this project! It also makes it easier to see if you have included the required semicolon to separate the property-value pairs.
body
{margin-left: 20%;
margin-right: 20%;
margin-top: 2em;
margin-bottom: 2em}
h1
{font-family: "Comic Sans MS",sans-serif;
font-size: 175%;
color: #ffff00}
p
{font-family: Arial, sans-serif;
font-size: 115%}
Study the examples given above!
The style rule for the <body> element of your web page says you are giving:
The style rule for the <h1> element says that you are giving
With these examples, you should see the standard format for writing style rules:
selector
{property: value;
property: value}
The selector will be the name of an HTML tag that you have included in the HTML coding of your web page. The properties and values that are valid for CSS can be found online at the W3schools website at:
http://www.w3schools.com/css/css_reference.asp