Saturday, 15 March 2014

CSS INTRODUCTION



What is 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

CSS Syntax

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

         SELECTOR         Declaration         Declaration
              H1                { Color:blue;    font-size:12px; }
 
·         The selector is normally the HTML element you want to style.
·         Each declaration consists of a property and a value.
·         A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:

Example 1:

<HTML>


<Head>


<Style>


Body


{


Background-color: yellow;


}


h1


{


Font-size: 36pt;


}


h2


{


Color: blue;


}


P


{


Margin-left: 50px;


}


</style>


</head>


<Body>


<h1>this header is 36 pt</h1>


<h2>this header is blue</h2>


<p>this paragraph has a left margin of 50 pixels</p>


</body>


</HTML>


 


Example 2:


 <HTML>


<Head>


<Style>


Body


{


Background-color: tan;


}


h1 {color: maroon; font-size: 20pt ;}


Hr {color: navy ;}


P {font-size: 11pt; margin-left: 15px ;}


A: link {color: green ;}


A: visited {color: yellow ;}


A: hover   {color: black ;}


A: active {color: blue ;}


</style>


</head>


 <Body>


 <h1>this is a header 1</h1>


<Hr>


 <p>you can see that the style


Sheet formats the text</p>


 <p><a href="http://www.w3schools.com"


Target="_blank">this is a link</a></p>


 </body>


</HTML>

No comments: