Internal Styles and External Styles are made up of the following components:
(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.
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).
NOTE: In the real world, we would usually specify several Property: Value Pairs for each Style Rule (Declaration).
This next screen shot illustrates the primary usage of CSS. The CSS Style Decalaration targets a particular html element, or portion of an element. We place the Style Declaration on an External Style Sheet so that we can continue to reuse the style on other pages.
The Selector above is h1. This CSS Selector targets the <h1> heading tags on the html web page.
The h1 style is written on the External Style Sheet. When the web browser "reads" the page, it will see the link to our External Style Sheet, and match up the selectors with the html elements, thus the browser will apply our Styles.
The beauty of an External Style Sheet is that it can be reused over and over again simply by linking it to more web pages. This means we only have to create our Styles 1 time, yet use them as many times as we need to or want to.