Adding Styles to HTML

Styles can be applied to documents in the following ways.

  • Use <link> element inside <head> section.
  • Use @import at-rule in the <style> element tag defined inside the <head> section of the document.
  • Insert a <style> element tag inside the <head> section of the document.
  • Insert the style attribute within an HTML tag.

Inline Styles

Style information can be specified for an individual element via the style attribute. The value of a style is a declaration block without the curly brackets.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
    </head> 
    <body> 
        <a href="http://java2s.com" style="background-color:red; color:white"> 
            Visit the website 
        </a>
        <p style="color: red; background: yellow;">Red</p> 
         
    </body> 
</html>
  
Click to view the demo

Embedded Style Sheets

A style can be embedded at the top of an HTML document using the style element, which must appear within the head element.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        a { 
            background-color:grey; 
            color:white 
        } 
        </style> 
    </head> 
    <body> 
        <a href="http://java2s.com">Visit the website</a> 
        <a href="http://java2s.com">Visit the website</a> 
    </body> 
</html>
  
Click to view the demo

The selector a instructs the browser to apply the style to every a element in the document. You can define multiple styles in a single style element.

The following code shows a style element that has two styles.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        a { 
            background-color:grey; 
            color:white 
        } 
        span { 
            border: thin black solid; 
            padding: 10px; 
        } 
        </style> 
    </head> 
    <body> 
        <a href="http://java2s.com">Visit the website</a> 
        <p>I like <span>HTML</span> and CSS.</p> 
        <a href="http://java2s.com">Visit the website</a> 
    </body> 
</html>
  
Click to view the demo

This new style has a selector of span. The browser will apply the style to all span elements in the document.

External Style Sheets

You can create a separate stylesheet in an independent file with .css file extension. You don't need to use a <style> element in a stylesheet file.

External style sheets are cached. The following code shows the contents of the file styles.css.


a { 
    background-color:grey; 
    color:white 
} 
span { 
    border: thin black solid; 
    padding: 10px; 
}

You can then use the link element to bring the styles into your document.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <link rel="stylesheet" type="text/css" href="styles.css"></link> 
    </head> 
    <body> 
        <a href="http://java2s.com">Visit the website</a> 
        <p>I like <span>HTML</span> and CSS.</p> 
        <a href="http://java2s.com">Visit the website</a> 
    </body> 
</html>
  

You can link to more than one stylesheets, one per link element. The order in which you import stylesheets is important if you define two styles with the same selector. The one that is loaded last wins.

Importing from Another Stylesheet

You can import styles from one stylesheet into another using the @import statement.

The style.css File:


@import "another.css"; 
span { 
  border: medium black dashed; 
  padding: 10px; 
}

You can import more than one stylesheets, using one @import statement per stylesheet. The @import statements must appear at the top of the stylesheet.

The @import statement has the effect of importing the styles and then merging the style.

Home 
  HTML CSS Book 
    CSS  

Introduction:
  1. What is Cascading Style Sheets (CSS)
  2. Adding Styles to HTML
  3. Specifying the Character Encoding of a Stylesheet
  4. How Styles Cascade and Inherit
  5. Element Classification
  6. Cascading Style Sheets prefixes for the most popular browsers
Related: