Learn CSS: Introduction to Inheritance, Specificity, and Cascade
(Page 1 of 4 )
We are still discussing the basic concepts of CSS. In this article (and the next part) we will talk about how the structure of the CSS document can affect Web page design. Actually, there's something that I haven't discussed until now, which is what are the places that we can use to write styles and how it can affect the Web page. This is also related to the cascade, inheritance and specificity concepts which help you to understand how to structure your CSS document. This article is the ninth in a series covering CSS.
Before we discuss the meaning of the CSS cascade and the related concepts, you need to know that there are places to write styles other than the .css file (this is essential for the following sections). You also need to understand that there is more than one type of CSS file that affects how Web pages will look. Let's take a look.
Inline Styles
Up to this point we have been applying CSS styles by using an external file (with the extension .css) and linking it to the HTML document with the help of the <link> element. In fact there are other places where you can write your CSS styles. As we will see (in the Cascade sections), writing styles in these places without knowledge of the cascade concept will produce unexpected results. That's why I begin this article with a discussion of these places.
The first place to write styles is the HTML element itself using the Style attribute. You write your CSS declarations surrounded by double quotations, as in the following HTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Structure</title>
</head>
<body style="font-family: Arial; font-size: 1.1em;">
<div style="color: white; background-color: black; height: 30px;">
This is a div element with an inline style
</div>
</body>
</html>
In the HTML code I have stated that the font-family of the document is Arial, the font-size is 1.1em, and the style for the <div> element is a white text and a black background with an area of 30px height. When you have an element that needs a specific style that will not be applied to any other element, you may consider using the element's style attribute to define this style.
Next: The Style Tag >>
More Style Sheets Articles
More By Michael Youssef
/ 16 
