Monday, December 25, 2017

Html Stylesheet (Html)

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, tho 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 (;).

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</style></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.

            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.

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.

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.


Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration, Html Basic Tags, Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase TagsHtml-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion) , Html List , Html Text Links , Html Image LinksHtml Frames , Html Iframes , Html Blocks , Html Backgrounds , Html Fonts , How to create Html Forms (Web Design Tutorial)How to Embed Multimedia into a Html web page(web design) , Html Marquees (Web design) , Html Header (Html tutorail)
  
Share:

0 comments:

Post a Comment