CSS for Beginners part 2

On 04.26.09, In CSS, Tutorials, by Kalyan

This second installment of CSS for Beginners will give you an overview of the different kinds of CSS levels and the priorities of the different levels. Also given are a few examples to show the difference between the 3 levels of CSS – Inline, Internal, External.

Having discussed the advantages and the disadvantages of CSS in my earlier post, let us know see what the different types or levels of CSS are.

There are 3 ways we can write styles.

Inline
Internal
External

1. Inline CSS

Inline CSS is – writing the required style to a specific tag within the page.

For Example:

<p style="color:red">Developer Wall: CSS for Beginners</p>

The above piece of code is to display anything within the paragraph tag in red color.

Output:

Developer Wall: CSS for Beginners

2. Internal CSS

Internal styles are written in the <head> tag of the HTML page as follows

For Example:

<head>


<style type="text/css">

  <!--

  .redtext{ color: #FF0000; }

  -->

</style>


</head>

This is now called a class and can be referred by any other tag in the HTML to inherit the properties. Example as below

<p class="redtext">Developer Wall: CSS for Beginners</p>

The above code will also result in displaying the text in red as in the Inline example above.

3. External CSS

External styles can be written by writing the code in a separate CSS file and then linking it in the HTML page.

For example:

The class “redtext” can be written in a separate file like say styles.css and then can be called in the HTML file with the following line in the <head> tag

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

The above line of code will actually link the external css file to the HTML page and all the classes defining the styles can be accessed using the “class” attribute for the HTML tags in the page.

Example:

Lets say we have the following styles in the CSS stylesheet styles.css:

.redtext{color:red;}


.boldtext{font-weight:bold;}


.textsize{font-size:13px;}

This stylesheet can now be linked into a HTML page by writing the following code in the <head> as follows [If you are using softwares like Adobe Dreamweaver, there are easier ways to link the stylesheet]:

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

Now, you can apply the available 3 classes in the stylesheet to 3 different tags in the HTML as follows:

<p class="redtext">DeveloperWall</p>

  <p class="boldtext">CSS</p>

<p class="textsize">Blog for Developers</p>

The output of the above code will be:


DeveloperWall
CSS
Blog for Developers

There are also priorities for each CSS level. What if there is a style written for a paragraph tag in all three levels? Whcih level of CSS is accepted.

Inline CSS has top priority. Next comes Internal CSS and then at last is External CSS. So, if a paragraph tag has all three, it will accept Inline CSS first. If there is no Inline CSS, then it looks for Internal and then finally External CSS.

Kalyan

Visit Authors Website | All Articles From This Author

5 Responses

Alex

04.26.09

Really useful thanks!!
waiting for further tutorials..

web design services

04.26.09

I love to learn more about css as a web designer css is very easy to learn as it is very friendly with web designing tools and softwares like dreamweaver you can define your css without coding.