Common CSS code to change html elements look and feel

SheoNarayan
Posted by in CSS 3 category on for Intermediate level | Views : 12958 red flag

This article describe how to write common css code to change the look and feel of html elements.
Introduction

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">

.myclass

{

/* write the code */

}

h1

{

/* write the code */

}

</style>

How to specify comment in CSS

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 !!!

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Raja on: 8/31/2008
Nice article Sheo. Keep it up!!!

Login to post response

Comment using Facebook(Author doesn't get notification)