Learning the Basics of Applying CSS

One of the most important lessons that you would learn about CSS is how to use and apply it. This article will attempt to explain how you can use it. Though the article might be a short explanation, this should be a start for introducing you on how to use CSS.

Applying CSS: The Basics

The first thing that you have to know in using CSS is that there are three ways that you can insert the sheet. These are the following:

    • There is the internal style sheet.
    • There is the external style sheet.
    • Then there is the inline style.

 

The External Style Sheet

The external style sheet is perfect when you are going to use it for multiple pages. With this kind of style you will be able to alter the look of an entire website by just making changes to one file. In order for that feature to work, you must link all of the pages to the style sheet. You can achieve this effect with the use of this tag: . That tag should placed on the top section of the document. Here is a sample code for that:

<head>

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

</head>

An external style sheet can be created in any text editor. You should not include any HTML tags in it because you should save it using an extension that is solely meant for CSS.

Internal Style Sheet

This style is best used when a certain page should have a particular style to it or when it has to be different and distinct. You need to use the tag

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

Inline Styles

There’s not much benefit when you use inline style. In fact it would be better if you are going to use this style as seldom as you can. You need to place the attribute of the style on the portion where you want it. Here is an example of a code that uses the inline style for a sheet:

<p style="color:sienna;margin-left:30px">This is a paragraph.</p>

 

You can use this style with any kind of property for the CSS. In the code that we have given, the left margin and the color are being changed.

Using Multiple Style Sheets

Selectors might be given different properties on different pages. When that happens the most detailed and specific and detailed ones would be applied and take precedence over the others.

Now you might be wondering as to what style would be used when there are multiple styles specified? There are certain rules that will be followed. These are the rules:

  • The default of the browser
  • External style sheet
  • Internal style sheet
  • Inline style

The last one, the inline style would have the highest priority in the list. That means it would override all the other styles on a page if there are multiple styles placed on it.