Introduction to CSS

June 5, 2007

Css ( Cascading Style Sheet )
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language.

  • Styles define how to display HTML elements.
  • Styles are normally stored in Style Sheets.
  • Styles were added to HTML to solve a problem.
  • External Style Sheets can save you a lot of work.
  • External Style Sheets are stored in CSS files.
  • Multiple style definitions will cascade into one.

How styles solve a Common Problem?

  • Styles sheets define HOW HTML elements to be displayed.
  • Styles are normally saved in External file, so changes can apply to all the pages.

Style sheets specified in many ways.
Cascading Order

  1. Browser Default
  2. External Style Sheet
  3. Internal Style Sheet
  4. Inline Style

CSS Syntax
Selector {property : value}
For example: -

P { Text-align: center;
Text-color: black;
Font-family: arial;
}

Css group selector
You can write group selector with a comma.
For example: -

h1, h2, h3, h4, h5, h6{
Color: black;
}

CSS Class Selector
The Class Selector :-
You can define different style for the same type of HTML elements.
Class is defined as a “.”
For example :-

p.right{
text-align: right;
}

CSS ID Selector
ID Selector :-
The ID is defined as a #.
Do NOT start an ID name with a number!
For example :-

#yellow{
Color: yellow;
}

How to insert Style Sheet?
1. External Style Sheet

  • It is ideal way when the style is applied for many pages.
  • Each page must link to style sheet using by “<link>” tag in head section.
    <head>
    <link rel=”stylesheet” type=”text/css” href=”mystyle.css />
    </head>
  • Style sheet can be written in any text editor.
  • Style sheet should be saved with a .css extension.

2. Internal Style Sheet

  • It is used when a single document has a unique style.
  • You can define in head section using <style> tag.<head>
    <style type=”text/css”/>
    Hr{color: blue}
    Body { background-image: url(“images/bg.gif”)}
    </style>
    </head>

3. Inline Style Sheet

  • This style sheet loses many of advantages by mixing content with presentation.
  • Use this style sheet when it applied for a single document.
  • Normally used for Newsletter pages.
    <p style=”color: red; margin-left:20px”>
    This is a paragraph.
    </p>

CSS Length and Percentages
Property-specific units for value :-

  • em : calculated size of font (font-size : 2em)
  • px : unit for pixcel (font-size : 2px)
  • pt : unit for points (font-size : 2pt)
  • % : unit for percentages ( font-size : 2%)
  • Other units are : pc (picas), cm (centimeters), in (inches)
Posted by sangeetabhoir
Filed in Css
Leave a Comment »