CSS

CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files

Syntax & Example

The CSS syntax is made up of three parts: a selector, a property and a value

Eg:

selector {property:value}
body {color:black} p {font-family:"sans serif"} p {text-align:center;color:red} p { text-align:center; color:black; font-family:arial }

 Grouping:
h1,h2,h3,h4,h5,h6 { color:green }

class Selector:
p.right {text-align:right} p.center {text-align:center} (or) .center {text-align:center} <p class="right">This is right-aligned.</p> <p class="center">This is center-aligned.</p> #green {color:green}

HTML Document: id Selector:

p#para1{ text-align:center; color:red }

CSS Comments:
/*This is a comment*/ p{ text-align:center; /*This is another comment*/ color:black; font-family:arial }

Types of CSS
External style sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, we can change the look of an entire Web site by changing one file.

Internal style sheet

An internal style sheet should be used when a single document has a unique style. We define internal styles in the head section of an HTML page, by using the <style> tag

Inline style
To use inline styles we use the style attribute in the relevant tag.

Cascading order
Browser default Last priority External style sheet Third priority Inline style (inside an HTML element) Second priority Internal style sheet (in the head section) Highest priority

CSS Background
body {background-color:#b0c4de} body {backgroundimage:url(xxxx.gif')}
body { background-image:url(xxxx.gif'); background-attachment:fixed; background-repeat:repeat-x; background-repeat:no-repeat; background-position:top right; }

body {background:#ffffff url(xxxx.gif') no-repeat top right}

Property
background

Description
Sets all the background properties in one declaration

Values
background-color background-image background-repeat backgroundattachment background-position Inherit scroll fixed inherit color-rgb,color-hex,color-name transparent,inherit url(URL), none, inherit top left,top center,top right, center left,center center,center right bottom left,bottom center bottom right,x% y%,xpos ypos,inherit

backgroundattachment

Sets whether a background image is fixed or scrolls with the rest of the page Sets the background color of an element Sets the background image for an element Sets the starting position of a background image

background-color

background-image backgroundposition

background-repeat

Sets if/how a background image will be repeated

Repeat,repeat-x,repeat-y,no-repeat inherit

CSS Text

CSS Font
Font Families:
Generic family
Serif

Font family
Times New Roman Georgia Arial Verdana Courier New Lucida Console

Description
Serif fonts have small lines at the ends on some characters "Sans" means without these fonts do not have the lines at the ends of characters All monospace characters has the same width

Sans-serif

Monospace

p{font-family:"Times New Roman",Georgia,Serif}

Font Style & Size:

p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique} h2 {font-size:30px}

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of:
Margins borders padding content

The box model allows us to place a border around elements and space elements in relation to other elements.

The above picture shows the box model. Margin - Clears an area around the border. The margin does not have a background color, and it is completely transparent Border - A border that lies around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear

CSS Border /Outline

border-style:value; border-width:value; border-color:value; BORDER-STYLE values:
none dotted dashed solid double grove ridge inset outset

Note: The border-style property can have from one to four values.

<html> <head> <style type="text/css"> p.one{ border-style:solid; border-color:#0000ff; } p.two{ border-style:dotted; border-color:#ff0000 #0000ff; } p.three{ border-style:ridge; border-color:#ff0000 #00ff00 #0000ff; } p.four{ border-style:inset; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); } </style> </head> <body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p> <p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html>

CSS Padding
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;

CSS List
list-style-position:inside list-style-position:outside

CSS Tables
Property
border-collapse

Description
Specifies whether or not table borders should be collapsed Specifies the distance between the borders of adjacent cells Specifies the placement of a table caption Specifies whether or not to display borders and background on empty cells in a table Sets the layout algorithm to be used for a table

Values
collapse separate inherit length length inherit top bottom inherit show hide inherit auto fixed inherit

border-spacing

caption-side

empty-cells

table-layout