3.2. Types of CSS Styles

It is possible to link CSS with your HTML pages in two different ways: internal style,  and external style. Internal CSS can be either inline or embedded.

Creating an Inline Style

You can apply styles to a single element using the  style  attribute  in the element itself. Inline styles have the structure:


<tag style=”property: value”>


<h1 style=”color: red”>Introduction</h1>

Creating an embedded Styles

In the embedded method, we simply place the CSS code within the <head></head> tags of each HTML file you want to style with the CSS. The  CSS is  put inside  the  <style>  tag.  The  format  for  this is shown in the example below:

<style type=”text/css”>
CSS Content Goes Here

With this method, each HTML file contains the CSS code needed to style the page. This means any changes  you want  to make  to one page,  will  have  to be made to all.  This  method  can be good if you need to style only one page, or if you want different pages to have varying styles.

Creating an External Style Sheet

An external style sheet is a separate, text-only document that contains a number of style rules. An external CSS file contains no HTML, only CSS. You have to save the CSS file with the .css file extension.  You can link  the  external  file  by placing  one of the  following  links  in  the  head section of every HTML file you want to style with the CSS file.

<link rel=”stylesheet” type=”text/css” href=”filename.css”/>


An element that is directly contained  within  another  element  (with  no  intervening  hierarchica l levels), is  said  to  be the  child  of that  element.  Conversely,  the  containing  element  is  the  parent. For example, the em element is the child of the p element, and the p element is its parent.

All of the elements higher than a particular element in the hierarchy are its ancestors. Two elements  with the same parent are siblings.

When you write a font-related style rule using the p element as a selector, the rule applies to all of the paragraphs in the document as well  as the  inline  text  elements  they contain.  Certain  properties are inherited. It is important to note that some style sheet properties inherit and others  do not.  In general, properties related to the styling of text — font size, color, style, etc. are passed down. Properties such as borders, margins, backgrounds, and so on that effect the boxed area around the element tend not to be passed down. This makes sense  when  you  think  about  it.  For example,  if  you put a border around a paragraph, you wouldn’t  want  a border  around  every  inline  element (such as em, strong, or a) it contains as well.

You can use inheritance to your advantage when writing style sheets.  For example,  if  you want  all text elements to be rendered in the Verdana font face, you could write separate style rules for every element in the document and set the font-face to Verdana. A better way would be to write a single style rule that applies the font-face property to the body element and let all the text elements contained in the body inherit that style.

Any property applied to a specific element will override the inherited values for that property. Example: All texts in the following page is displayed as red because of inheritance

<head> <title> CSS </title>
<style type=”text/css”>
body { color: red;}
<h2> Well Known Novels </h2> <p> Romeo and Juliet </p> <p> Things Fall Apart</p> <p>Kingdom of God is Among You</p>

Conflicting Styles: the Cascade

Ever wonder why they are cal ed “cascading” style sheets? CSS al ows you to apply several style sheets to the same document, which means there are bound to be conflicts. For example, what

should the browser  do if  a document’s  imported  style  sheet  says  that  h1 elements  should  be red, but its embedded style sheet has a rule that makes h1s purple?

The folks who wrote the  style  sheet  specification  anticipated  this  problem  and  devised  a hierarchical system that assigns different weights to the various sources of style information. The cascade refers to what happens when several sources of style information for control  of  the  elements on a page: style information is  passed down  until  it  is  overridden  by a style  command  with more weight.

As we have learned, there are three ways to attach style information  to the  source  document,  and  they have a cascading order as well. Generally speaking,  the closer  the style  sheet is to the content,  the more weight it is given. Embedded style sheets that appear right in the document in the style element have more weight  than external style  sheets.  Inline styles have more weight than embedded style sheets because you can’t get any closer to the content than a style  right in the element’s opening tag. To prevent a specific rule from being overridden, you can  assign  it “importance” with the ! important indicator.

If you want a rule not to be overridden by a subsequent conflicting rule, include the ! important indicator just after the property value and before the semicolon for that rule. For example, to make paragraph text blue always, use the following rule:

p {color: blue !important;}

Even if the browser encounters an inline style later in the document (which should override a document-wide style sheet), like this one:

<p style=”color: red”>

that paragraph will still be blue because the rule with the !important indicator cannot be overridden by other styles in the author’s style sheet.

Grouped Selectors

If you ever need to apply the same style property to a number of elements,  you  can group  the selectors into one rule by separating them with  commas.  This  one rule  has  the  same  effect  as the five rules listed separately.

h1, h2, p, div, img { border: 1px solid blue; }

Grouping them makes future edits more efficient and results in smaller file sizes.

Rule Order

If there are conflicts within  style  rules  of identical  weight,  whichever  one  comes  last  in  the  list wins. Take these three rules, for example:

In this scenario, paragraph text will be green because the last rule in the  style  sheet  overrides  the

<style type=”text/css”> p { color: red; }

p { color: blue;  } p { color: green; }


In this scenario, paragraph text will be green because the last rule in the  style  sheet  overrides  the earlier ones.