Designing Html Page - How to design HTML page - CSS design-Type of Cascading Style Sheet
CSS is a style sheet language used to design, color, margin, layout, align and format HTML tag. CSS is the language for describing the presentation of Web pages in different types of devices, such as large screens, small screens, or printers. There are three way to style in HTML page
1. Inline Styles.
The inline styles option available within individual HTML tag. The Style attribute also has many option to design tag when design page. This type of style normally used by new developer. for example.
<p style="font-family: 'Agency FB'; font-size: 14px; font-weight: bold; font-style: normal; color: #787373;
text-decoration: underline blink; padding: 2px;
margin-bottom: 4px">
But type of style normally we have to avoid. Let move another type reason behind that.
2. Internal Style
In this type of design we apply style within the style tag under head tag.
<head><style >
.ptag {
font-family: 'Agency FB';
font-size: 14px;
font-weight: bold;
font-style: normal;
color: #787373;
text-decoration: underline blink;
padding: 2px;
margin-bottom: 4px
}
</style>
</head>
<body>
<p CssClass ="ptag">
</body>
The .ptag is the id of style, we can apply this style multiple time to many other tag within the page. The style can apply using the CssClass attribute of html tag. This type of style is valid within the html page.
3. External Style
For this we create a separate file and save as .CSS extension. In this type we write style for entire website.
we can link to individual page as <link href="style.css" rel="stylesheet" type="text/css"> under the head tag.
for example open a notepad, write style as below and save file as style.css
<style >
.ptag {
font-family: 'Agency FB';
font-size: 14px;
font-weight: bold;
font-style: normal;
color: #787373;
text-decoration: underline blink;
padding: 2px;
margin-bottom: 4px
}
</style>
<p CssClass ="ptag">
.ptag {
font-family: 'Agency FB';
font-size: 14px;
font-weight: bold;
font-style: normal;
color: #787373;
text-decoration: underline blink;
padding: 2px;
margin-bottom: 4px
}
</style>
<p CssClass ="ptag">
The advantage of this external css, we can apply to multiple page and code minimization. Normally SEO suggest this External Css. The downloading is faster, easy to modify and change. The External CSS file will load separately, so loading time of individual page is faster. We can apply separate CSS to different device screen type.
Comments
Post a Comment