Introduction
CSS refers to Cascading Style Sheets. It provides an advantage over normal HTML/XHTML that we use, here you can customize your basic tags according to your “style” and store them in separate files called “style sheets”. Then you can inherit these files into the document you are preparing and it will change the style of the document accordingly.
Now what makes it different from the normal HTML we use is that here we need to define the “style” only once, and the same can then be inherited anywhere in the page, whereas in HTML, to change a particular scheme of tags you need to make your way through the entire document to do so. Also, CSS provides more detailed attributes which can be used to change the look and feel of your pages.
Categorization
Style sheets can be of different types depending on the way they are defined.
- External style sheets
- Internal style sheets (in the head section on your html page)
- Inline style (inside a particular html element)
Now we can use one or all of these styles sheets in a particular HTML document depending on our choice and need. In the case of using multiple sheets, all styles will cascade into one another and the resulting style will be an amalgamation of all of them.
To store style sheets externally, we can do so by placing them in files with an extension (*.css).
Syntax
Here we show you a basic style sheet and how it can be used in various HTML pages. The basic syntax of CSS consists of three parts – a selector, a property and a value.
Selector { property : value}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can be assigned different values according to choice. The property and value are separated by a colon, and surrounded by curly braces. Various “property : value” sets are separated by semi colons.
For example,
p
{
text-align : left;
color : red;
font-family : calibri
}
Using different Style Sheets
Now as we have discussed above there are different types of style sheets we can use – external, internal and inline. The ways of using these styles differ as such;
External Sheets
We can inherit external sheets into HTML pages by using the <link> tag in the <head> section of the HTML document. These are most useful when the same style is to be given to multiple pages, and instead of defining it individually in every page, we can simple define it once outside as a .css file. The linking is done as,
<head> <link rel=”stylesheet” href=”demostyle.css” />
</head>
Here, “demostyle.css” is the external style sheet.
Internal Sheets
These are most useful when the same style is to be used at different places, but in the same html document. So instead of defining it at each place in the document, we define it once in the <head> tag,
<head>
<style>
p {margin-left : 20px; color : red}
body {background-image : url(“space.jpg”)}
</style>
</head>
Inline Style
To use inline style, the style is defined inside an HTML tag. This modifies the look and feel of only the particular tag it is defined for. In case, there are also some other styles defined for this tag by internal or external style sheets, the inline style overshadows the effect of all of these,
<p style=” color:red; margin-left:10px “>This is a paragraph.</p>
This concludes all about the basics of how to create and embed style sheets into plain HTML pages and use them effectively to make these pages more presentable and effective to the end user. Now with all the above discussion, the only reason not to use CSS in your design is not knowing how to!!
Popularity: 4% [?]
Related posts:
_03.gif)
_03.gif)
