CSS Applied

Lets look at some applied CSS, to start understanding how it will effect our webpages.

In lines 13, 21, 27, & 33 elements are selected. Except for the first instance in line 13, the elements are selected using “element selectors”. Line 13 uses a class selector (discussed in a few pages).

Within each declaration block, there are multiple style rules, each effecting a specific aspect. Each of the declarations, for each selector, either effects border or background color.

Notice, in the displayed HTML example below the code, how the borders make it easier to visually identify the individual elements.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* Select the main container 'div' element */
.main-container {
    /* Draw a blue border 2px thick. */
    border-style: solid;
    border-width: 2px;
    border-color: blue;
    /* Color the background grey */
    background: grey;
}
/* Select all h1 elements */
h1 {
    /* Draw an orange border 2px thick around the element. */
    border-style: solid;
    border-color: orange;
    /*Set a unique background color*/
    background: #f0ebeb;
}
/* Select all paragraph elements */
p {
    border-style: solid;
    border-color: yellow;
    background: #ffe4e4;
}
/* Select the strong elements */
strong {
    border-style: solid;
    border-width: 1px;
    border-color: red;
}
/* Select the emphasized elements */
em {
    border-style: solid;
    border-width: 1px;
    border-color: red;
}

HTML

1
2
3
4
5
6
7
8
<!-- Div Container -->
<div class="main-container">
    <!-- Heading 1 -->
    <h1 class="main-heading">Heading1</h1>
    <!-- Content Paragraphs -->
    <p class="content-para">A paragraph of <strong>happiness</strong> within a div element.</p>
    <p class="content-para">Another paragraph, that's not <em> as happy,</em> as it follows the other paragraph.</p>
</div>

Heading1

A paragraph of happiness within a div element.

Another paragraph, that's not as happy, as it follows the other paragraph.