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:



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




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)

media Specifies the device type used to display the document all (default)











Internal Stylesheet


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



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

body { background-color: black; }

h1 { color: #F00; }

p { color: #FFFFFF; }





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 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:



@import "style.css" ;

ul { color: blue; }

... more rules go here ...


Leave a Reply