Style Sheets

External style sheets

<head>
    <link rel="stylesheet" type="text/css" href="file-name.css" [media="<screen, print, ...>*"] />

    <style type="text/css" [media="<screen,print,...>*"]>
        @import url(file-name.css);
        @import url(file-name2.css);
    </style>
</head>

Internal style sheets

<head>
    <style type="text/css" [media="<screen, print, ...>*"]>
    ...
    </style>
</head>
  • Embedded style sheets
  • Embedding the code in HTML comments to support older browsers is no longer essential (which used to prevent the rules from being displayed on the screen)

Inline styles

<element style="property: value">

Examples

<div style="padding-top: 5px">

Importing a style sheet

@import url(/path/filename.css);
  • Can be used inside a CSS file or inside a <style> element
  • All import statements must occur at the beginning of the style sheet

Misc

  • An internal style sheet is appropriate when a single document has a unique style.

 

Resources URL: 
notes/css/resources
Sources URL: 
notes/css/sources

See Also