TORRENT

www.mitechdesigns.co.za
dreamastech.com
www.exosource.com
handtocad.com
socalcozycats.com

CSS

fullform: cascading style sheets

Extention of cascading style sheets is .css

Purpose:

* Add new looks.

* Restyle a web site.

* Use the “style” on any web page.

Benefits of CSS

* We can change the appearance of entire document by adjusting a few rules

* Style sheets can be applied to multiple documents

* Pages and sites are easier to maintain

* Style sheets can address multiple user

* Documents download faster

There are three ways to include syles in documents.

* Inline styles

* Document-level or internal styles

* External Style sheets

Inline styles

# A style that is specified within the body of any html tag as an attribute of that tag

# The value of style attribute takes a semi-colon separated list of style rules.

Example

<html> <head> <title>Home Page</title> </head> <body> Welcome </body> </html>

Result

Welcome

Document-level or internal styles

# A collection of style rules enclosed in <style> tags in the header of the document.

Example

<html> <head> <title>Document</title> <style> p { font-size:1.2em; font-weight: 500; color: red; } </style> </head> <body> Welcome </body> </html>

Result

Welcome

External Style sheets

# Write codes in a seprate document and save as style.css called style sheet, after that link the style sheet to the html file inside the head tag.

Example

css code:

p {
    font-size:1.2em; 
    font-weight: 500; 
    color: red;
}

html code:

<html> <head> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> Welcome </body> </html>

Result

Welcome

#Now we learn css with Document-level or internal styles. We can write css codes and html codes seprately.

css selector: a string which defines the element the style rule is being applied to

selector {style declarations go here}
or
selector {property:value}
or
html tag {css property:value}

css class and id

class

#It is possible to give an html element multiple looks with css class.

#We can do different types of formats for a single html tag with the use of class.

Example#without class

Result

Welcome

# here all p tag have same properties, If we want to give diffrent properties to different p tag. Then, we will use class.

# class denoted with (.) dot.

Example#with class

<html> <head> <title>Document</title> <style> .first { font-size:1.2em; font-weight: 500; color: red; } .second { font-size:1.2em; font-weight: 500; color: green; } .third { font-size:1.2em; font-weight: 500; color: blue; } </style> </head> <body> Welcome Welcome Welcome Welcome </body> </html>

Result

Welcome

Example#with class

<html> <head> <title>Document</title> <style> p.first { font-size:1.2em; font-weight: 500; color: red; } p.second { font-size:1.2em; font-weight: 500; color: green; } p.third { font-size:1.2em; font-weight: 500; color: blue; } </style> </head> <body> Welcome Welcome Welcome Welcome </body> </html>

Result

Welcome

id

id : a unique identifier to an element.

id followed by a # (hash),

one id can use only one time in a document.

Example

<html> <head> <title>Document</title> <style> #para { font-size:1.2em; font-weight: 500; color: red; } </style> </head> <body> Welcome </body> </html>

Result

Welcome

css Background

Example

<html> <head> <title>Document</title> <style> h4 { background-color: red; } p { background-color: gray; } </style> </head> <body> <h4>Welcome</h4> Welcome </body> </html>

Result