Pages

Sunday 19 May 2013

CSS STYLING TECHNIQUES

TECHNIQUES FOR CREATING STYLE SHEETS (MYSTYLE.CSS)


What is a style sheet?
We call CSS called Cascade Style Sheet is an important part of webpage, what will be the effect if we wear some dirty clothes and moves in front of public, the same effect will bring if we are not added style sheet to our webpage. It fixes the width, height, alignment , color, border, background etc of our webpage.as well texts, There are two types of style sheets external and internal style sheets.

Internal style sheets are written inside the webpage in between <head></head> or <body></body>. We can prepare an internal style sheet by using following code inside your HTML page.

   
   <style>

   #wrapper {
   width:970px;
   overflow:auto; 
   border: 1px solid #EAEAEA; 
   background-color: #F2F2F2;
   }
   .my-class
   font-family:Arial, Helvetica, sans-serif; 
   font-size:12px; color:#5E5E5E; 
   line-height:21px; 
   padding:5px;
   }
   </style>



External style sheets are written outside the webpage by creating a file called mystyle.css/or anything else with extension .css and calling it in the header part of webpage using following HTML code.
 
  <link href="http://youdomainname.ed/css/mystyle.css" 
  type="text/css" rel="stylesheet"/>
 

We can create an external style sheet as follows. Open Dreamweaver click File -> NEW and click on css, it will open an empty css file , there you can write the following code.
 
   
   #wrapper {
   width:970px;
   overflow:auto; 
   border: 1px solid #EAEAEA; 
   background-color: #F2F2F2;
   }
  .my-class
   font-family:Arial, Helvetica, sans-serif; 
   font-size:12px; color:#5E5E5E; 
   line-height:21px; 
   padding:5px;
   } 



An ID is created using putting # before the name.
A Class is created using putting . before the name.

FYI All webpages using external style sheet and call it in webpage using above code. Internal style sheets are written in certain circumstances only. 

We can call a ID or class in a tags <DIV> , <SPAN> , <P>, <TABLE> <BODY> and more. The important thing we should consider is we can use only one id wrapper one time in a webpage, but if we are defined it in class we can use class my-class  in different parts of webpage.

 Following refers true


For ID

<div id="wrapper1">True/different id are used in same page 
</div>
    
<div id="wrapper2">True/different id are used in same page  
</div>

For class 

<div class="my-class"> My Content </div> 
<div class ="my-class">My Content </div>


Following refers False

     
<div id="wrapper1"> 
Wrong content/same id used more than once in same page      
</div>
   
<div id ="wrapper1">
Wrong content/same id used more than once in same page 
</div>

There are  lot of properties available with style sheets commonly used and important properties are listed below.


background-color - set background color
background-image -set background image
background position - set starting position of background image
background-repeat - sets how a background image will be repeated.
border - set border  of layer - Eg - border : 1px solid  #EAEAEA;
border-(top,left,right) - setting border on left only Eg - border-left: 1px solid #EAEAEA
color-  color of fonts (letters or write ups)
display -it defines how an element is displayed .
float - float a layer
font-size - defines the size of font
font-family - defines which font family
font-style - specify the font-style ofa text
font-weight - defines the font weight, bold or not
height - defines height of a layer
letter spacing - defines spacing between letters
line height - this property refers the line-height of  text in a paragraph
list style - type of list item marker in a list
margin - margin refers how much margin we must keep between layers
margin-(top,bottom,left,right)
max -width - refers maximum width of  a layer
min-width - refers minimum width of layer
max-height - refers maximum height of layer.
min-height  - refers minimum height of a layer
overflow - overflow adjust the height of a layer according to the content
width - refers width of a layer
padding - padding property refers the spaces between element border and content.
padding-(left,right,top, bottom)
text-align - text-align refers alignment of a text
text-transform- text transform adjust and text into upper case ,lower case.


A class or ID  can be created with any of the above properties. Suppose we want to create a class with yellow background color, red foreground, with font-family Arial, we create as following


      
.myclass  { background-color :yellow;   color ; red;font-family : Arial, Helvetica, sans-serif;  width:200px;  height:200px;     }
  
Calling the class in layer by using following HTML code
<div class="myclass"> My Site </div> 
  



No comments:

Post a Comment