CSS Tutorial – 03 – Using CSS

2 comments Admin

There are three way to insert CSS into an HTML document – either using an internal style sheet, inline styles, or an external style sheet.

Internal style sheet

An internal style sheet is useful when a single document needs to have a unique style. The style sheet is then embedded in the head of the document using the <style> header element. This element is a container for style sheet rules and should have its type attribute set to “text/css”.

<style type="text/css">
  p { color:#FF0000; }
</style>

Inline style

When styling needs to be assigned to an individual element the style attribute can be used to set an inline style. This is a generic attribute that can be included in all HTML tags. Its value is the CSS declarations that will be applied to the element. There is no need to specify a selector since the declarations implicitly belong to the current element. This approach should be used sparingly, since it mixes the style with the content.

<p style="color:#00FF00;">Example</p>

External style sheet

The most common way of including CSS is through an external style sheet. The style sheet rules are placed in a separate text file with a .css file extension. This style sheet is then referenced using the <link> header element. The rel (relationship) attribute must be set to “stylesheet” and the meta type attribute to “text/css”. The location of the style sheet is specified with the href attribute.

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

Alternatively, an external style sheet can be included using the CSS @import function from inside of the <style> element. This function must be placed before any other rules for it to work.

<style type="text/css">
 @import url(MyStyle.css);
</style>

Using external style sheets is often preferred since it completely separates CSS from the HTML document. This makes it possible to quickly create a consistent look for an entire website and to change its appearance just by editing a single CSS document.