Need for CSS
In the early days of the World Wide Web(WWW), web pages were created using only HTML. Hence HTML used to have different tags for both structuring and presenting content. Elements like font were used to change the <font> properties and <center> was used to change the text alignment to center. As the Internet developed, the people who were in charge of improving HTML, the W3 consortium, noticed that this system was not efficient. If one wanted to change the heading size in all their web pages, then they would have to manually change it in all the places manually. If there were hundreds of pages, they had to be changed by hand individually. So in order to make the process of changing web pages easier, a new presentational language CSS was born.
The structure would be provided by HTML and the presentation will be described by CSS. Using CSS means that we are able to make changes that would affect the whole website by making a single change in the CSS. Most of the presentational elements in HTML were deprecated and the language as a whole became easier to learn. CSS offers more flexibility that HTML needed. Nowadays HTML and CSS go hand in hand when making websites.
Style attribute
HTML has a style attribute which can be used for setting formatting options for HTML elements. The style attribute accepts a value which can have one or more pairs of CSS properties and values. Each pair is separated by a semicolon(;) character. The property is separated from the value by a colon(:).
The general format for a single pair of property and value is:
<tagname style="property:value">Content Here.</tagname>
For multiple pairs the format is:
<tagname style="property-1:value-1;property-2:value-2">Content Here.</tagname>
Common CSS properties
- color
- This property is used for changing the text color in the element.
- background-color
- This property is used for changing the background color of the element.
- font-family
- This property is used for changing the font for the text in the element.
- font-size
- This property is used for changing the font size of the text in the element.
- text-align
- This property is used for changing the alignment of the text.
Example web page
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Style Attribute</title> </head> <body> <h1 style="font-size:200%">This is a really big heading.</h1> <p style="color:white;background-color:green">This is a white para with a green background.</p> <p style="font-family:arial">A paragraph with a different font.</p> <p style="text-align:center">This paragraph is centered.</p> </body> </html>