CSS Introduction
We can do the following using CSS:
- Add color to text
- Alter font, size etc. of the content
- Can handle more than one web page at a time
- Can add animations
CSS Demo
To add style to your document, you can use the < style > element. You can define your element specification using the < style > element. This has been done in the following example:
EXAMPLE
Consider the following example:
< ! DOCTYPE html >
<html >
< head >
< meta charset = “UTF-8” >
< script > document.createElement (“myFirstElement”) </ script >
< style >
myFirstElement {
display : block ;
background-color : #FF0000 ;
padding : 40px ;
font-size : 20 px ;
}
</ style >
</ head >
< body >
Body of the document
< myFirstElement > Used MY First Element < /myFirstElement >
</ body >
</ html >
This will generate the following result:
In the above example, the < style > element defines the element’s background color and the pixels, padding and its font sixe, etc. In the body of the HTML document, we used our newly created element. You can see the result as the newly created element’s background was set red, it appears red. And the contents of the element are displayed on the browser.
Why Use CSS?
The CSS language is used to add more features or to describe the style of the HTML document. It is used to make the website more attractive and presentable. Using CSS we can add color to text, alter font, size etc. of the content, can handle more than one web page at a time and can also add animations.
CSS solved a big Problem
In the simple HTML document, we cannot do formatting that is there were no elements for formatting the web page. The simple HTML document only defines the contents of the web page that is it defines the headings or paragraphs of the web page only.
In the previous version of HTML there were different tags for example a separate tag to set the font, to set color there was a separate tag and so on. This made web developing very difficult as the coding became too long.
To overcome this W3C introduced CSS.
CSS saves a lot of work
We can handle multiple web pages at a time using CSS, this saves a lot of time. The style definitions are saved in the files with extension .css. This stylesheet file can be used to change the look of the website.
