How to write css
Before showing a web page on web browser,web browser checking css uses or not if use finding the css code,rendering it and lastly formatting the HTML element with existing style sheet code then show the web page.
There are three ways we can write the css code.
- Inline Style Sheet
- Internal Style Sheet
- External Style Sheet
 |
| css writing style |
Inline css
Inline style we can apply for unique HTML element.
for example, If in a html page there having three H1 tag now if you want to same style for every H1 tag then you have to write css code along with every H1 tag with a appropriate css attribute value.
On this time no need to selector.Write code along with HTML element.
On this time no need to selector.Write code along with HTML element.
Example
<h1 style="color:red;font-size:50px;">INline css Example</h1>
Disadvantage
- Write lots of code.
- Page rendering on browser slow.
- Farther css manipulation is complex and costly.
Internal Style Sheet
In internal style sheet code are write in same page but it separate the css code from HTML elements.
Internal style sheet define within <style> tag.
Here we can use selector,Using selector select HTML elements and give appropriate css attribute.
for example. If you have three H1 tag in a web page, and you want to give same color,same font-size to each one,then you select all H1 tag using element selector.
Example
h1{
color:red;
font-size:50px;
}
color:red;
font-size:50px;
}
It have several advantage over inline CSS.
- Write less code over the inline css.
- faster and easy to manipulate.
- Fast page enduring.
- Seperate css code from HTML elements.
External Style Sheet
To external style sheet, create a css file and write all css attributes on seperate css file and then attach this css file with html file using simple <link> tag and some <link> tag element on html file.
Link tah use into <head> tag.
Exampe
<link href="myscc-code.css" type="text/css" rel="stylesheet" />
In external style sheet, css code writing style same as internal css. Select HTML element only write appropriate css attribute value.
Only it separate a different file and attaching with html file.
It have several advantage
- write less amount of code( do less get more).
- Faster page rendering(web page browsing speed go high-If you use external css file then only first time css file comes in your browser and save it with in browser,farther next time if you requesting another one or more page then not come again css file only html file come and browser taking saved css and showing new web page.)
- Manipulation very easy.
- Code are very clean.
No comments:
Post a Comment