CSS Easy's Web Designing
Using CSS you will be able to put out pages with much less work, CSS pages loads much faster, and its easy to update and print!.
As an example, the following code segment defines the color and font-size properties for H1 and H2 elements:
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
What is Inheritance ?
When you nest one element inside another, the nested element will inherit the properties assigned to the containing element.
For example, a font declared in the body will be inherited by all text in the file, unless you declare another font for a specific nested element.
body {font-family: Verdana, serif;}
Now all text within the (X)HTML file will be set to Verdana.
If you wanted to style certain text with another font, like an h1 or a paragraph then you could do the following.
h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}
Now all <h1> tags within the file will be set to Georgia and all <p> tags are set to Tahoma, leaving text within other elements unchanged from the body declaration of Verdana.
There are instances where nested elements do not inherit the containing elements properties.
For example, if the body margin is set to 20 pixels, the other elements within the file will not inherit the body margin by default.
body {margin: 20px;}
Combining Selectors
You can combine elements within one selector in the following fashion.
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
As you can see in the above code, I have grouped all the header elements into one selector. Each one is separated by a comma. The final result of the above code sets all headers to green and to the specified font named Georgia.
Comment tags
Comments can be used for self help as well as to help others who may see your file, or to help you remember what you we’re thinking at a later date. You can add comments that will be ignored by browsers in the following manner.
/* This is a comment */
For Eg:
/*
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
*/
Defining a CLASS in CSS
You can define class just by adding " (.)classname "
For Eg:
.greenboldtext{
font-size: small;
color: #008080;
font-weight: bold;
}
In above example " .greenboldext " is the class name which can be used in html/xhtml number of times...
Defining a ID in CSS
You can define ID just by adding " (#)IDname "
For Eg:
.headtext{
font-size: small;
color: #008080;
font-weight: bold;
}
In above example " .headtext " is the IDname which can be used in html/xhtml only one time...
Note: The key thing to know is that IDs identify a specific element and therefore must be unique on the page – you can only use a specific ID once per document. Classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class.
|
