Jun 3, 2015

Using CSS

        No comments    

There are three ways to use CSS: with a special HTML tag inside HEAD section, as element attribute or using an external file. Here you can see how use them all.

There are three ways, but the most used and better approach due the MVC design pattern for example, is keep the CSS separated from the HTML code, using an external file.

External Style Sheet

Place the CSS code in a file.css and then in the HTML HEAD section, place the "link" element with the "rel", "type" and "href" attributes:

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

Internal Style Sheet

The second way is insert in the HEAD section directly, using the "style" tag:

<head>  
  <style>
    h1 { 
      margin-left: 20px;
      color: blue;
    }
  </style> 
</head>

Inline Styles

And the third way is placing directly in the element, as an attribute:

<h1 style="color:blue; margin-left:10px;">This is h1 text</h1>

The CSS has this name, because the styles are applied in cascade, in the following priority order:
  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default
In other words, the more specific style will overwrite the more generic.

0 comentários :

Post a Comment