CSS SelectorsThe element Selectorp { text-align: center; color: red;}The id Selector#para1 { text-align: center; color: red;}An id should be unique within a page, so the id selector is used if you want to select a single, unique element.To select an element with a specific id, write a hash character, followed by the id of the element.

The class Selector.center { text-align: center; color: red;}To select elements with a specific class, write a period character, followed by the name of the class.Grouping Selectorsh1 { text-align: center; color: red;}

h2 { text-align: center; color: red;}

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

Three Ways to Insert CSS External style sheet Internal style sheet Inline styleExternal Style Sheet

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. An example of a style sheet file called "myStyle.css"body { background-color: lightblue;}

h1 { color: navy; margin-left: 20px;}Internal Style Sheet

body { background-color: linen;}

h1 { color: maroon; margin-left: 40px;}

Inline StylesThis is a heading.

CSS Background background-color background-image background-repeat background-attachment background-position background-size:cover;Text Alignmenth1 { text-align: center;}

p.date { text-align: right;}

p.main { text-align: justify;}Text Decorationa { text-decoration: none;}h1 { text-decoration: overline;}

h2 { text-decoration: line-through;}

h3 { text-decoration: underline;}

Text Transformationp.uppercase { text-transform: uppercase;}

p.lowercase { text-transform: lowercase;}

p.capitalize { text-transform: capitalize;}p { text-indent: 50px;}div { direction: rtl;}http://www.w3schools.com/cssref/playit.asp?filename=playcss_direction&preval=initialCSS display Propertyp.inline { display: inline;}

CSS TextText Color a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red"Text Alignmenth1 { text-align: center;}

p.date { text-align: right;}

p.main { text-align: justify;}

Font Familyp { font-family: "Times New Roman", Times, serif;}Font Stylep.normal { font-style: normal;}

p.italic { font-style: italic;}

p.oblique { font-style: oblique;}Font Sizeh1 { font-size: 40px;}

h2 { font-size: 30px;}

p { font-size: 14px;}

Styling Links

a { color: #FF0000;}/* unvisited link */a:link { color: #FF0000;}

/* visited link */a:visited { color: #00FF00;}

/* mouse over link */a:hover { color: #FF00FF;}

/* selected link */a:active { color: #0000FF;}Text Decoration

a:link { text-decoration: none;}

a:visited { text-decoration: none;}

a:hover { text-decoration:none;}

a:active { text-decoration:none;}Background Color

a:link { background-color: #B2FF99;}

a:visited { background-color: #FFFF85;}

a:hover { background-color: #FF704D;}

a:active { background-color: #FF704D;}

Listul.a { list-style-type: circle;}

ul.b { list-style-type: square;}

ol.c { list-style-type: upper-roman;}

ol.d { list-style-type: lower-alpha;}An Image as The List Item Marker

ul { list-style-image: url('sqpurple.gif');}Crossbrowser Solution

ul { list-style-type: none; padding: 0px; margin: 0px;}

ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px center; padding-left: 15px; }List - Shorthand propertyul { list-style: square inside url("sqpurple.gif");}Table Borderstable, th, td {border: 1px solid black;}Collapse Borderstable { border-collapse: collapse;}

table, th, td { border: 1px solid black;}Table Width and Heighttable { width: 100%;}

Horizontal Text Alignment

th { height: 50px;}th { text-align: left;}Vertical Text Alignment

td { height: 50px; vertical-align: bottom;}Table Paddingtd { padding: 15px;}Table Color

table, td, th { border: 1px solid green;}

th { background-color: green; color: white;}The CSS Box Model

CSS BorderBorder Widthp.one { border-style: solid; border-width: 5px;}

p.two { border-style: solid; border-width: medium;}Border Colorp.one { border-style: solid; border-color: red;}

p.two { border-style: solid; border-color: #98bf21;}Border - Individual sides

p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid;}

Margin - Individual sidesp { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px;}Margin - Shorthand propertyp { margin: 100px 50px;}

All CSS Dimension Properties

Block-level Elements

Display: none;li { display: inline;}span { display: block;}

The position PropertyHTML elements are positioned static by default.Static positioned elements are not affected by the top, bottom, left, and right properties.An element with position: static; is not positioned in any special way;position: relative;

position: fixed;

div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #8AC007;}

position: absolute;

Overlapping Elementsz-index:+ve -veThe clear PropertyThe clear property is used to control the behavior of floating elements.Elements after a floating element will flow around it. To avoid this, use the clear property.

Center Align - Using margin

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Use margin: auto;, to horizontally center an element within its container.CSS Navigation Bar

Home

News

Contact

About

ul { list-style-type: none; margin: 0; padding: 0;}a { display: block; width: 60px;}li { display: inline;}

li { float: left;}

a { display: block; width: 60px;}li { display: inline;}CSS Image Gallery

http://www.w3schools.com/css/tryit.asp?filename=trycss_image_galleryExample 1 - Creating a Transparent Image

img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */}Example 2 - Image Transparency - Hover Effect

img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */}

img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */}

Image Sprites - Create a Navigation Listhttp://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_navThe @media Rule

@media screen { p { font-family: verdana, sans-serif; font-size: 17px; }}

@media print { p { font-family: georgia, serif; font-size: 14px; color: blue; }}