home

Css3 Introduction

Css (Cascading Style Sheets) developed by W3c(World Wide Web Consortium) and Hakon Wium Lie, Bert Bos intialy released in 1996 December 17. Css style sheet language format.

Why Css?

CSS is designed to align and modernize the complete website, like individual modules (header, logo, navigation, aside, content, footer and etc), including elements such as the layout, colors, and fonts. This can provide content controllability, accessibility and flexibility, Css can control multiple pages to share formatting, and reduce complexity and repetition in the structural content such as by allowing for tableless web design means div based layouts.

Where to write

In the beginning, everyone gets confusion where to write styles and which is most preferred and professional way, also in the internet each of one will give their own opinion, after this all this everyone is thinks, what is the exact way to writes css, There are only three ways to write (include) css for the html pages, here you follow those.

Inline Css

Easy to write css in inline sometimes, css required in html code in anywhere in the in the html page, to highlight certain text or to change color of the text to remove the border and more, like see the example below inline css code with html.

<div style="background-color:#F00; font-size:14px;">Inline Example Css</div>

Internal Css

The other one is Internal css, this is used write inside the head tag in the page, if it is less class (five six classes) better, this will effect only for the certain page itself, to follow this method for example check the below example code.

<div class="heading">Internal Css Example code</div>
//this should be inside document head
<head>
<style>.heading{
background-color:#ff0000;
font-size:14px;
}
</style>
</head>

External Css

This most common and useful method to write css , this method use to write large application (website), for this separate css file we need to create in that file what ever the controller to use control our website like aligning the theme or applying new font color every thing related to css things have to write external css file, still if you want more guidance you can check below external css code.

Html Code
  <div class="wrapper">
  <div class="header">
  <div class="content"></div> 
  </div> 
  <div class="footer"></div>
  </div> 
  //This file path should be in side the head tag//
  <link href="includes/css/style.css" type="text/css" rel="stylesheet" />
//External css file//
  Css Code
  body{
  margin:0px;
  }
  .wrapper{
  width:1024px;
  margin:auto;
  }
  .header{
  height:50px;
  background-color:gray;
  }
  .content{
  width:100%;
  margin:auto;
  text-align:center;
  }
  .footer{
  width:auto;
  margin:auto;
}