CSS(Cascading Style Sheets)-basic elements

      No Comments on CSS(Cascading Style Sheets)-basic elements

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.It is used to control the style of a web document in a simple and easy way.

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

All about CSS-

CSS style can not communicate in nice clear English.They have language for their own.For example, to set a font size and color

p{color:red;font-size:16px}

This simple says,”Make all text marked inside the <p> tags red and of size 16px.

Various elements in CSS-

  1. Selector:A selector tells the web browser which element to style-like headline,paragraph or a link etc.In the above example the selector (p) refers to tag .This selector makes the browser style all the text in the <p> tags using the formatting directions.
  2. Declaration Block:The code following the selector that includes all formatting options you want to apply on the selector.The block beings with the opening { braces and ends with the closing }brace.
  3. Declaration:Between the opening and the closing blocks you add one or more declarations or the formatting instructions.Every declaration has two parts the property and the value for that property.It ends with a semicolon (;).
  4. Properties:properties refer to a wide range of formatting options available.A property is a word indicating certain style.Most properties have straight forward names-like font-size,color etc.
  5. Value:Finally one can style a webpages by providing a genius value to each property you assign to a selector. The properties require specific kind of values for example-color( red or #000),height( 90px or 10%) or a specific keyword (like top,bottom,left or right).

Example:

css-selectors-lrg

Leave a Reply

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