Typography

font-size

Size

.some-element {
	font-size: 24px;
}

fyi, the default font size for plain body text (not headings) is usually 16px

font-weight

Bold

.some-element {
	font-weight: bold;
}

If an element already has bold text, you can remove it:

.some-element {
	font-weight: normal;
}

font-style

Italic

.some-element {
	font-style: italic;
}

If an element already has italic text, you can remove it:

.some-element {
	font-style: normal;
}

text-decoration

Underline

.some-element {
	text-decoration: underline;
}

Remember that only clickable links should be underlined (otherwise you will confuse people!)

If an element is already underlined, you can remove it:

.some-element {
	text-decoration: none;
}

color

Color

Colors can be specified in several ways; most commonly as words (black, white, red, etc.) or as hex codes (#483D8B, #FFFFFF, #9932CC, etc.)

.some-element {
	color: lavender;
}
 
.another-element {
	color: #E6E6FA;
}

A nice list of color words can be found here: http://colours.neilorangepeel.com/

For hex codes, you can use the eye-dropper tool in Photoshop, or this spiffy website: http://color.hailpixel.com/

font-family

Typeface

.some-element {
	font-family: 'Trebuchet MS', sans-serif;
}

Different computers and devices have different fonts available, so you want to list several options (separated by commas). The first available font in the list will be used. More details about choosing and using fonts.

text-align

Text Alignment

.some-element {
	text-align: center;
}
 
.another-element {
	text-align: right;
}
 
.yet-another-element {
	text-align: left;
}
 

Text is automatically aligned "left" by default, so you usually only need to make use of "center" and "right".

The tricky thing about this property is that you assign it to block-level elements in order to set the alignment of their inline-level contents -- but text-align has no actual effect on block-level elements themselves!

If that doesn't make a lot of sense, you're not alone. This is probably the second-most confusing aspect of CSS -- only surpassed by "float" (which, ironically enough, is the correct way to align block-level elements).

line-height

Leading

The amount of vertical space between lines of text. This is usually expressed as a proportion of the font size, for example "1" ("single-spaced") leaves no extra space between lines; "2" ("double-spaced") makes the space between lines as tall as the text itself; "1.25" results in space between lines that is ¼ the height of the text; etc.

.some-element {
	line-height: 1.85;
}

Backgrounds

background-color

Solid Background Color

Background colors are specified in the same way as typography colors -- as words (black, white, red, etc.) or as hex codes (#483D8B, #FFFFFF, #9932CC, etc.)

.some-element {
	background-color: gray;
}
 
.another-element {
	background-color: #39A136;
}

If a background color is set on an element that is nested inside another element, it will "cover up" the outer element (as if the inner element were "on top of" or "in front of" the outer one). If an element already has a solid background, you can remove it by setting it to transparent:

.some-element {
	background-color: transparent;
}

background-image

Background Image

Background images share most of the same requirements as the HTML <img> tag:

  • They must be .gif, .jpg, .png, or .svg format
  • You need to think about the trade-off between file size (which could slow down the page load if too large) verus image quality (which could look ugly if too low)
  • You can link to an external image by using a url that starts with "http://" or "https://", or you can link to an internal image by using the folder/file name
.some-element {
	background-image: url(images/yourimage.png);
}
 
.another-element {
	background-image: url(http://lorempixel.com/800/400/);
}

Important: Use background images only for "visual flair" -- never for actual page content! For example, the photo that accompanies a news article should always be an actual <img> tag (not a background image) because it is essential to the content. On the other hand, a pattern or texture is "visual flair" (and hence suitable for a background image) because while it may make the content look nicer, it doesn't actually add to its meaning. (This is why there is no "alt text" on background images.)

Remember: keep your content separate from your visual design.

background-repeat

Repeating (or not) a Background Image

By default, background images will be repeated or "tiled" to fill the entire space of their element.

To show the background image only once (not repeated at all):

.some-element {
	background-image: url(logo.gif);
	background-repeat: no-repeat;
}

To repeat the background image horizontally but not vertically:

.some-element {
	background-image: url(logo.gif);
	background-repeat: repeat-x;
}

To repeat the background image vertically but not horizontally:

.some-element {
	background-image: url(logo.gif);
	background-repeat: repeat-y;
}

To restore the default horizontal and vertical repeating of a background image (if it was changed from its default setting somehow):

.some-element {
	background-image: url(logo.gif);
	background-repeat: repeat;
}

background-position

Placing a Background Image

When a background image is set to "no-repeat", it will be placed at the top-left corner of its element -- but you can move it around to different positions if desired.

Background position is specified as 2 coordinates: horizontal and vertical (that is, how far away the image is from the left edge and the top edge of its element). You can use pixels, percentages, or words to express these distances.

Horizontal distances:

  • left or 0 for left-most edge
  • right or 100% for right-most edge
  • center or 50% for the middle
  • 25% (for example) positions the background image ¼ of the distance from the left edge of its element
  • 37px (for example) positions the left edge of the image 37 pixels from the left edge of its element

Vertical distances:

  • top or 0 for top-most edge
  • bottom or 100% for bottom-most edge
  • center or 50% for the middle
  • 66% (for example) positions the background image ⅔ of the distance from the top edge of its element
  • 12px (for example) positions the top edge of the image 12 pixels from the top edge of its element

For example, to position the background image at the top-right corner of its element:

.some-element {
	background-image: url(my-background.png);
	background-repeat: no-repeat;
	background-position: right top;
}

Same thing, but using percentages instead of words:

.some-element {
	background-image: url(my-background.png);
	background-repeat: no-repeat;
	background-position: 100% 100%;
}

To center the background image both horizontally and vertically:

.some-element {
	background-image: url(my-background.png);
	background-repeat: no-repeat;
	background-position: center center;
}

Same thing, but using percentages instead of words:

.some-element {
	background-image: url(my-background.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

You can also mix and match different units of measure. For example, to position the background image so it is horizontally centered but close to the top edge of its element:

.some-element {
	background-image: url(my-background.png);
	background-repeat: no-repeat;
	background-position: center 10px;
}

background-attachment

"Sticky" Background Image

Setting background-attachment: fixed; will keep a background image in the same exact spot even when the page is scrolled.

.some-element {
	background-image: url(resources/my-subtle-illustration.png);
	background-attachment: fixed;
}

Note that this technique can create some cool effects, but it can also be disorienting if not done carefully. Remember that visual effects shouldn't get in the way of actually using the site!

background-size

Stretched Background Image

Setting background-size: cover; will stretch the background image to fill the entire width and height of its container (most commonly used on the body tag for a "full-bleed" page background).

body {
	background-image: url(some-big-photo.jpg);
	background-size: cover;
}

Note that this will cause cropping and stretching of the image to make sure it fills the entire available space. If instead you want to make the background image as large as it can be without cropping or aspect ratio changes, use background-size: contain;

body {
	background-image: url(somefolder/mypicture.png);
	background-size: contain;
}

The Box Model

The "Box Model" applies to block-level elements, each of which has content, padding, border, and margin. The content is whatever text/images/tags are nested inside the box, while the padding, border and margin surround the box.

diagram showing concentric boxes for content, padding, border, and margin

padding

Padding

Padding is the space between the content and the border. Any background on the box will show through in the padding.

The size of the padding is usually set in pixels, and you list the top, right, bottom, and left sides all on one line of CSS.

.some-element {
	padding: 10px 5px 20px 5px;
}

If all four sides of the box have the same padding, you can just type one number for all of them.

.some-element {
	padding: 15px;
}

border

Borders

If you want a border around an element, you need to set its thickness (in pixels), line style (solid, dashed, dotted, or double), and color (word or hex code).

.some-element {
	border-top: 1px solid black;
	border-right: 2px dotted #00CCFF;
	border-bottom: 1px solid #2D5286;
	border-left: 1px dashed orange;
}

If all four sides of the box have the same border, you can just type one line for all of them.

.some-element {
	border: 1px solid black;
}

If you want to remove the border from a side, set it to none.

.some-element {
	border-top: none;
	border-bottom: none;
}

If you want to remove the border from all four sides, you can just type one line for all of them.

.some-element {
	border: none;
}

border-radius

Rounded Corners

You can give a box rounded corners by setting its border-radius to a number of pixels. The larger the number, the more rounded its corners will be.

.some-element {
	border-radius: 4px;
}

Note that this effect only makes sense when a box has a visible border or a background (color or image).

margin

Margins

Margins are the space outside the border. The background of a box usually does not show through the margin. Margins are useful for adding space between two different boxes.

The size of the margin is usually set in pixels or percentages, and you list the top, right, bottom, and left sides all on one line of CSS.

.some-element {
	margin: 10px 5px 20px 5px;
}

If all four sides of the box have the same margin, you can just type one number for all of them.

.some-element {
	margin: 15px;
}

A couple of margin "gotchas":

  • When 2 boxes are next to each other, their margins will overlap and collapse into each other -- so the space between them might not be as large as you intended!
  • All of the block-level elements (except for div) automatically start out with some margin (because it's part of the browser default style). If this is not what you want, simply change the margin to 0 in your CSS:
    .some-element {
    	margin: 0;
    }

    Or you could set your own default margins for block-level elements:

    p {
    	margin: 0 0 20px 0;
    }
     
    h1 {
    	margin: 10px 0 10px 0;
    }
     
    h2 {
    	margin: 0 0 10px 0;
    }