Conquer CSS Episode[3]:- CSS Inclusion, comments and units measurement in CSS

You are currently viewing Conquer CSS Episode[3]:- CSS Inclusion, comments and units measurement in CSS

CSS – Inclusion

There are four ways to associate styles with your HTML document. The most commonly used methods are inline CSS and External CSS.

Embedded CSS – The <style> Element

You can put your CSS rules into an 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 the elements available in the document. Here is the generic syntax −

<!DOCTYPE html>
<html>
   <head>
  	<style>
     	body {
        	background-color: linen;
     	}
     	h1 {
        	color: maroon;
        	margin-left: 40px;
     	}
  	</style>
   </head>  
   <body>
  	<h1>This is a heading</h1>
  	<p>This is a paragraph.</p>
   </body>
</html>

Inline CSS – The style Attribute

You can use the style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax −

<element style = “…style rules….”>

Attributes

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

Example

Following is the example of inline CSS based on the above syntax −

<html>
   <head>
   </head>
 
   <body>
  	<h1 style = "color:#36C;">
     	This is inline CSS
  	</h1>
   </body>
</html>

External CSS – The <link> Element

The <link> element can be used to include an external stylesheet file in your HTML document.

An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using the <link> element.

Here is the generic syntax of including external CSS file −

<head>

   <link type = “text/css” href = “…” media = “…” />

</head>

Attributes

Attributes associated with <style> 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 required.

Example

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

h1, h2, h3 {

   color: #36C;

   font-weight: normal;

   letter-spacing: .4em;

   margin-bottom: 1em;

   text-transform: lowercase;

}

Now you can include this file mystyle.css in any HTML document as follows −

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

Imported CSS – @import Rule

@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of the @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 style sheet file into HTML document −

<head>

   @import “mystyle.css”;

</head>

CSS Rules Overriding

We have discussed four ways to include style sheet rules in an HTML document. Here is the rule to override any Style Sheet Rule.

  • Any inline style sheet takes 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> tags will override rules defined in any external style sheet file.
  • Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.

Handling old Browsers

There are still many old browsers that do not support CSS. So, we should take care while writing our Embedded CSS in an HTML document. The following snippet shows how you can use comment tags to hide CSS from older browsers −

<style type = “text/css”>

   <!–

   body, td {

      color: blue;

   }

   –>

</style>

CSS Comments

Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment on any part of the style sheet. You can simply put your comments inside /*…..this is a comment in style sheet…..*/.

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

Example

<!DOCTYPE html>

<html>

   <head>

   <style>

      p {

         color: red;

         /* This is a single-line comment */

         text-align: center;

      }

      /* This is a multi-line comment */

   </style>

   </head>

   <body>

   <p>Hello World!</p>

   </body>

</html>

CSS – Measurement Units

Before we start the actual exercise, we would like to give a brief idea about the CSS Measurement Units. CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You need these values while specifying various measurements in your Style rules e.g. border = “1px solid red”.

We have listed out all the CSS Measurement Units along with proper Examples −

UnitDescriptionExample
%Defines a measurement as a percentage relative to another value, typically an enclosing element.p {font-size: 16pt; line-height: 125%;}
cmDefines a measurement in centimeters.div {margin-bottom: 2cm;}
emA relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each “em” unit would be 12pt; thus, 2em would be 24pt.p {letter-spacing: 7em;}
exThis value defines a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x.p {font-size: 24pt; line-height: 3ex;}
inDefines a measurement in inches.p {word-spacing: .15in;}
mmDefines a measurement in millimeters.p {word-spacing: 15mm;}
pcDefines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.p {font-size: 20pc;}
ptDefines a measurement in points. A point is defined as 1/72nd of an inch.body {font-size: 18pt;}
pxDefines a measurement in screen pixels.p {padding: 25px;}

Leave a Reply