CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

The different types of stylesheets

Stylesheet definitions created with CSS can be inserted into an HTML document in a few different ways.

This tutorial focuses on:

The three types of stylesheets

There are three types of stylesheets:

Creating an internal stylesheet

Use an internal stylesheet when you want an HTML document to have a unique style. An internal stylesheet is defined using the <style> tag and goes in the head section of an HTML document.

The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css".

Syntax:
<style type="text/css"> styles go here </style>
Example:
<html> <head> <style type="text/css"> p {color: green} </style> </head> <body> <p> The text in this paragraph will be green. </p> <p> This paragraph too. </p> </body> </html>

The above stylesheet definition specifies that all text declared with the <p> tag should be green.

Output:

The text in this paragraph will be green.

This paragraph too.

NOTE: There are some old browsers still in use that do not support styles. Such browsers will ignore the <style> tag and will display the content within it on a webpage. You can prevent this by placing HTML comments within the <style> tag:

Example:
<html> <head> <style type="text/css"> <!-- p {color: green;} --> </style> </head> <body> <p> The text in this paragraph will be green. </p> </body> </html>

Creating an external stylesheet

Use an external stylesheet when you want to apply one style to many pages. If you make one change in an external stylesheet, the change is universal on all the pages where the stylesheet is used.

An external stylesheet is declared in an external file with a .css extension. It is called by pages whose interface it will affect. External stylesheets are called using the <link> tag which should be placed in the head section of an HTML document. This tag takes three attributes.

Attributes of the <link> tag:

Example:
<html> <head> <link rel="stylesheet" type="text/css" href="style1.css" /> </head> <body> <p> The text in this paragraph will be blue. </p> </body> </html>
Output:

The text in this paragraph will be blue

The code from style1.css:
p {color:blue}

NOTE: The <style> tag is NOT used in an external stylesheet, and neither are HTML comments.

Creating an inline stylesheet

Use inline stylesheets when you want to apply a style to a single occurence of an element.

Inline stylesheets are declared within individual tags and affect those tags only. Inline stylesheets are declared with the style attribute.

Example:
<p style="color:gray">This text will be gray.</p>

In this example, we are using the stylesheet command color to denote that the text in a paragraph will be gray.

Output:

This text will be gray.

Multiple stylesheets

You can have multiple stylesheet definitions on one page. For example, an internal stylesheet and an external stylesheet on one page or an inline stylesheet and an internal stylesheet on one page.

If a property has been set for the same tag in different stylesheet definitions on the same page, the definition that will be used will be from the most specific stylesheet. That is, the stylesheet that has the highest priority.

Stylesheets by priority:

Example:
<html> <head> <link rel="stylesheet" type="text/css" href="style2.css" /> <style type="text/css"> <!-- p {color: orange} --> </style> </head> <body> <p style="color: yellow"> The text in this paragraph will be yellow. </p> </body> </html>
Output:

In this example there are several stylesheet definitions:

Assume that this page is viewed in a web browser that has the default background color for webpages set to light yellow.

The external stylesheet definition will override the web browsers default background color and will set the background color of the page to gray.

The inline stylesheet definition will override the internal stylesheets definition that specifies that text declared with the <p> tag should be orange, and will set it to yellow.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information