• Contents
• Measurements
• Color
• Font Properties
• Text Layout Properties
• Box Properties
• Border Properties
• Margin & Padding
• List Properties
• Tables
• Pseudo Classes
• Pseudo Classes: not
• Pseudo Elements
• Cursor

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.

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.

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:

Change the Color of the Background

Font Properties

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

More stylistic properties to change the appearance of fonts.

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.

Box Properties

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;.

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:

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.

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.

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>

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

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:

<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:

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) .

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.

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.