Adding CSS to pages

Last update on: 05-08-2008
We already talked about the advantages of using CSS into webpages, That's can take the control of the all page with all its elements. So Let's see the ways that an CSS file can be added to webpages.
In this section we will see how to use CSS to create layouts, to create for example website with 2, 3, or more columns. create header, and more.
We have three methods that we can integrate CSS into webpages.

1: By using an external CSS file with the extension (.css) and call it in the header of the page. And this method is the best one because you keep the CSS file separated from the webpage and if you want to make any change on the webpage style or an element on the page you just have to do it in the CSS file, the file also is very light, so it doesn't affect the loading time of the page.
2: by inserting the content of that CSS file in the header directly, so when you open the webpage to edit your CSS code is visible in the header section, and if you have too much CSS rules you will get a long webpage, so it something to avoid.
3: The last one is the worst one by controlling each element or tag with the style attribute so if you want for example to make a border for all your <h1> tags you need to do the same work each time you meet the tag in webpage, and this method make your pages very long with too much code, so it will take too long to be displayed in the visitor's web browser.

We can use the second method if we have just a few lines of CSS, and the same thing for the last method if we have just to apply a different style one time or two in a webpage but still the first method is most used by web developers.

So we will meet use our CSS with all these methods just to mention each one and see the difference between them.

1: Using CSS in webpage's header:

The <style> tag should be included within the <head> tag on your page. The type attribute indicates the MIME type of the style sheet. text/css is the only value you'll use. The body of the style sheet consists of a series of rules. All rules follow the same structure:

selector { property1: value1; property2: value2; .. }

Each rule consists of a selector followed by a list of properties and values associated with those properties. All the properties being set for a selector are enclosed in curly braces, as shown in the example. You can include any number of properties for each selector, and they must be separated from one another using semicolons. You can also include a semicolon following the last property/value pair in the rule, or not it's up to you.

If you use h1 as a selector, the rule will apply to any <h1> tags on the page. By the same token, if you use p as your selector, it will apply to <p> tags.

2: Using CSS file:

A CSS file is basically just the body of a <style> tag. To turn the style sheet from the previous section into a separate file, you could just save the following to a file called style.css:

h1 { font-size: x-large; font-weight: bold }
h2 { font-size: large; font-weight: bold }

In truth, the extension of the file is irrelevant, but the extension .css is the de facto standard for style sheets, so you should probably use it. Once you've created the style sheet file, you can include it in your page using the <link> tag, like this:

Note: In this case; my css file's path is images/examples/style.css

The type attribute is the same as that of the <style> tag. The href tag is the same as that of the <a> tag. It can be a relative URL, an absolute URL, or even a fully qualified URL that points to a different server. As long as the browser can fetch the file, any URL will work. This means that you can just as easily use other people's style sheets as your own, but you probably shouldn't.

3: Using style attribute:

This technique is used if you don't have too many tags to style but I don't recommend it, or if you get just on case that you need to style a specific tag in the page.

Layouts with CSS's lessons:

Adding CSS To Pages
CSS Selectors
Units Of Measure
Box Properties