Skip to main content

How to design HTML page

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">
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