03 Applying CSS


There are many CSS properties. You do not have to memorize them all. You will remember the ones you use most often, and the other ones you can always look up. I’ve separated many of the properties into a number of interactive demos so that you can try them out. Spend some time in this sandbox, change the values of the properties or add new properties. This is where you can play and learn while it is still fun.

Because many CSS values are measurements, we go over absolute and relative measurement units first.


Measurement Units

Measurements are used everywhere, so you might as well get used to specifying both relative and absolute measurements. Absolute measurements use a fixed size, while relative measurements are based on the size of the parents or determined by the size of the viewport (window or device size).

Absolute Measurements

Most of the time, you will want to specify a width in pixels, such as 300px How long this is depends on the resolution of the screen. Other fixed measurements are pica pc, point pt, millimeter mm, centimeter cm and inch in.

Keyword values are also common, like bold and bolder for the font-weight property. Other value for font weight are from 100 through 900 in multiples of 100. Font weights not available will map onto the closest available font.

Interactive CSS Selectors Demonstrations

In each of these demonstrations, the CSS is live, meaning that the example will change in real time as you change the values, or type in new properties. It does not always work when copy and pasting, so you need to type the changes out. If you like what you end up with, copy the CSS and use it. If you copy the entire declaration rule, be aware that you will need to change the selector to match the HTML in your document. Have Fun.

CSS Code View

Live Demo

  • Width in:
  • pixels (px)
  • points (pt)
  • picas (pc)
  • inches (in)
  • centimeters (cm)

Relative Measurements

The most common relative measurement is to use percentage %, which will be the percentage of the parent element.

When a property takes a length value, that length can be expressed in em units, which is the width of the “m” of the font in question. This can get you into trouble when you specify the em of an em of an em. For that reason, they came out with an root em, or rem, which is based on the size given to the body tag. The beauty of this is that the entire site can be set to the default font size. If the default font size is changed, because the device has changed, the measurements stay relative to the device.

You can also express the length in the x-height of the font: ex. Both of these measurements are relative to the font size, but can be used to specify the entire site.

There are other relative ways to specify the measurement of an element: px for pixels (Yes, pixels are relative based on the screen resolution, which changes all of the time in web design), vw for viewport width (this is the width of the window),vh is for viewport height, vm is for viewport minimum and ch is for character. These relative values should be used where the devices may change.

1vw is 1% of viewport width, 1vh is 1% of viewport height, 1vmin is 1vw or 1vh, whatever is smallest and 1vmax is 1vw or 1vh, whatever is largest.

Compare Measurements

Relative sizes are based on the live demo width of 60% of the parent main element, or a font-size of 22px for the body element.

This font-size is unusually large so as to make the text easier to read in class. Usual font-size is 16px. If you change it, the em, x-height based width will change accordingly. The fonts in the document also change.

If you change the window size, the last two, viewport width and viewport height, will change, as they are a percentage of the window size.

CSS Code View

Live Demo

  • Width in:
  • reference em (rem)
  • em (em)
  • x-height (ex)
  • percentage (%)
  • % of the viewport width (vw)
  • % of the viewport height (vh)

The last two values, based on the viewport, will update if the window is resized. The em and x-height widths change with the body font-size.


Color

Color is always RGB. That is how computers work. These are additive colors, you can call them by name or RGB value, both by percentages, decimal number or hexadecimal shorthand (Hexadecimal is base 16, or 1,2,3,4,5,6,7,8,9,a,b,c,d,e,f ), which is the most common form, introduced by a # hash mark, and allows each value (red, green and blue) to be represented by two Hexadecimal values, like #000000 is black or #ff0000 is red, #00ff00 is green and #0000ff is blue. Can you guess what the value of white is? If you guessed #000000, you are correct!

Here are the names of the colors, with their Hexadecimal and decimal numbers as an example:

Color Color name Hex rgb Decimal

    aliceblue #f0f8ff 240,248,255

    antiquewhite #faebd7 250,235,215

    aqua #00ffff 0,255,255

    aquamarine #7fffd4 127,255,212

    azure #f0ffff 240,255,255

    beige #f5f5dc 245,245,220

    bisque #ffe4c4 255,228,196

    black #000000 0,0,0

    blanchedalmond #ffebcd 255,235,205

    blue #0000ff 0,0,255

    blueviolet #8a2be2 138,43,226

    brown #a52a2a 165,42,42

    burlywood #deb887 222,184,135

    cadetblue #5f9ea0 95,158,160

    chartreuse #7fff00 127,255,0

    chocolate #d2691e 210,105,30

    coral #ff7f50 255,127,80

    cornflowerblue #6495ed 100,149,237

    cornsilk #fff8dc 255,248,220

    crimson #dc143c 220,20,60

    cyan #00ffff 0,255,255

    darkblue #00008b 0,0,139

    darkcyan #008b8b 0,139,139

    darkgoldenrod #b8860b 184,134,11

    darkgray #a9a9a9 169,169,169

    darkgreen #006400 0,100,0

    darkgrey #a9a9a9 169,169,169

    darkkhaki #bdb76b 189,183,107

    darkmagenta #8b008b 139,0,139

    darkolivegreen #556b2f 85,107,47

    darkorange #ff8c00 255,140,0

    darkorchid #9932cc 153,50,204

    darkred #8b0000 139,0,0

    darksalmon #e9967a 233,150,122

    darkseagreen #8fbc8f 143,188,143

    darkslateblue #483d8b 72,61,139

    darkslategray #2f4f4f 47,79,79

    darkslategrey #2f4f4f 47,79,79

    darkturquoise #00ced1 0,206,209

    darkviolet #9400d3 148,0,211

    deeppink #ff1493 255,20,147

    deepskyblue #00bfff 0,191,255

    dimgray #696969 105,105,105

    dimgrey #696969 105,105,105

    dodgerblue #1e90ff 30,144,255

    firebrick #b22222 178,34,34

    floralwhite #fffaf0 255,250,240

    forestgreen #228b22 34,139,34

    fuchsia #ff00ff 255,0,255

    gainsboro #dcdcdc 220,220,220

    ghostwhite #f8f8ff 248,248,255

    gold #ffd700 255,215,0

    goldenrod #daa520 218,165,32

    gray #808080 128,128,128

    green #008000 0,128,0

    greenyellow #adff2f 173,255,47

    grey #808080 128,128,128

    honeydew #f0fff0 240,255,240

    hotpink #ff69b4 255,105,180

    indianred #cd5c5c 205,92,92

    indigo #4b0082 75,0,130

    ivory #fffff0 255,255,240

    khaki #f0e68c 240,230,140

    lavender #e6e6fa 230,230,250

    lavenderblush #fff0f5 255,240,245

    lawngreen #7cfc00 124,252,0

    lemonchiffon #fffacd 255,250,205

    lightblue #add8e6 173,216,230

    lightcoral #f08080 240,128,128

    lightcyan #e0ffff 224,255,255

    lightgoldenrodyellow #fafad2 250,250,210

    lightgray #d3d3d3 211,211,211

    lightgreen #90ee90 144,238,144

    lightgrey #d3d3d3 211,211,211

    lightpink #ffb6c1 255,182,193

    lightsalmon #ffa07a 255,160,122

    lightseagreen #20b2aa 32,178,170

    lightskyblue #87cefa 135,206,250

    lightslategray #778899 119,136,153

    lightslategrey #778899 119,136,153

    lightsteelblue #b0c4de 176,196,222

    lightyellow #ffffe0 255,255,224

    lime #00ff00 0,255,0

    limegreen #32cd32 50,205,50

    linen #faf0e6 250,240,230

    magenta #ff00ff 255,0,255

    maroon #800000 128,0,0

    mediumaquamarine #66cdaa 102,205,170

    mediumblue #0000cd 0,0,205

    mediumorchid #ba55d3 186,85,211

    mediumpurple #9370db 147,112,219

    mediumseagreen #3cb371 60,179,113

    mediumslateblue #7b68ee 123,104,238

    mediumspringgreen #00fa9a 0,250,154

    mediumturquoise #48d1cc 72,209,204

    mediumvioletred #c71585 199,21,133

    midnightblue #191970 25,25,112

    mintcream #f5fffa 245,255,250

    mistyrose #ffe4e1 255,228,225

    moccasin #ffe4b5 255,228,181

    navajowhite #ffdead 255,222,173

    navy #000080 0,0,128

    oldlace #fdf5e6 253,245,230

    olive #808000 128,128,0

    olivedrab #6b8e23 107,142,35

    orange #ffa500 255,165,0

    orangered #ff4500 255,69,0

    orchid #da70d6 218,112,214

    palegoldenrod #eee8aa 238,232,170

    palegreen #98fb98 152,251,152

    paleturquoise #afeeee 175,238,238

    palevioletred #db7093 219,112,147

    papayawhip #ffefd5 255,239,213

    peachpuff #ffdab9 255,218,185

    peru #cd853f 205,133,63

    pink #ffc0cb 255,192,203

    plum #dda0dd 221,160,221

    powderblue #b0e0e6 176,224,230

    purple #800080 128,0,128

    red #ff0000 255,0,0

    rosybrown #bc8f8f 188,143,143

    royalblue #4169e1 65,105,225

    saddlebrown #8b4513 139,69,19

    salmon #fa8072 250,128,114

    sandybrown #f4a460 244,164,96

    seagreen #2e8b57 46,139,87

    seashell #fff5ee 255,245,238

    sienna #a0522d 160,82,45

    silver #c0c0c0 192,192,192

    skyblue #87ceeb 135,206,235

    slateblue #6a5acd 106,90,205

    slategray #708090 112,128,144

    slategrey #708090 112,128,144

    snow #fffafa 255,250,250

    springgreen #00ff7f 0,255,127

    steelblue #4682b4 70,130,180

    tan #d2b48c 210,180,140

    teal #008080 0,128,128

    thistle #d8bfd8 216,191,216

    tomato #ff6347 255,99,71

    turquoise #40e0d0 64,224,208

    violet #ee82ee 238,130,238

    wheat #f5deb3 245,222,179

    white #ffffff 255,255,255

    whitesmoke #f5f5f5 245,245,245

    yellow #ffff00 255,255,0

    yellowgreen #9acd32 154,205,50

Change the Color of the Background

CSS Code View

Live Demo


Font Properties

Basic properties that style the font. Children inherit these properties from parents.

CSS Code View

Live Demo

Font Style Properties

More stylistic properties to change the appearance of fonts.

CSS Code View

Live Demo

Font Style Properties


Text Layout Properties

These properties have to do with the inline flow of the characters. The children inherit all of these properties from their parents. I have created three selectors, one for the header h3., one for the body text p and one for the superscript inside the body text.

CSS Code View

Live Demo

Text Layout Properties

Change the text by applying different styles. Notice that when you make a mistake, the style reverts to the default style. The 1st selector is an h3. The 2nd selector is a p. The 3rd selector is a span acting like a superior (sup) tag and the 4th selector selects an actual sup tag and colors it red.


Box Properties

box model

Each HTML element is a box. The size of this box is determined by its inheritance, the content, or by a CSS rule. By default, the width of the box is inherited from the parent and the height is determined by the content. That makes the box is as wide as its parent, or the width of the window when the parent element is the body tag.

The box remains invisible unless it has a border or a background.

The box has four sides. You can target each side’s margin, border and padding at once padding: 10px; the vertical and horizontal sides separately padding: 0 auto or each side independently, starting at the top and moving clockwise: top, right, bottom and left padding: 0px 30px 60px 90px;.

CSS Code View

Each element is a box. The size of the box is determined by the parent element, or if CSS is used, the box can have a width, height, padding, border and margins. Padding and the border is added to the size of the content.


Border Properties

The border usually uses a shorthand where the width, color and style are given in this order: border: 10px solid #f68;. Leaving any one of these out breaks the border. Here is a list of the styles:

none: No border. Color and width are ignored (i.e., the border has width 0 unless the border is an image.
hidden: Same as none, but has different behavior in the border conflict resolution rules for border-collapsed tables.
dotted A series of round (square?) dots.
dashed: A series of square-ended dashes.
solid: A single line segment.
double: Two parallel solid lines with some space between them.
groove: Looks as if it were carved in the canvas.
ridge: Looks as if it were coming out of the canvas.
inset: Looks as if the content on the inside of the border is sunken into the canvas.
outset: Looks as if the content on the inside of the border is coming out of the canvas.

CSS Code View

Live Demo

You can change the border attributes including the style yourself.


Margin and Padding Properties

These properties belong to the box model, and are similar, in that they create or subtract space from the sides of the box. I created two elements to show how border collapse works when two margins overlap and only the largest margin is used.

CSS Code View

Live Demo

BOX 1: The margin is set for 20px auto, meaning that the box has 20 pixels of margin on top and bottom, and the left and right margins are automatically adjusted to center the box, possible only because the box has a declared width

BOX 2: Notice that even though both boxes have a 20px margin, that margin collapses between the boxes. If you play around with the numbers, you will see that it collapses the smaller margin into the larger margin.


List Properties

Lists are used for any element that acts like a list. Many elements are styled as lists, and when that happens, its important to take control over the list element, so that the items styled take on the look that does not necessarily look like a list. Menus are a great example of this, but many other items are also considered candidates for being styled as lists. If the list-item-style is turned to one of the automatically incrementing counters, the un-ordered list is automatically turned into an ordered list.

CSS Code View

Live Demo

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

The HTML for the unordered list

<ul>
<li> List Item </li>
<li> List Item </li>
	<ul>
		<li> List Item </li>
		<li> List Item </li>
		<li> List Item </li>
	</ul>
</li>
</ul>

Live Demo

Have numbers span ordered lists by using the attribute start="3"

  1. List Item
  2. List Item
  1. List Item
  2. List Item
  1. List Item
  2. List Item
  1. List Item
  2. List Item

You can style the bullets of the list with gradients As Eric Meyer demonstrates.

CSS Code View

Live Demo

  • This is a list item.
  • So is this.
  • The list is unordered.
  1. This is a list item.
  2. So is this.
  3. The list is ordered.
  1. This is a list item.
  2. So is this.
  3. The list is ordered.


Tables

Tables used as tables are part of the HTML/CSS landscape. Tables used for layout purposes are to be banished. That said, if you want to style a table, its best to create as many hooks in it as possible. This means that a table can have table header, a table footer and multiple table bodies. It is also possible to style columns. The code and an explanation of how the table works is reproduced below:

CSS Code View

The Caption Holds the Title of the Table
Head 1 Head 2 Head 3
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
The Footer is a Place for Information About the Table.
<table id="table">
 <caption>The Caption Holds the Title of the Table
 </caption>
 <col><col><col>
 <thead>
  <tr><th>Head 1</th><th>Head 2</th><th>Head 3</th></tr>
 </thead>
 <tbody>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td> <td> table cell item </td> <td> table cell item </td></tr>
 </tbody>
 <tbody>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td> <td> table cell item </td> <td> table cell item </td></tr>
 </tbody>
 <tfoot>
 <tr><td colspan="3">
	The Footer is a Place for Information About the Table.
  </td></tr>
 </tfoot>
</table>

The HTML code for the table can be divided into parts, and each can be styled separately. There are table headings, footers, data cells and captions and rows, all of which can be styled. The even and odd table rows are styled using pseudo selectors. If you look at the code, you can see that the table caption comes first, then the table header, two table bodies that contain the table rows and the table data cells and finally a table footer. The row tags allow the three rows to be styled individually, though that too could be handled by pseudo selectors.


Pseudo Classes

Pseudo classes are additional classes that belong to the same element. They are most frequently applied to the link element for navigation, where hover and click or visited states can be applied to that link, though any element can have hover states applied:

CSS Code View


Pseudo Classes: not

A collapsable guide to the layout modes. All of the work is being done by the last CSS rule using the pseudo class not, as in not target or hover li:not(:target):not(:hover) .

CSS Code View

Live Demo

Here you will find links to the layout modes article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties.

HTML

  <nav>
    <ul>
      <li id="nav-about"><a href="#nav-about">Layout Modes</a>
        <ul>
          <li><a href="#layoutModes" target="_blank">Layout Modes</a>
          <li><a href="#block" target="_blank">Block Display</a>
          <li><a href="#inline" target="_blank">Inline Display</a>
        </ul>
      <li id="nav-projects"><a href="#nav-projects">Positioning</a>
        <ul>
          <li><a href="#positioning" target="_blank">Normal</a>
          <li><a href="#relative" target="_blank">Relative</a>
          <li><a href="#absolute" target="_blank">Absolute</a>
          <li><a href="#fixed" target="_blank">Fixed</a>
          <li><a href="#floats" target="_blank">Floats</a>
          <li><a href="#tables" target="_blank">Tables</a>
        </ul>
      <li id="nav-interact"><a href="#nav-interact">Other</a>
        <ul>
          <li><a href="#display" target="_blank">Display</a>
          <li><a href="#zindex" target="_blank">Z Index</a>
          <li><a href="#over-flow" target="_blank">Overflow</a>
        </ul>
    </ul>
  </nav>
  <div>
   Here you will find links to the <a href="http://a.parsons.edu/~dejongo/04-the-layout-modes" target="_blank">layout modes</a> article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties.
  </div>
</div>


Pseudo Elements

Pseudo classes add elements to existing elements, in CSS rather than in the document. They can be first letter and line in an inline element and the before and after a block element.

CSS Code View

Live Demo

Pseudo Elements

A pseudo element I use often is the first-line pseudo element.

But other pseudo elements, particularly the before and after, are powerful, as you can see in this posted notes look complete with a page curl above right, created by the before element on the div above, without additional elements in the HTML. Quotes as in <q>quotation marks</q>can be given quotation marks using the before and after pseudo elements.

See more such wizardry in the creation of 84 icons, using nothing but such CSS tricks.

The trick with the folded corner is a really thick border that surrounds the empty content between the quotes of the css content property. The corners of the border meet at a 45° angle, and when the content is nothing, all four corners meet at the middle in a sharp point. Put two such corners together and you get the triangle used to shape the page curl. All you have to do is fill those two sides with the color of the page curl, and fill the other two sides with the background color to block out the corner of the note, which would otherwise stick out.

Cursor

Give the user feedback. Changing the cursor is an instruction away. Roll over the square to see the change.

CSS Code View

Live Demo

Roll the cursor over this square to see it change to a little hand with a pointing finger cursor. Change the cursor in the CSS view to check out all of the cursors.