Main Body
Chapter 3 • CSS Styles
What are CSS?
Cascading style sheets, or CSS, enable you to select tags and style their dimensions, color, position, type, and other characteristics.
CSS take three forms:
- local, or inline, styles inside a tag, e.g., <p style=”font-family: Helvetica, sans-serif;”
- global, or embedded, styles inside a <style> tag in the document <head>
- separate file of type .css linked to one or more .html documents
Cascading refers to both a file of type .css and to the styles’ hierarchy of influence, i.e., local/inline styles take precedence over global/embedded, which in turn take precedence over external .css files.
Selectors
To apply global/embedded or .css styles to a tag, one must first select the tag by typing its name and enclosing the styles in braces {}, separated by semicolons. Tags can be selected by one of three methods:
- Type the name of the tag, e.g., p {font-family: Helvetica, sans-serif;}. This selects all tags of the specified kind, which may not be desirable.
- Assign an identification, or ID, to the tag, e.g., <p id=”para1″>, then selecting the id with a hash tag, e.g.., “#para1 {font-family: Helvetica, sans-serif;}”. An ID can only be used once within a page because the ID can also serve as a destination for an anchor link like “back to top of page”.
- Assign a class to the tag, e.g., <p class=”para1″> and selecting the class with a period followed by its name, e.g., “.para1 {font-family: Georgia, serif;}” Sometimes you will see the tag itself placed in front of the selector, e.g., p.para1. Unlike an ID, a class can be used more than once in the same document.
A good way to learn how to use selectors is to play the game, “CSS Diner.” This contains 32 levels showing various selectors and combinations.
Styles
A multitude of styles can be applied to selected tags, as shown in the table below.
| Examples of Common Styles | |
| Styles | Examples |
| font | font-family: font-size: line-height: font-style: font-weight: font: (shorthand)—includes bold, italic, point size, leading, font family text-align: left, right, center, justified |
| size | width: height: |
| color | refers to the color of fonts; analogous to Stroke in illustration programs |
| background | fill color of objects, analogous to Fill in illustration programs |
| position | position: relative (default), absolute, fixed, sticky left: right: bottom: top: float: left, float: right; /* creates text wrap */ |
| space around | margin: top right bottom left |
| border | border: width, kind (solid, dashed, dotted, …), color |
| box-shadow | drop shadow for tags, including horizontal offset, vertical offset, blur radius, and color |
| text-shadow | drop shadow for text (with settings as above) |
Example
Following is an example of a global/embedded style sheet that would be placed in the document <head>:
<style>
p {
font: 14pt/1.4em Helvetica, Arial, Roboto, sans-serif;
} img {
width: 512px;
height: auto;
float: left;
margin: 0 24px 12px 0;
}
</style>
Colors
Colors on the web can be specified using several formats, including named colors, RGB and RGBA, and hexadecimal.
| Color specification | Example | Description |
| named colors | color: red; background: lavender; |
147 named colors, such as “red,” “aliceblue,” “chartreuse,” etc. |
| RGB colors | rgb(255,0,0); /* red */ | red, green, and blue, scale 0–255, |
| RGBA colors | rgba(255,0,0,0.50); | red, green, blue, and opacity (scale, 0–1.00) |
| Hex-6* | color: #ff0000; /* red */ | red, green, and blue on a scale of 0–16 |
| Hex-3* | color: #0f0; /* green */ | red, green, and blue on a scale of 0–16 |
| * Note: Hexadecimal colors are frequently used by web developers but, in the educational setting, make it difficult to determine which colors are which. | ||
Reference Site
CSS Diner game: flukeout.github.io
Web Color Bars: rich-adams.net > GRC 365 > Web Color Bars. Three charts include the named colors in alphabetical order and arranged by RGB neutral density and CIE LAB perceptual color.
