Web Design at Georgetown CollegeBeta

CSS Basics and Box Model

What You Need To Know

How to set up a basic CSS file with reset stylesheet
How to style HTML elements using color and text CSS properties
How the CSS box model works and how to use it to make basic layout and spacing adjustments
How to center block-level elements
How to view your CSS in a browser web inspector

Getting started

Reset stylesheet
File structure
- style.css
- Link reset stylesheet - <link rel="stylesheet" href="normalize.css">
- Link main css - <link rel="stylesheet" href="style.css">
- Rule structure

Copy the following code into your file to setup the basic page structure.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, width=device-width">
	<link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
</body>
</html>

CSS structure

selector {
	property: value;
}

Properties

Color
- background-color
  - Use hex codes
  - Some basic color choices
  - Adobe Color
  - Coda color picker
- color
Text
- font-family
  - Web safe fonts
- font-size (in pixels)
- line-height (in ems)
- font-weight (bold)
- font-style (italic)
- text-decoration (underline)
- text-align

Example

This is an example of the above CSS properties.

Diagram of CSS box model — Diagram of CSS box model - source

CSS Box Model/Layout

div, etc.
Styling
- width
- padding
- border
- margin
- Centering your div
  - margin: 0 auto;

Example div with styles

More Properties

Images
- Resizing
- Centering
  - display: block;
  - margin: 0 auto;
Miscellaneous
- Links and :hover pseudo class
- Hover Link
- Styling lists
  - list-style-type
- Styling horizontal rules
  - border
- Viewing source code in a browser
- Using Coda reference books (also, HTML and CSS versions on the web)