What is CSS?
CSS is knows as Cascading Style Sheet - This is an style sheet language used for describing the presentation of the document look and it is format and keep consistency all over the pages or documents. It is can be used any kind of language like HTML, XHTML, XML, SVG and XUL.CSS is having all properties like color, width, height and many more html attributes.
Simple Example: CSS make web presentation more advanced.
Actually to define a style to a test in a div, We were used
<div><font color="Red" size="12">Testing Content </font></div>if we need to use the same Red and 12px text again we have to write
<div><font color="Red" size="12">Testing Content </font></div>
But You can apply using CSS like this
Just define CSS Class by
<head>
<style>
.myfontStyle{font:#000 12px;}
</style>
</head>
<body>
<div class="myfontStyle">Testing - 1</div>
<div class="myfontStyle">Testing - 2</div>
</body>
Now let we see the ways to implement CSS in HTML. Actually, There are three ways to applying CSS to HTML1. In-Line
2. Internal
3. External
1. In-Line
Directly, It is applied inside HTML tag using attribute called 'Style="<CSS Style Properties separated by Semi column(;) >"'Example :
Directly write the property
<div style="font:#000 12px;height:15px;width:100px;">My test CSS inline</div>
2. Internal
Internal is more quicker and follow the consistency and easy apply to all objects to keep the same orientation.This can be embedded, define as class and integrated through object ID.
Embedded:
<head>
<style>
div{font:#000 12px;}
</style>
</head>
<body>
<div>Testing - 1</div>
<div>Testing - 2</div>
</body>
Limitation: All DIV tags will automatically fixed as defined color and size. So it will be good at some cases. So be careful when it is handled. but there are more advanced way to over come it.Anyway, if you are basic user or learner to know before fix embedded method.Define as CSS Class
<head>
<style>
.myfontStyle{font:#000 12px;}
</style>
</head>
<body>
<div class="myfontStyle">Testing - 1</div>
<div class="myfontStyle">Testing - 2</div>
</body>
Limitation: This class can be used inside a HTML page. If you want to use the same class in another document then you have to copy whole style and pasted again in <head> of the other page.No more limitation :-) - Actually This is smarter way to design a object. Because you can call this class from any objects[if object accept the properties].
Using Object ID
<head>
<style>
#myfontStyle{font:#000 12px;}
#div2{font:#000 16px;}
</style>
</head>
<body>
<div id="myfontStyle">Testing - 1</div>
<div id="div2">Testing - 2</div>
</body>
Limitation: Some case, we can define style using #ID of the object. But HTML object has unique ID. So you can use this way, when you need unique design for particular object.3. External
How you read and understand above explanation to define class internally in a document. External - will over come the limitation of internal.Actually now you are going to write css class in file which will be created using extension (.css) <cssfilename>.css
This file will be referred/includes all HTML pages to drive same classes allover the HTML files.
Example:
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
Useful Link:
To learn more about CSS properties : W3C School - CSS Properties Tutorial
No comments:
Post a Comment