CSS

  CSS Tutorial
CSS (Cascading Style Sheet) is a stylesheet language that help to the presentation in a stylish way of an HTML document. CSS is responsible for the look and feel of the webpage . CSS can be implemented in three ways
  1. Inline CSS
  2. Internal CSS
  3. External CSS
In Inline CSS the CSS is applied to the partical TAG where the styling is need where else in Internal CSS the the all styling is mend to be defined in the Head section . In External CSS a complete new page is defined with .css extension where all the necessary styling is done . This file say xyz.css is the external CSS file . This file need to linked with the webpage which required the styling . External CSS is the most Standard way of Styling and should be dominantly used . This tutorial will teach you CSS from basic to advanced
  CSS Syntax

A CSS have a selector and a declaration block: CSS selector
  • The selector tell , which HTML element we want to style.
  • The declaration block have one or more than one declarations separated by semicolons.
  • Each declaration have a 'property' with there respected 'value', separated by a colon.

eg.

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


Here 'p' is the element where we choose to change text color to red and its alignment to center.

The 'selector' may be a HTML element as 'p' , a id as #my_css and can be applied using class as .my_css . respectively

eg

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

#my_css{color:red;text-align:center;}

.my_css{color:red;text-align:center;}

External CSS


Index.html : 
// this is the main page 
<html>
      <head>
      <title> dophptalks </title>
      <link href="my_style.css" rel="stylesheet" type="text/css"></link>
      </head>
      <body>
      <p>the css till applied to dophptalks text using element selector </p>
      <div id="div_id" >the css till applied to dophptalks text using Id selector </div>
      <div class="div_class" >the css till applied to dophptalks text using Class selector </div>
      </body>
</html>

my_style.css : 
// this is the style sheet 
p{
color:orange;
text-align:center;
}
#div_id{
color:white;
text-align:center;
}
.div_class{
color:green;
text-align:center;
}

No comments:

Post a Comment

Subscribe to: Comments (Atom)