Easy Tutorial
Css Background Css Important Css3 Border Radius Css Form Css Border Css Combinators Css Counters Pr List Style Image Css3 Transitions Css Attribute Selectors Index Css Tutorial Css Howto Css Intro Css Positioning Css Tooltip Css Selectors Css Align Css Rwd Videos Css Syntax Css Rwd Intro Css Dimension Css3 Multiple Columns Css Summary Css Pseudo Elements Css Float Css Website Layout Css Id Class Css Overflow Css Rwd Viewport Css List Css Image Gallery Css Outline Css Rwd Frameworks Css3 Borders Css Font Css Rwd Mediaqueries Css Image Transparency Pr Dim Height Css Margin Css3 2Dtransforms Css Boxmodel Css Grouping Nesting Css3 Animations Css3 Gradients Css Text Pr Tab Caption Side Css Pseudo Classes Css Navbar Css Padding Css Display Visibility Css Dropdowns Css Rwd Images Pr List Style Position Css Table Css Mediatypes Css Image Sprites Css Rwd Grid Css Grid Css Examples Css Link Css Colors Legal Pr List Style Type
❮ Css Tutorial Css Intro ❯

CSSCreation

When reading a stylesheet, the browser formats the HTML document according to it.

How to Insert a Stylesheet

There are three methods for inserting a stylesheet:

External Style Sheet

When styles need to be applied to many pages, an external style sheet is the ideal choice. With an external style sheet, you can change the look of an entire site by changing just one file. Each page links to the stylesheet using the <link> tag in the head section:

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

The browser reads the style declarations from the file mystyle.css and formats the document accordingly.

External style sheets can be edited in any text editor. The file should not contain any HTML tags. Style sheets should be saved with a .css extension. Here is an example of a stylesheet file:

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

Internal Style Sheet

When a single document needs special styles, an internal style sheet should be used. You can define an internal style sheet using the <style> tag in the document head, like this:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Style

Using inline styles mixes presentation with content, which loses many advantages of style sheets. Use this method sparingly, for example when a style needs to be applied to a single element only.

To use inline styles, you need to use the style attribute within the relevant tag. The style attribute can contain any CSS property. This example shows how to change the color and left margin of a paragraph:

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

Multiple Styles

If certain properties are defined for the same selector in different stylesheets, the property values will inherit from the more specific stylesheet.

For example, an external style sheet has three properties for the h3 selector:

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

And an internal style sheet has two properties for the h3 selector:

h3
{
    text-align:right;
    font-size:20pt;
}

If a page with the internal style sheet also links to the external style sheet, the h3 will get the following styles:

color:red;
text-align:right;
font-size:20pt;

The color property will inherit from the external style sheet, while text alignment and font size will be overridden by the rules in the internal style sheet.

Multiple Style Precedence

Stylesheets allow styling information to be specified in multiple ways. Styles can be defined within a single HTML element, in the head element of an HTML page, or in an external CSS file. Multiple external stylesheets can also be referenced within the same HTML document.

Generally, precedence is as follows:

(Inline style) Inline style > (Internal style) Internal style sheet > (External style) External style sheet > Browser default styles

The style.css file contains the following style code:

h3 {
    color:blue;
}

Example

<head>
    <!-- External style style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- Sets: h3{color:blue;} -->
    <style type="text/css">
      /* Internal style */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>This will display in green, due to the internal style</h3>
</body>

Note: If the external style is placed after the internal style, the external style will override the internal style. Here is an example:

Example

<head>
    <!-- Sets: h3{color:blue;} -->
    <style type="text/css">
      /* Internal style */
      h3{color:green;}
    </style>
    <!-- External style style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <h3>This will display in blue, due to the external style overriding the internal style</h3>
</body>

/* Internal style */
h3 { color: green; }
</style>
<!-- External style style.css -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <h3>Displays blue, is the external style</h3>
</body>
❮ Css Tutorial Css Intro ❯