fbpx
April 6, 2020
css incsluion
CSS

CSS Inclusion | Learn How to Include CSS Styles in Your Web Document

In this tutorial you will be learning about CSS inclusion. In our previous tutorial we discussed about CSS syntax and if you haven’t gone through the tutorial you can do so using the link below.

Read previous tutorial on:  Introduction To The Basic CSS Syntax

CSS Inclusion

There are four ways you can include your CSS styles in your HTML web document and they include:

  • Embedded CSS Styling
  • Inline CSS Styling
  • External CSS Styling
  • Imported CSS Styling

Embedded CSS Styling Inclusion

This method of CSS styling involves embedding the CSS styles at the head section <head> of the HTML web document. This styles can be embedded using the <style> HTML tags. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      body, h1, h2, h3, table {
         background-color: red;
         font-size: 12rem;
         font-weight: 400;
         font-family: Arial, Helvetica, sans-serif;
         position: relative;
      }


   </style>
   
   <title>Illustration of Embedded CSS styling</title>
</head>
<body>
   

</body>
</html>

Embedded CSS styling Attributes

These are some of the attributes used in embedded CSS styling

ATTRIBUTE VALUE DESCRIPTION
type text/css This specifies the style sheet as content-type
media Screen
Tyy
Tv
Projection Handheld
Print Braille Aural
all
This attribute is optional but its used to specify the kind of device the document will be displayed on. The default value for this attribute is “all”

Inline CSS Styling

The inline CSS styling involves having the styles applied on the element on the same line. The syntax used for this is shown below

<element style="the style rules">

Inline Styling Attributes

Here is the list of styling attributes used for inline styling

Attribute value Description
style Style rules This is used for setting up proper style rules for the web document

Example of inline styling is shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>inline styling illustration</title>
</head>
<body>
   
   <p style="color: crimson;">this is the paragraph section showing inline styling</p>

</body>
</html>

Result

inline styling illustration

this is the paragraph section showing inline styling

External CSS Styling Inclusion

External CSS styling involves structuring the styles in a CSS file and then linking it to the HTMl web document using the <link> tag. Recall that a CSS document ends with the file extension “.css”. Example of external styling is shown below

we can have a CSS structured file as shown below

body{
      background-color: crimson;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 400;
      font-style: italic;
   }

   .footer{
      background-color: darkblue;
      font-size: 12em;
      color: whitesmoke;
   }

Then we link it to the HTML document as shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <link href="develoferd/webdesign/stylesheet.css" type="text/css" name="stylesheet"       >
   
   <title>external styling illustration</title>
</head>
<body>
   
   <p style="color: crimson;">this is the paragraph section showing external styling</p>

</body>
</html>

External Styling Attributes

This is the list of HTML attributes used for external styling

Attribute value Description 
type text/css This specifies the cascading style sheet language as a content type
href Link This specifies the link to the stylesheet file  or document
media screen
tty
tv
projection
handheld
print
braille
aural
all  
This is sued to specify the device the document will be displayed on.

Importing CSS using the @import rule

we can import an external CSS in a slightly similar way we did for the external CSS linking using <link> tag using the syntax below

<head>
<@import "file url";
</head>

Example shown below

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

How to override CSS rules

we can override CSS rules if we understand how and where to override them from. Below are some of the rules you need to understand when overriding CSS rules

  • Inline styling takes higher priority than the embedded and external styling rules
  • Embedded styling takes higher priority than the external styling rules
  • External styling takes the least priority and any inline or embedded styling will be considered first before the external styling.

How to handle old browsers

To handle old browsers that do not support the CSS style sheet, we can make use of the comments tags to hide CSS styles from the old browsers. Example shown below

<style   type="text/css">
 <!--
  body {
     color: teal;
  }
 -->
</style >

Adding CSS comments

Sometimes developers intend adding comments to CSS files for reference or other important purpose. This can be achieved by placing the comments between the /**/. Example shown below

body {
     color: teal;
     /*this is the text color section*/
  }

Conclusion

Now you are done with the CSS INCLUSION lets move on to CSS MEASUREMENT UNITS .

Leave a Reply

Your email address will not be published. Required fields are marked *