Anatomy of a CSS Style Declaration 

CSS Tutorials for Beginners

Internal Styles and External Styles are made up of the following components:

• CSS Selector
• Declaration Block (made up of Property:Value Pairs)

(Inline Styles do not have a Selector)

1.  Selector:  the selector is used to 'select' or 'target' the HTML element that you want to style.   This is how we tell the web browser to apply a particular style to a particular html element.

For instance, let's say you want to style all the paragraphs on your web pages.  The letter "p" would be our selector and it targets (selects) all paragraphs. 

Or, we can style paragraphs in the middle column differently than the paragraphs in the footer by using a Descendent Selector.

 

2.  Declaration Block:  is everything between the curly brackets.   What you see between these curly brackets are called Property: Value pairs.  This is how we define the properties we want to apply to our web page.  Keep reading to understand this a bit better.

Example

 

The Style Rule above means the following:

The Selector is "h1" which means the Style is targeting ALL <h1> heading tags.

The Selector is always indicated first, and is followed by the declaration block, which is located between the curly brackets.

The Declaration Block simply contains the CSS Property: Value Pairs.   The CSS Property: Values contain the specifics about the Style Rule and will be applied to the Selector, in this case the h1.

In the example above, we are Styling ALL h1s to take on the font color of #222 (a shade of black).  In the real world, we would usually specify several Property: Value Pairs for each Style Rule (Declaration).

There are different Types of CSS Selectors and 3 Different Types of CSS Style Rules.  Your understanding of these will be helpful and enable you to effectively Design your Web Pages.

Where to Next?

• CSS Selectors
• 3 Types of CSS Styles
• Creating CSS Styles