Wednesday 26 November 2014

Introduction to CSS

CSS is used to control the style and layout of multiple web pages. It defines how to style HTML elements. An HTML element can be displayed with different styles using CSS.

CSS stands for Cascading Style Sheets.

CSS language are normally saved as external .css file. External style sheets helps you to change the appearance and layout of al the webpages using a single file. Therefore, using a CSS file can save you a lot of work and design the webpage as you like.

CSS Syntax

A CSS declaration always ends in a semi-colon and the group is surrounded by curly brackets. A CSS rule consist of a selector and the declaration block:

For example:
h1 {color:blue;}
In this example, "h1" is the selector. The selector points out the HTML element you want to style.The selector is used to select a specific tag in which the style is to be applied on and edit the element according to our wish. CSS selectors are used to find or select the HTML element based on their id, classes, types, attributes, values of attributes etc.

Everything inside the curly bracket is called the declaration. The declaration block can contain more than one or more declarations separated by a comma. Each declaration contains a property name and values, which is separated by a comma. In this example, the property name is "color" and the value is "blue". It specifies the color of the h1 heading to be blue in color.

CSS Comments

Comments are used to explain the code or what that HTML element is used for. It is very useful for users to edit the source code later. Comments are ignored by the browser, so that they are not displayed in the web browser.

CSS comments starts with /* and ends with */. Comments are plain text written inside /* and */. Comments can also span multiple lines

For example:
/*This is a single line comment*/
h1 {color:blue;
/*This is a 
multiple line comment*/
}

CSS Style Sheets

CSS style sheets can be added in three ways:

  1. External Style Sheets
  2. Internal Style Sheets
  3. Inline Style Sheets
External Style Sheets: An external style sheets is used when the same style is used to more than one webpage. With an external style sheet, we can change the looks of the entire webpage by changing just one file. Each page must be linked to the style sheet using the tag. The tag goes inside the head section.

For example:
<head>
<link href="style.css" rel="stylesheet" type="text/css"></link>
</head>
An external CSS style sheet can be written in Notepad just like HTML, but should be saved with .css extension.

For example:
h1 {color:blue;}
p{color:red;}
Internal Style Sheets: An internal style sheet should be used when a single document should have a unique style. We can define internal style sheet in the head section of the HTML page,using the &ltstyle> tag.

For example:
<head>
<style>
h1 {color:blue;}
p{color:red;}
</style>
<head>
Inline Style Sheets: An inline style sheet is used when a single element should be given a unique style. Inline styles are given inside the tag itself as attributes. To use the inline style, we should use the style attribute in that particular tag. The style is possible to contain any CSS styles but that property is only restricted to that particular element only.

For example:
<div style="color: red;">
This is a paragraph.</div>

0 comments:

Post a Comment