Basics of css and css designing tutorials.

CSS – Cascading Style Sheet format the presentation of the html document like content alignment, font, background color, border, etc. Separating the contents from the presentation result in clean html code and fast loading time.
Cascading Style Sheet tutorialsCSS include two parts:

  • Selector
  • Declaration
    • Property
    • value

Selector is the name of class and Declaration is the properties explained in the class for a particular style.
Declaration has two parts: property like font-style and value as italic.
Eg:

Cascading Style Sheet

The style can be placed in a separate page called css or can be written in the head portion of the html document. Declaration is written within curly braces and each declaration ends with semi-colon. The style (format) can be applied to many tags in a single page or in multiple pages which is possible

in the case of external style sheet. When a css is updated, the element with the style gets automatically updated.
Three types of CSS:

  • Internal style sheet
  • External style sheet
  • Inline style sheet

Internal style sheet includes placing the style in the head portion of the html document. It is good to use this when the style is used only in a single page.

<html >
<head>
<title>Cascade Style Sheet</title>
<style type="text/css">
<!—
.style1 {font-size: 12px; color: #FF0000;}
-->
</style>
</head>

External style sheet includes placing the styles in a separate notepad or dreamweaver document and saving it with .css extension. External style sheet should be linked to the html document in its head portion.
The advantages of external style sheet:

  • Easier maintenance.
  • Reduce file size.
  • Reduce bandwidth.
  • Increase flexibility.
  • Loading of web page will be faster.

“stylesheet” type=“text/css” href=“Path To stylesheet.css” />
Inline style sheet includes placing the style along with the element.
Eg:

<p style="color: #FFFF00;">Inline style sheet</p>
Inline style sheet
  

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>