Placement

There are four ways to apply CSS:

  • External stylesheet
  • Internal stylesheet
  • Inline style
  • Imported

 

External Stylesheet

 

This is the preferred method, promoting the separation of content from style.

 

A <link /> in the <head> section of the HTML document is used:

 

<head>

<link rel="stylesheet" href="style.css" type="text/css"  media="screen" />

</head>

 

 

With the following attributes:

Attribute Description Value
rel Specifies the relationship of the link between the document and the target URL, as defined in the href attribute "stylesheet"
href Specifies the location of the stylesheet URL; "./style.css"
type Specifies the MIME content type of the style language

(not required for HTML5 spec)

"text/css"
media Specifies the device type used to display the document all (default)

aural

braille

handheld

print

projection

screen

tv

tty

 

 

Internal Stylesheet

 

Utilises the <style> element within the <head> section of the HTML document:

 

<head>

<style type="text/css" media="screen">

body { background-color: black; }

h1 { color: #F00; }

p { color: #FFFFFF; }

</style>

</head>

 

 

Inline Style

 

Applies styling directly within the opening tag of an element using the 'style' attribute and then defining the rule declarations within quotes:

 

<p style="color: #FF0000; font-style: italic;" >This is my styled text.</p>

 

 

Imported

 

Imported stylesheets are used (usually within external stylesheets) in a similar manner to using the <link> element. The keyword @import is used before the stylesheet location and media type:

 

@import "style.css" screen, print, tv ;

 

The @import must have no spaces between the @ character and import, and must precede all other declarations. Thus, if in an external stylesheet it must be the first rule to be defined, and similarly it should be placed at the top of an internal stylesheet, like so:

 

<style>

@import "style.css" ;

ul { color: blue; }

... more rules go here ...

</style>

Leave a Reply