Style Rule Cascading(CSS) and Inheritance

STYLE RULE CASCADING AND INHERITANCE

CSS are probably wondering what exactly cascades about cascading style sheets. In this section we look at the idea of cascading, and a related idea, that of inheritance. Both are important underlying concepts that you will need to grasp, and understand the difference between, in order to work properly with style sheets.

Rule Cascade

A single style sheet associated with one or more web pages is valuable, but in quite a limited way. For small sites, the single style sheet is sufficient, but for larger sites, especially sites managed by more than one person (perhaps several teams who may never communicate) single style sheets don't provide the ability to share common styles, and extend these styles where necessary. This can be a significant limitation.

Cascading style sheets are unlike the style sheets you might have worked with using word processors, because they can be linked together to create a hierarchy of related style sheets.

Font Family

The font family of a text is set with the font-family property.The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Example

p{font-family:"Times New Roman", Times, serif;}

Font Style

The font-style property is mostly used to specify italic text. This property has three values:

normal - The text is shown normally italic - The text is shown in italics

oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Font Size

The font-size property sets the size of the text.Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.

The font-size value can be an absolute, or relative size. Absolute size:

Sets the text to a specified size

Does not allow a user to change the text size in all browsers (bad for accessibility reasons)

Absolute size is useful when the physical size of the output is known Relative size: Sets the size relative to surrounding elements

Allows a user to change the text size in browsers

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements.

Explanation of the different parts:

Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent

Border - A border that goes around the padding and content. The border is affected by the background color of the box

Padding - Clears an area around the content. The padding is affected by the background color of the box

Content - The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

CSS Background

CSS background properties are used to define the background effects of an element. CSS properties used for background effects:

§  background-color

§  background-image

§  background-repeat

§  background-attachment

§  background-position

Background Color

The background-color property specifies the background color of an element. The background color of a page is defined in the body selector:

Example

body {background-color:#b0c4de;}

The background color can be specified by:

name - a color name, like "red"

RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000"

Background Image

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this:

Example

body {background-image:url('paper.gif');}

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example body

{

background-image:url('gradient2.png');

}

If the image is repeated only horizontally (repeat-x), the background will look better:

Example body

{

background-image:url('gradient2.png'); background-repeat:repeat-x;

}

Background - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing with backgrounds.

To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.

The shorthand property for background is simply "background": body {background:#ffffff url('img_tree.png') no-repeat right top;}

When using the shorthand property the order of the property values are: background-color