CSS Introduction


Types

Inline styles, internal style sheets, and external style sheets


Inline styles

<p style="font-size:12px; color:red;">Contents</p>

The CSS inline style also follows the HTML syntax : attribute = "value".
Attribute style indicate the CSS style value, this example define two CSS styles, font size and font color.


Internal style sheets

<head>
  <title></title>
  <style type="text/css">
    p { font-size:12px; color:red; }
  </style>
</head>

For <style> tag, specify the type="text/css" attribute to indicate apply a CSS style in this document.

Contents inside the <style> tag will be the CSS styles

The style tells the browser that all <p> tags in this document have a 12px font size and a red color.


External style sheets

An external style sheet worked by refer to a css file.

<head>
  <title></title>
  <link rel="stylesheet" href="style/default.css" type="text/css" />
</head>

External Stylesheet apply a CSS style sheet by applying an external CSS style file (default.css) inside the <head> tag using the <link> tag.
CSS file must be the .css as a file extension, the file contains CSS specific content.


Browser default style

Web page elements are also affected by the browser's default style.
An example is the browser default hyperlink is underlined, if we want to remove the hyperlink underline, apply a separate text underlined style on the hyperlink.

All three CSS definition type can be mixed, but it will make the style sheet becomes confusing.
On the priority: inline style > inline style sheet > external style sheet > browser default style.


CSS writing style

Just like any other programming language, CSS must be easy to understand and maintain. We recommend that the stylesheet can be written as follows:

/* default.css */
p {
    font-size: 12px; 
    color: red;
}

A CSS attribute occupy a line and tab indent at front.




Copyright 2014-2017 by DeveloperTut.com. All Rights Reserved.
TwitterGoogle+Facebook