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

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.

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:

Thematic Break

The Thematic Break, also knows as the horizontal rule in previous version of HTML has the following CSS for the default style. You can change that.

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://b.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.

So much more

30 Seconds if CSS. Ready made CSS snippets to help you build your website.