Table of Contents
Cascading Style Sheet
In this CSS tutorial we are going to learn the 4 types of CSS – Inline, Embedded, External and Imported. No matter how well designed and well written the CSS code might be, it is of no use on its own. The CSS styles have to be applied to a clearly structured HTML web page. It is important to understand how the implementation of CSS works. Let’s look at the different ways of applying CSS and their benefits and drawbacks.
The Basic HTML template
For all the examples in this tutorial series we will be using a simple HTML template having some standard document sections. Keep in mind that we are moving ahead with the assumption that you have some elementary understanding of HTML code.
To really understand and comprehend CSS, it’s recommended that you copy the code from this template verbatim and try out all the examples yourself.
<!-- base.hmtl --> <!DOCTYPE html> <html> <head> <title>CSS Implementation</title> </head> <body> <h1> CSS Implementation</h1> <p> This is a test website containing several HTML templates, each being styled using a different method of CSS application </p> <p> Click an example below. </p> <h2>Examples</h2> <ul> <li><a href="base.html">Base Template</a></li> <li><a href="inline.html">Inline CSS</a></li> <li><a href="embedded.html">Embedded CSS</a></li> <li><a href="external.html">External CSS</a></li> <li><a href="imported.html">Imported CSS</a></li> </ul> </body> </html>
Save the file naming base.html to a new folder on your computer. Open the file using a browser to see the basic web page as it stands.
Now let’s make more template pages, each of which we will be using to show different ways in which CSS can be implemented. Copy base.html and make four and name them inline.html, embedded.html, external.html and imported.html.
1. Save these new files to the same folder as base.html.
2. The four new files should now be available from your base.html file in your web browser.
Inline styles
The first method of implementing CSS is through inline styles. This is the most basic way of doing it, making use of the style attribute for specific tags within the HTML document itself. The styles are declared using the format property:value. We will go into the CSS syntax and different properties and their values a little later.
To try this out,
1. Open inline.html in your text editor (Sublime text).
2. Proceed to the first opening paragraph tag <p>.
3. Replace the <p> with <p style=”color: red”> and save the template.
Save and reload the file in your browser. Notice now that the text contained within that paragraph will be red. Only that particular paragraph is affected, and the second paragraph defaults to black. This method of applying styles can be applied to any HTML element within the <body> of the page.
Inline styles are useful of testing out simple CSS rules instantly; however, as you get more proficient with CSS you will realize that it is not the best way of doing things. Using inline styles will increase your individual file size significantly and also requires you to declare your styles for each and every tag individually.
Embedded styles
The idea behind embedded styles is that you still have your styles in the same HTML document, but grouped together in the head of the document as a single element which is gets applied page wide.
Let’s try it out,
1. Open embedded.html in your text editor (Sublime text).
2. Within the <head> section of the template, just after the <title> element, pastes the following code:
<style type=”text/css”>
p{color: red;}
</style>
3. Again, we are using a simple CSS declaration to render the text red.
4. Save the template, and open it in the web browser.
Notice now that the text contained within both the paragraph will be red. This time around, all paragraphs in the document are affected by this declaration, as the style is applied to all <p> tags within the page.
This method is definitely more effective than inline CSS and it allows you to administer styles throughout the document. But grouping the styles together within the HTML document still increases your file size. The problem with embedded styles is again the fact that they are loading from within the document. Also, these styles will be downloaded again and again every time with every page load, every page of your web site will need its own embedded styles, and making site-wide style changes will be very laborious.
External Styles
The most commonly used method for implementing CSS and also the most effective is making use of external style sheets.
Again let us work with an example
1. Open external.html in your text editor (Sublime text).
2. Within the <head> section, and after the <title> element, paste the element
<link rel=”stylesheet” type=”text/css” href=”external.css” />
and save the file. This line tells the browser to look for an external file called external.css, which is a CSS file, and stored in the same directory as the HTML file.
3. Now create a new file called external.css.
4. Paste the following code p{color: red;} into external.css.
5. Save external.css to the same folder as the .html files, and again open it in your web browser.
Again the paragraph turns red, but note that there is not a single CSS rule or style element anywhere in your HTML file. Your HTML is free from the presentation code and the color is being controlled via the external style sheet. From this point on whatever changes are needed within the site in terms of style and presentation can be done directly through a single external style sheet. Also, once a browser accesses the style sheet, it caches it and wouldn’t need to keep downloading it each time it accesses it. Rather, it only downloads the page content. This will make your website faster and also keep your HTML clean.
Importing styles
The @import rule is a method for importing one or more style sheets via the main external style sheet.
Continuing from the previous example,
1. Open the imported.html file in your text editor (Sublime text).
2. Within the <head> section, and after the <title> element, paste the element
<style type=”text/css”>@import url(external.css); </style>
3. Save imported.html and view it in the browser. Nothing looks different, and the paragraphs are still red, but this is a sensible and productive way of style sheet management.
The @import rule is also useful for hiding your style sheet from really old out-dated browsers with poor CSS support. Rather than attempt to do something half useful with your CSS, these, browsers will just completely ignore your style sheet and leave the HTML without styled.;