HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 28. STYLING WITH CSS 263


28.8 Example: Colors


This sets the overall background color to be yellow, and the text colors as
follows: h1 is blue, h2 is red, and p is green. For h2, the background color
is not yellow, but instead white.



Each “line” consists of a selector, then an opening brace, then the style
commands, and then a closing brace. I say “line” in quotes because it can
actually spread over several lines with no problem.


The selectors in our example above are body, h1, h2, and p. Each of these
matches to a tag in the webpage.


The styling attributes we show are background-color and color. There are
many styling attributes.


We talked about color and backgrounds in chapter 7 (page 71).


28.9 Borders


Images, paragraphs, and other things, can have borders added to them.
The following styling creates a solid border that has a thickness of 1em (the
width of the letter m in the current font) with a color of pink.


border: 1em solid pink;
border: thin double black;


Thickness: Section 12.4 (page 133) talks about the different kinds of di-
mensions you can use, including px (pixel), in (inch), cm, and mm.


Pattern:Section 12.1.3 (page 129) talks about the different kinds of borders
you can use, including solid, dotted, dashed, and double.

Free download pdf