Introduction-CSS
What is CSS?
by Sagar Awasthi on May.28, 2009, under DIV/CSS, Introduction-CSS
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.
