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:
Example:
<tag style=”property: value”>
Example:
<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:
<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>
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”/>
Inheritance
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
| <html> <head> <title> CSS </title> <style type=”text/css”> body { color: red;} </style> </head> <body> <h2> Well Known Novels </h2> <p> Romeo and Juliet </p> <p> Things Fall Apart</p> <p>Kingdom of God is Among You</p> </body> </html> |
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; }
| </style> |
In this scenario, paragraph text will be green because the last rule in the style sheet overrides the earlier ones.