Monday, December 25, 2017

Html Stylesheet

Hello guys evening and welcome to this section of my tutorial, i also wanna use this medium to wish you all a happy xmas. In my last tutorial i talked about HTML header and all the tags that can be found in a HTML header and how to use them, now in this tutorial am gonna talk a little bit about Style Sheet, though Cascading Style Sheets (CSS) will be thought in details in another part of my tutorial once the tutorial on HTML is rounded up. For now let me introduce Cascading Style Sheets (CSS) to you guys so you can have an idea about it.



Cascading Style Sheets (CSS) describes how documents are presented on screen, in print, or perhaps how they are pronounced.

Cascading Style Sheets (CSS) provides easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of styles properties for a given HTML element. Each property has a name and a value, seperated by a colon (;).

You can also read: Grouping Content

Example 
First let's consider an example of a HTML document which makes use of <font> tag and associated attributes to specify text color and font size.

<!DOCTYPE  html>
<html>

     <head>
            <title> HTML CSS </title>
     </head>

     <body>
            <p><font  color="orange"  size="10">First CSS Page</font></p>    
     </body>
</html>

Now we can re-write the above example with the help of Style Sheet as follows:

<!DOCTYPE  html>
<html>

     <head>
            <title> HTML CSS </title>
     </head>

     <body>
            <p  style="color: orange;  font-size: 15px;" >First CSS Page</p>    
     </body>
</html>

You can try the above code out using your text editor to see the result for your self.

CSS can be used in three different ways in your HTML document:

External Style Sheet: Define style sheet rules in a seperate .css file and then include that file in your HTML document using HTML <link> tag.

You can also read: Html Formating

Internal Style Sheet: Define style sheet rules in the header section of the HTML document using <style> tag.

Inline Style Sheet: Define style sheet rules directly along with the HTML tags using Style attribute.

Now lets quickly look at these three ways with brief example for each of them.



External Style Sheet
If you need to use your style sheet to various pages, then its always recommended to define a common style sheet in a seperate file. A .cascading style sheet file will have extension as .css and it will be included in the HTML file using the <link> tag.

Example
In the below example we defined a style sheet file which we named style.css which has the following rules:

.menu   {
     color: blue;
}
.nav   {        
     font-size: 40px;
}
.side-bar   {          
     color: brown;
}

So this CSS rules we defined will be applicable to three different classes defined for the HTML tags. I suggest you don't crack your brains about how these rules are being defined because you will learn them while studying CSS. Now lets make use of the above external CSS file in our following HTML documents:

<!DOCTYPE  html>
<html>

     <head>
            <title> HTML External CSS </title>
            <link  rel="stylesheet"  type="text/css"  href="/html/style.css" >     
     </head>

     <body>
            <p  class="menu">This is blue</p>
            <p  class="nav">This is thick</p>
            <p  class="side-bar">This is brown</p> 
     </body>
</html>



Internal Style Sheet
If you want to apply Style Sheet rules to a single document only, then you can include those rules in the header section of the HTML document using the <style> tag. 
Take note that rules defined in the internal style sheet overrides the rules defined in the external CSS file.

You can also read: How to create Html Forms

Example

<!DOCTYPE  html>
<html>
     
     <head>
            <title> HTML Internal CSS </title>

            <style  type="text/css">
                  .menu   {         
                       color: blue;
                  }
                  .nav   {        
                       font-size: 40px;
                  }
                  .side-bar   {          
                       color: brown;
                  }
            </style>
     </head>

     <body>
            <p  class="menu">This is blue</p>
            <p  class="nav">This is thick</p>
            <p  class="side-bar">This is brown</p> 
     </body>
</html>

You can try the above codes out using your text editor to see the results for your selfs, and feel free to drop your questions in the comment box below.



Inline Style Sheet 
You can apply style sheet rules directly to any HTML tag using the style attribute of the relevant tag. This should done only when you are interested to make a particular change in any HTMl element only.

Note:Rules defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined in the <style> element.

You can also read: Html Blocks

Example

<!DOCTYPE  html>
<html>

     <head>
            <title> HTML Inline CSS </title>
     </head>

     <body>
            <p  style="color: blue;">This is blue</p>
            <p  style="font-size: 40px;">This is thick</p>
            <p  style="color:brown;">This is brown</p> 
     </body>
</html>

Alright guys that's it about HTML Style Sheet, will talk about it in depth when i enter my Cascading Style Sheet (CSS) proper. Don't forget to subscribe to our email list, bye for now.
Share:

0 comments:

Post a Comment