May08

CSS RULES

by glenda on May 8th, 2011 at 8:10 am
Posted In: Tutorials, CSS, Tutorials, CSS, CSS RULES, Tutorials


THE RULES OF CSS

Each rule consists of a selector and a declaration. The selector begins a CSS rule and specifies which part of the HTML document the rule will be applied to. The declaration consists of a number of property/value pairs that set specific properties and determine how the relevant element will look. In the following example, p is the selector and everything thereafter is the declaration:

p {
color: pink;
}

As you know, p is the HTML tag for a paragraph. Therefore, if we attach this rule to any web page, the declaration will be applied to any HTML marked up as a paragraph, thereby setting the color of said paragraphs to pink.

NOTE:
CSS property names are not case sensitive, but it’s good to be consistent in web design — it’s highly recommended to always use lowercase.

When you write CSS rules, you place the declaration within curly brackets { }. Properties and values are separated by a colon (:), and property/value pairs are terminated by a semicolon (;). Technically, you don’t have to include the final semicolon in a CSS rule, but most designers consider it good practice to do so. This makes sense – you may add property/value pairs to a rule at a later date, and if the semicolon is already there, you don’t have to remember to add it. If we want to amend our paragraph declaration and define paragraphs as bold, we can do so like this:

p {
color: pink;
font-weight:bold;
}

You don’t have to lay out CSS rules as done above; rather, you can add rules as one long string. The formatting is changed slightly again: the property/value pairs and closing curly bracket are both tabbed inward, enabling rapid vertical scanning of a CSS document’s selectors.

TYPES of CSS SELECTORS

In the sections that follow, we’ll examine some other regularly used (and well-supported) CSS selectors:

    *class
    *ID
    *grouped
    *contextual


CLASS SELECTORS

In some cases, you may wish to modify an element or a group of elements. For instance, you may wish for your general website text to be blue, as in the examples so far, but some portions of it to be red. The simplest way of doing this is by using a class selector. In CSS, a class selector’s name is prefixed by a period (.), like this:

.warningText
{
color: red;
}

This style is applied to HTML elements in any web page the style sheet is attached to using the class attribute, as follows:

<h2 class=”warningText”>This heading is red.</h2>
<p class=”warningText”>This text is red.</p>
<p>This is a paragraph, <span class=”warningText”>and this text is red</span>.</p>


ID SELECTORS

ID selectors can be used only once on each web page. In HTML, you may apply a unique identifier to an HTML element with the id attribute:

<p id=”footer”>© JohnGlennLee The Company. All rights reserved. 2011 </p>

To style this element in CSS, precede the ID name with a hash mark (#):

p#footer {
padding: 20px;
}

In this case, the footer div would have 20 pixels of padding on all sides. Then, classes can be used multiple times on a web page, but IDs cannot. Typically, IDs are used to define one-off page elements, such as structural divisions, whereas classes are used to define the style for multiple items.


GROUPED SELECTORS

To set a property value for a number of different selectors, you can use grouped selectors, which take the form of a comma-separated list:

h1, h2, h3, h4, h5, h6
{
color: green;
}

Note that you’re not restricted to a single rule for each element – you can use grouped selectors for common definitions and separate ones for specific property values, as follows:

h1, h2, h3, h4, h5, h6 {
color: green;
}

h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.2em;
}


CONTEXTUAL SELECTORS

This selector type is handy when working with advanced CSS. As the name suggests, contextual selectors define property values for HTML elements depending on context. Take, for instance, the following example:

<p>I am a paragraph.</p>
<p>So am I.</p>
<div id=”navigation”>
<p>I am a paragraph within the navigation div.</p>
<p>Another paragraph within the navigation div.</p>
</div>

You can style the page’s paragraphs as a whole and then define some specific values for those within the navigation div by using a standard element selector for the former and a contextual selector for the latter:

p {
color: black;
}
#navigation p {
color: blue;
font-weight: bold;
}

As shown, syntax for contextual selectors (#navigation p) is simple – you just separate the individual selectors with some whitespace. The two rules shown previously have the following result:

The p rule colors the web page’s paragraphs black.
The #navigation p rule overrides the p rule for paragraphs within the navigation div,
coloring them blue and making them bold.

By working with contextual selectors, it’s possible to get very specific with regard to styling
things on your website; we’ll be using these selectors regularly.


└ Tags: