CSS Types

 

There are three ways of using CSS rules:

 

  • Inline style: inside an HTML element
  • Internal or Embedded style sheet: inside the head section of an HTML page
  • External or Linked style sheet: in an external CSS file

 

 

Inline Styles

 

Inline styles are used to style a single element for instance styling a word in a sentence.

To use inline styles you use the style attribute inside the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the color of a word inside a paragraph:

 

<p> The Christmas lights were <span style="color: #ff0000;">red</span> and they looked great.</p>

 

This can also come handy if you want to change an element to look differently than its default style. For instance if you have defined all the <h1> tags to be blue but you want one of them to appear red you can use inline styling as shown below:

 

<h1 style="color:#F00;">This is a heading.</h1>

 

Internal Style Sheet

 

An internal style sheet should be used when a single document has a unique style. You define internal styles in the <head> section of the HTML page, by using the <style> tag, like this:

 

<html>

<head>
<style type="text/css">
p {margin-left: 20px;}
</style>

</head>

 

<body>
<p>This is a paragraph.</p>
</body>
</html>

 

 

External Style Sheet

 

An external style sheet is written in Notepad and is ideal when the style is applied to many pages. In this case you can simply edit the external CSS sheet and apply the changes to the entire website. Each page must link to the external style sheet using the <link> tag which goes inside the <head> section:

 

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

 

The CSS external sheet should not contain any html tag. Your style sheet should be saved with a .css extension. For example we can type the following codes in the Notepad and save it as: style.css

 

hr {color: #ff0000;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

 

NOTE: The <link> tag doesn't do anything by itself. This tag, tells the browser to open the style.css file and apply the styles in the file to the page.

 

 

Best Way of Using CSS

 

  1. Design the index.html page and style it using Internal CSS
  2. Cut all the CSS rules and paste them in a Notepad and save as: style.css
  3. Remove: <style type=”text/css”> </style>
  4. Replace it with: <link rel="stylesheet" type="text/css" href="style.css" />
  5. Create other HTML pages: create multiple copies of index.html page and rename them (i.e. contact.html, about.html). Since you created all the pages from index.html they are all linked to style.css

 

 

Cascading Order

 

When there is more than one style specified for an HTML element, styles cascade and override each other by the following rules, where number four has the highest priority:

 

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)

 

Example:

 

Let’s say for some reason you have to overrule some of the styles of the external sheet for just one page. You can use the Internal CSS for that page. This will override any rules you have for that page on the external style sheet. So if you want h2 heading tags to be green, inset the rule in the <head> section. An internal rule overrules the external rule for an element. So if your external sheet says font-size: 12px, color: red; and you embed color: green then the text will turn to green but the font-size will remain at 12px.

 

 

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>