In this tutorial you will learn about the CSS Introduction and its application with practical example.
What is CSS?
When it comes to styling a web page, this whole responsibility is care taken by the CSS. CSS gives web designers and developers full control over the look and feel and the layout of the web pages.CSS stands for Cascading Style Sheets, first invented in year 1997 and supported by all the browsers .
CSS is a powerful tool that gives you a way of formatting your page layout, text, fonts, images, and almost anything you put on the web page. A centralized css file can control the look and feel of the overall website and can save you a lot of time and work in the future.
HTML is used more for to define the structure of content while CSS is used for formatting structured content.
One of the basic example of styles applied to HTML is the color and size of text.In standard HTML when you want to create a word bold with red color like this:
|
1 |
<font color="#FF0000"><b>a bold statement</b></font> |
This works fine, and there is nothing wrong with it , except when you wanted to say change all your text that you initially made bold to underlined, you would have to go to every spot in the page and change the tag.
Another disadvantage can be found in this example: say you wanted to make the above text bold, make the font style Verdana and change its color to red, you would need a lot of code wrapped around the text:
|
1 2 |
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"> <strong>This is text</strong></font> |
This makes your HTML code messy but with the help of CSS, you can create a custom style elsewhere and set all its properties, give it a name and then you can apply this properties using this named styling or css to the HTML entity.
Advantages of CSS
- Control layout of over all website from one single style sheet.
- CSS saves time
- Pages load faster
- Easy maintenance
