10th Class Computers Science Working with CSS Working With CSS

Working With CSS

Category : 10th Class

Working With CSS

Introduction

CSS is defined as the Cascading Style Sheets (CSS) is a text document or Style sheet. A style sheet is a set of style rules that tell a browser how to present a document. HTML's STYLE element is the simplest ways of linking these style rules to your HTML documents. These elements are placed in the document HEAD, and it contains the style rules for the page. Same CSS document can be used to define multiple HTML document. CSS document has the .css extension. The CSS syntax can be divided into two parts, selector and declaration. The selector is defined as the HTML element to which the CSS style is applied and declaration contains the CSS properties, such as colour, font size, and values of these properties.

CSS Syntax

A CSS rule divides into two parts. Selector (Head1; Head2 ;) and declaration (property1: value1; property2: value2). Basically selector is the HTML element you want to style and property is the style attribute. CSS declaration always ends with a semicolon and declaration group is surrounded by middle or curly bracket. The following is the simple example of CSS:

Mystyle

{

color:green;

text-align:center;

}

CSS Background

CSS allows changing background colour of a page. It enables background-colour property that specifies the background colour of an element. The following code snippet shows how to change background:

body {background-color: # ff0000;}

CSS enables background-image property that allows changing background image of a page. The following code snippet shows how to change background image for a page:

body {background-image: url ('imgl.gif');}

To repeat the image only horizontally you need to use repeat-x property.

The following code snippet shows how to use repeat-x property:

body

{

background-image: uri ('img 1.gif');

background-repeat: repeat-x;

}

Background property allows following values declaration:

Background-Color

Allows setting background colour of an element. You can pass the following values:

v color-rgb

v color-hex

v color-name

v transparent

Background-Image

Allows setting background image for an element. You can pass the following values:

v url

v inherit

v none

Background-Repeat

Allows setting background image will be repeated. You can pass the following values:

v repeat

v repeat-x

v repeat-y

v no-repeat

v inherit

Background-Attachments

Allows making a background image is fixed or scroll. You can pass the following values:

v scroll

v fixed

v inherit

Background - Position

Allows setting starting position of the background image. You can pass the following values:

v left center

v left top

v left bottom

v Right center

v Right top

v Right bottom

v Center center

v Center bottom

v Center top

v Inherit

CSS Comments

The CSS comment starts with "/*" and ends with "*/". Basically comments are used to explain your code line by line. These comments are useful in future when a new programmer make modification in that code. These comments are ignored by browsers. The following code snippet shows how to use comments:

/* this code is used for changing colour*/

Mystyle

{

colongreen;

text-align:center;

}

Class Selector

Class selectors allowing a class of element to have a style. Basically it is used to specify a style for a group of elements. For example, all elements of class student will be center- aligned:

Student (text-align: center;)

ID Selector

ID selectors are assigned individually. Basically it is used for specifying single, unique elements. An ID selector is assigned by using the indicator 'V to precede a name. The following code snippet shows how to assigned ID selector:

#P1

{

text-align : center;

color : green;

}

Cascading Order

While using multiple style sheets you need to arrange these sheets in a well define order. The following characteristics will determine the outcome of CSS:

! important

A style that is designated as important will win out over contradictory styles of otherwise equal weight.

Selector Rules to Calculate Specificity

v Counting the number of HTML tag names in the selector.

v Counting the number of ID attributes in the selector.

v Counting the number of CLASS attributes in the selector.

Order of Specification

If two rules are the equal weight, the last specified rule wins.

CSS Grouping

CSS grouping allows you to minimize the code. For this you need to group selectors by separating each selector with comma. The following code snippet shows how to group selectors:

P1, P2, P3

{

Color: green;

}

Inserting a Style Sheet

CSS enables three ways to insert a style sheet:

v Inline style

v External style sheet

v Internal style sheet

Inline Style Sheet

Use this method carefully because it mixes the content with presentation. To use inline style you need to use the style attributes in the relevant tag. The following code snippet shows how to change the colour and right margins of given text:

<S1 style = "color: green; margin-right: 12px">India is the greatest country. </ S1>

External Style Sheet

An external CSS style sheet contains CSS style rules. These rules are applied to HTML element on Web pages. The external style sheet is used to change the look of entire website by changing one file if each page of website is linked with the style sheet using <link> tag.

The following code snippet shows how to add external style sheet using the <link> tag which goes inside the head section:

<head>

</head>

Internal Style Sheet

CSS allows using internal style sheet when a single document has a unique style. For this you need to define internal styles in the head section with the <style> tag. The following code snippet shows how to use internal style sheet:

<head>

body {background-color: green}

p {margin-left: 25px}

</style>

</head>

How to Use a CSS with an HTML Document?

The following steps are used to link a CSS stylesheet with an HTML document:

Step: 1. Create a style sheet and save it with file extension .css.

Step: 2. Create a HTML document using a text editor and save it with file extension .html.

Step: 3. Use the following code snippet to link both the files:

In the above given link element has three attributes, rel, type and href in which rel attribute specifies what is linking. In the above case a style sheet is going to be linking. The type attribute specify the type of files such as text and css files and href attribute specifies the path of the .css file.

A Practical Approach to Use of CSS Document

The following example is the use of the CSS to control the style and layout of a webpage. If a user writes the HTML codes and CSS codes using a text editor as shown below for style and layout of webpage, the webpage will appear as shown in the given picture of a webpage. The code of html and CSS are inserted in a text editor such as Notepad and Notepad file is saved on the desktop is named as Sample.html. The html document with linked css codes are automatically converted into webpage with available and supported webbrower. When we click on the file icon on the desktop, a webpage appears with the title "Sample" and webpage contains the information, as shown in the given picture. The back ground colour of the webpage will be black colour because the hexacode that was entered in the text editor for colour was #000000 that is the hexadecimal code for black colour.

10th Class Computers Science Working with CSS Working With CSS

Other Topics