You can also define CSS styles for HTML elements with the id selector. The id selector is defined with #. It has a Unique effect in HTML Document, as it is defined uniquely for each HTML Tag/Element.

The CSS style rule defined below will go with the element that has an “id” attribute with a value of “mycolor”:

# mycolor {color:green}

The style rule below will compare the “li” element that has an id with a value of ” link1″:

li#link1
{
text-align:center;
color:red
}

Again Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

CSS Comments

Comments are used to distribute your code among the working tags and your comments. It may help you when you edit the source code at a later date to recognize the part of code from the content present in your comments. A comment is ignored by browsers. A CSS comments starts with “/*”, and ends with “*/”, like this:

/*This is a comment*/

With the “Class” selector you can define different styles for the same type of HTML element.
Let’s say that you’ld like to give two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align:right}
p.center {text-align:center}

You then just have to use the class attribute in your HTML document:

<p class=”right”>This paragraph will be right-aligned.</p>
<p class=”center”>This paragraph will be center-aligned.</p>

Note: If you want to apply more than one class per given element, the syntax is:

<p class=”center bold”>This is a paragraph.</p>

The paragraph above will be styled by the class “center” AND the class “bold”.

You can also omit the name of tag in the selector to define a general style that can be use by all HTML elements which will have a certain class. Below In the example, all those HTML elements with class=”center” will be center-aligned:

.center {text-align:center}

Below  code, we have two HTML element tags and both the “h4” element and the “p” element is using same class=”myclass”. This means that both elements will follow the same rules defined in the “.myclass ” selector:

<h4 class=” myclass “>This heading will be center-aligned</h4>
<p class=” myclass “>This paragraph will also be center-aligned.</p>

Remark Do NOT start a class name with a numeric/number, reason behind is that It won’t work in Mozilla/Firefox. You may add Styles to Elements with Particular Attributes. The style rule below is matching all input tag that have a type attribute with a value “text”:

input[type="text"] {background-color:blue}

You can make a group of various selectors. A comma will separate each selector. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color:green
}

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property:value}

The selector is the HTML element/tag which you wish to define, the property is the attribute or same HTML tag you wish to change, and each property will have a value. The property and value will be separated by a colon, and enclosed in curly braces:

body {color:black}

STORE IN SPECIAL PLACE OF MIND:

1. If the value is multiple words, put quotes around the value:
   p {font-family:”sans serif”}
   
2. If you want to define more than one property, then it must be separated with a semicolon. The example below illustrates how to define a underline decorated anchor tag, with a red text color:
   a {text-decoration:underline; color:red}

Just to make the style code more readable, you can describe one property on each line, like given below:

p
{
text-align:center;
color:black;
font-family:arial
}

CSS stands for Cascading Style Sheets, and used to define style for a HTML page i.e “how to display HTML elements”.  Formats and Styles are normally writen in Style Sheets. Inline Styles were added to HTML 4.0 to solve a formatting Issues but with the change of technology, External styles has outpay Inline styles. External Style Sheets saves a lot of work. External Style Sheets are stored in CSS files and saved with “*.css” extension. We have to include the external stylesheet in our document with the tag given below:

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

By Style I mean the format or layout of displyed content. Let’s take an example of a style change would be to make words bold. In normal HTML you would use the <b> tag like so:

<b>Text is bold</b>

This work is fine, and there’s nothing wrong in it, but now if you say let’s change all the text of same page that you initially made bold to Italics, you then will go to each spot in the page and make the changes in the tag.

Another complication found in this example could be: let’s say you want to make the above content bold, make the font style “Georgia” and color to “Blue”, you’ld need to wrap up the content with lots of code, like below:

<font color=”#FF0000″ face=”Georgia”><strong>This is text</strong></font>

This is long-winded and makes your HTML more messy. With CSS, you can create a custom style in different file and define all properties or attributes, gives it a unique name which could ‘tag’ your HTML to apply these stylistic properties:

<p class=”myNewStyle”>My CSS styled text</p>

And either in External Style or in between the <head></head> tags of your web page you would insert this CSS code that defines the style we just applied:

<style type=”text/css”>
.myNewStyle {
font-family: Georgia;
font-weight: bold;
color: #FF0000;
}
</style>

In the above example we embed the css code directly into the page and it is called Embedded Style Sheet. This is fine for smal projects or at the time when the styles you’re defining will be used in a one page. Most of the times when you will be applying your styles to many pages and it would be a trouble copy-paste your CSS code into each page.

By using External CSS, you will be able to put out pages with much less work and can reduce your code lines, it load much faster than older ones, and will be easy to update and print!

Needless to say, you will have an lead over the competition. Yea!!!, BTW, all this is 100% standards compliant and should work in almost all the browsers being used today.