Friday, January 26, 2018

Css Inclusion


Hello dear readers! welcome back to another section of my tutorial on Css. In my last tutorial guide, i talked about the Css syntax with numerious examples. Now in this tutorial guide, we are going to be discussing  about the inclusion of Css to our various Html document i.e how Css is included to Html documents.

There are four ways to associate styles with your Html document. Most frequently used methods are inline and external Css. Now lets take a look at this four ways of associating styles with the Html documents one after the other.

Embedded CSS - The <style> Element

You can put your Css rules into a Html document using the <style> element. This tag is placed inside the <head>...</head> tags. Rules defined using this syntax will be applied to all elements available in the document. Below is the syntax:

RECOMMENDED: Css Syntax

<head>
     <style type="text/css"  media="...">
            Style Rules ............................
     </style>
</head

Attributes

Attributes associated with <style> element are:

AttributeValueDescription
typetext/cssSpecifies the style sheet language as a content-type (MIME type). This is required attribute.
media
screen
tty
tv
projection
handheld
print
braille
aural
all
Specifies the device the document will be displayed on. Default value is all. This is an optional attribute.
Following is a short example of embeded Css based on the above syntax:

<html>
     <head>
            <style  type="text/css"  media="all">
                  body  {         
                       background-color: #444444;
                  }
                  p   {
                       color: pink; 
                  }  
            </style>
     </head>

     <body>
            <p>
                  The background color of this document will be ash, and the color of   
                  this paragraph will be pink. 
            </p>
     </body>
</hrml>

Inline CSS - The Style Attribute

You can use style attribute of any Html element to define style rules. These rules will be applied to that element only. Here is the syntax below:

RECOMMENDED: Html Fonts

<html element   style=".....style rule.....">

Attributes


AttributeValueDescription
stylestyle rulesThe value of style attribute is a combination of style declarations separated by semicolon (;).

Example

Following is the example of inline Css based on the sytax given above:

<html>
     <head>
     </head>

     <body>
            <h4  style="color: pink;"> 
                  This is an inline css 
            </h4>
     </body>
</html>

External CSS - The <link> Element

The <link> element can be uused to include an external CSS file into your Html document.

An external Css is a seperate text file with .css extension. You define all the Style rules within this text file and then you can include this file into any Html document using <link> element.

Here is the syntax of including external Css file:

<head>
     <link  type="text/css"   href="...."   media="...." />
</head>

Attributes

Attributes associated with <link> elements are:

AttributeValueDescription
typetext cssSpecifies the style sheet language as a content-type (MIME type). This attribute is required.
hrefURLSpecifies the style sheet file having Style rules. This attribute is a required.
media
screen
tty
tv
projection
handheld
print
braille
aural
all
Specifies the device the document will be displayed on. Default value is all. This is optional attribute.

Example

Consider a simple style sheet file with a name style.css having the following rules:

h1,  h2,  h3   {         
          color: #000000;         
          font-weight: normal;         
          letter-spacing: 6em;         
          margin-top: 3em;         
          text=transform: uppercase;
}

Now you can then include this file style.css into any Html document as follows:

RECOMMENDED: Css Introduction

<head>
     < link  type="text/css"   href="style.css"   media="all" />   
</head>

Imported CSS - @import Rule

The @import rule is used to import an external stylesheet in a manner similar to the <link> element. Here is the syntax of @import rule.

<head>
     <@import   "URL";
</head>

Here URL is the URL of the style sheet file having style rules. You can use another syntax as well:

<head>
     <@import  url("URL");
</head>

Example

Following is the  example showing you how to import a syle sheet file into a Html document:

<head>
     @import  "style.css" ;
</head>

CSS Rules Overriding

We have discussed four ways to include style sheet rules in a HTML document. Below is the rule to override any Style Sheet Rule.
  • Any inline style sheet takes the highest priority. So it will override any rule defined in <style>....</style> tags or rules defined in any external style sheet file.
  • Any rule defined in <style>....</style> tag will override the rules defined in any external style sheet file.
  • Any rule defined in the external style sheet file takes the lowest priority, and the rules defined in this file will be applied only when the above two rules are not applicable.
RECOMMENDED: Scrollbar Css

Handling Old Browsers
There are still many old browsers that do not support Css. So let us be extremely careful while writing our Embedded Css in a Html document. The following example shows how to use comment tags to hide Css from older browsers:

<style  type="text/css">
     <!--

          body > td {        
                color: pink;
          }  
     -->
</style>

CSS Comments
You can use /* .....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.

Example

/* This is an external style sheet file */
       h1,  h2,  h3  {         
             color: #000000;         
             font-weight: normal;         
             letter-spacing: 6em;         
             margin-top: 3em;         
             text=transform: uppercase;
       }
/* end of style rules. */

Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be discussing about the CSS Measurement Units.

Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.