Creating a web page with style
We have struggled through allot of HTML to get to the point where we have a bland looking web page with some content on it. I have baited you with comments of how we would talk about CSS soon. So, to live up to my word, lets get it started.
CSS files follow the same plain text rules for saving as HTML files. the difference being that we use the ".css" extension instead of ".html". It is also a good practice to put certain different file types (such as css, javascript or images) you will use for your site in there own folder for better file management. So inside the folder you created to hold this project create another folder named "css". Then open a new document with your text editor and save it as "styles.css" (plain text, All Files type of course).
Now if you remember the link in the head section of our site template
You can see that it is a link tag, it has an attribute named "rel" (for relationship) of "stylesheet", an attribute named "href" that points to the files location, in this case its telling the browser ("in the same folder as me there is a folder named "css", and in there there is a file named "styles.css", get that for me please") and then an attribute named "type" with the value "text/css" that tells the browser what the content type of the file it is fetching is, in this case its a text file whose content is CSS. Those 3 things are necessary to link to an external style sheet.
One other thing to point out about this element is that there isn't a "proper" closing tag. In other words <link> </link>. Instead it is sort of lazy and just includes a slash before the greater-than symbol at the end. That slash is required. There are a couple of other tags that use this syntax as you will see later. ha ha, more baiting!
Now as I said this is how we include an "external" style sheet. Well if there is an external style sheet, can there be an "internal" style sheet. Not a "sheet" per say, but you can define CSS style rules from within the HTML document itself. You can do this on an element directly by using the "style" attribute, or by adding a "style" element to the head section of a page.
Example:
<div style="background-color:blue;">this is a blue div</div>
or
<head>
<title>Blah blah blah</title>
<style type="text/css">
body { background-color : green; }
</style>
</head>
Once you learn the basics of CSS you can use any of these 3 methods. It is recommended to avoid applying styles directly to a tag, and us "id" or "class" attributes instead. The reason for this is also the reason it is best to use an external style sheet over the style element in the head, so that you can edit all the web sites styles from one place.
Imagine if you put your style rules in the head of each HTML page and you want to change one thing throughout your entire site, and you have 30 pages, then you have to go through the head of all 30 pages changing that one thing CSS style rule. Even worse is if you put your styles on the tags themselves and then have to go through all the HTML on all 30 pages to change that one thing. By using an external style sheet, you can make all your websites changes from one place.
CSS allow you to control everything from the dimensions of elements, their background color or image, placement on the page, text color, size, font, weight, border thickness, color and style, and just about any possible feature of an HTML element.
You can access control of the HTML elements in 3 ways; By "id", "class" or "tag/element name".
The syntax for CSS is:
"selector" { "property-name" : "property-value"; }
Where selector is the id,class or element name, property-name is one of the pre-defined CSS properties and property-value is an approved value for the named CSS property.
If you want to apply indentation to all the paragraphs in your website you can do so like this.
This tells the browser that all paragraph elements should indent the first line on text by 5 pixels. You can access any element inside the body (including the body) in this manner.
ul {
background-color : red;
}
To access display control over an element by id, prefix the element id name with a hash, or pound sign (#). This tells the browser to look for an element with that id and apply the enclosed style properties to them.
/* make the main wrapper 400 pixels wide and 200 pixels high */
width : 400px;
height : 200px;
}
Remember that only one element on a page can be defined with a specific "id". If you want to apply the same rules to amore than one element on a page you should define that element with a "class" attribute. You can name numerous elements on the same page with the same class name.
To apply style rules to a specific class you define the CSS properties using the class name preceded by a period (.). As an example consider the following html:
This div here....
</div>
<div class="padded">
...and this div here...
</div>
<div class="padded">
..will all be padded
</div>
Then in your CSS file:
padding : 10px;
}
It is also possible to combine the above methods...
#contentWrapper div {
padding : 5px;
}
/* remove link underline inside line elements inside "mainNav" */
#mainNav li a {
text-decoration : none;
}
As you have noticed, after we define our element, we place the desired style properties for that element between curly braces. Then each property definition follow the syntax of "property" "colon(:)" "desired value" "semicolon(;)". There are numerous CSS properties that allow you to control everything from text and element alignment, borders, backgrounds, widths, heights, text: color, size, font, capitalization and on and on. I have compiled a [list of CSS properties][csstutorials/cssproperties] to help you find more when you want. we will cover many more in our swebites development.