CSS tutorial

CSSCascading Style Sheets Md. Shajed E Islam

What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External Style Sheets can save a lot of work External Style Sheets are stored in CSS files

Separate content from Fast loading pages Small file size Save time Save money Flexibility of design. Way of the future Print friendly

CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations:

CSS Example p{color:red;text-align:center;} P {color:red; text-align:center; } /*This is a comment*/

#para1{ text-align:center; color:red;} .center {text-align:center;}p.center {text-align:center;} Example id/class <p id=“center”></p> <p class=“center”></p> Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. Do NOT start a class name with a number! This is only supported in Internet Explorer.

Three Ways to Insert CSS External style sheet<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> Internal style sheet<head><style type="text/css">body {background-image:url("images/bg.gif");}</style></head> Inline Styles <p style="color:#000; margin-left:20px;">This is a paragraph.</p>

Margin Vs Padding - CSS Properties

Grouping and Nesting Selectors h1,h2,p{color:green;} .marked p{color:white;}

CSS Display and Visibility div.login {visibility:hidden;} div.login {display:none;} display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it. Visibility:hidden means the tag is not visible, but space is allocated for it.

CSS Image Opacity <imgsrc=“logo.jpg" width="150" height="113" alt=“bglobal"style="opacity:0.4;filter:alpha(opacity=40)" />

Pseudo-classes a:link {color:#FF0000;} /* unvisited link */a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */

CSS Navigation Bar <style type="text/css"> ul{ list-style-type:none; margin:0; padding:0; overflow:hidden;} li{ float:left;} a:link,a:visited{ display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#7A991A; } </style>

<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul>

Reference http://www.w3schools.com/css

CSS tutorial

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie CSS tutorial

Ähnlich wie CSS tutorial (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

CSS tutorial