Lets first see what is CSS. Cascading Style Sheets (CSS) is a stylesheet language used to describe the appearance of a document/page written in a HTML/XHTML.
How to use CSS code into your page?
There are two ways to do that
1. By including link tag in the .aspx/.html page. Ideally this should be specified inside <head></head> however you can place following code at any place of the page.
<link href="/default/MyClass.css" type="text/css" rel="stylesheet" />In this case you need to specify the css code into MyClass.css file that should be kept in your root/default folder.
2. By writing <style> tag in the .aspx/.html page. Ideally this code should also be written inside <head></head> tag, however you can write it at any place of the page.
<style type="text/css">How to specify comment in CSS
.myclass
{
/* write the code */
}
h1
{
/* write the code */
}
</style>
You can specify comment in CSS as you specify into C#, just write your comment in between /* (forward slash and star) and */ (start and forward slash).
Writing CSS Code
All code in the css are written in between opening braces ({) and closing braces (}) after specifying the name, the name of the CSS code is called CSS Class name. This is same as you write a function or method in the C#. In the above code snippet myclass is the name of the css class that can be applied to any html or xhtml element.
Note that in the above code snippet the first class is starting with . (dot), this specify that it is css class name and it can be applied to any html elements. Again notice that second class name is the name of the html heading element <h1> and it is not starting with the . (dot), this means that wherever <h1> tag will appear in the page this >css class will be applied
.
Common CSS Code
Below are some commonly used css code to achieve particular appearance.
To specify the border:
border-left:1px solid #C1DEF9; /* to specify the left side border */
border-top:1px solid #C1DEF9; /* to specify the top side border *
border-bottom:2px solid #C1DEF9; /* to specify the bottom side border */
border-right:0px solid #C1DEF9; /* to specify the right side border */
border-top:1px solid #566D91; /* to specify border of all side */
Here 1px is the width of border solid is the border style and #XXXXXX is the color code, you can specify valid color name too like Red, Green, Yellow etc.
To specify height and width
height:20px; /* height in pixel */
width:20px; /* width in pixel */
You can specify above attributes in either px (pixel), pt (point) or % (percentage).
To specify background and foreground color
background-color:#306C8F; /* background color or color code */
color:White; /* foreground color or color code */
To specify padding
padding-left:5px; /* left side padding */
padding-top:5px; /* top side padding */
padding-left:5px; /* left side padding */
padding-right:5px; /* right side padding */
padding:5px; /* padding of all side */
You can specify above attributes in either px (pixel), pt (point) or % (percentage).
To specify font specific appearance
font-family: Arial, Trebuchet MS, Tahoma, Verdana; /* specify font names separated by comma */
font-size: 10pt; /* specify font size either in pt (point) or px (pixel) */
font-style: normal; /* specify font style like italic or normal
font-weight:bold; /* specify font weight like bold or bolder of specify any number */
To specify margin
margin-left:0px; /* specify left margin */
margin-top:0px; /* specify right margin */
margin-bottom:5px; /* specify bottom margin */
margin-right:10px; /* specify right margin */
margin:5px; // specify margin from all side */
You can specify above attributes in either px (pixel), pt (point) or % (percentage).
To specfiy background image
background-image:url(/images/menuBack_m.gif); /* specify the path of the image */
background-repeat: repeat-x; /* To repeat this image horizontally in background */
background-repeat: repeat-y; /* To repeat this image vertically in background */
To specity alignment
text-align:center; /* align horizontally */
vertical-align:bottom; /* align vertically */
To float an element
position:absolute; /* to float an element at its position */
float: left; /* to float the element from its left */
To hide and show
display:none; /* hide the element */
display: /* show the element */
To specify for a particular element ID
Lets say you want to apply a particular appearnce for a html element whose id is "div1" like this <div id="div1">My text under this div </div>. Here the name of the class will be the id of the element and will start from # (Hash).
#div
{
font-color:red;
}
In this case all text color in between <div id="div1"> and </div> will be red.
To specify for a html element
An ideal CSS class for a particular html elements looks like this:
h6
{
font-size:11pt;
font-weight:bold;
color:#9900CC;
}
This class code will be applied to all text in between <h6> and </h6> in the page. In the same way you are write css style for for all html elements like table, div, a, tr, td etc. However, this is not usually suggested as it applies to all elements of the page..
How to Use
As described earlier, all these code must be placed inside opening and closing braces after specifying its name. An ideal CSS class that can be applied to an html element looks like this:
.TitleOfThePage
{
font-size:11pt;
font-weight:bold;
color:#9900CC;
}
To use above class you need to specify the html element class attribute like this. <div class="TitleOfThePage"> All text or html inside it </div>.
Hope this article will be useful for beginners as well s intermediate level developer, particularly those who doesn't work regularly with CSS stuffs.
Thanks for reading and happy coding !!!
by SheoNarayan
No comments:
Post a Comment