In web design, content is separate from visual design. Content goes in the HTML file, then visual styles are "layered" on top using CSS.

Where CSS goes

  1. Embedded Styles

    For quickly adding styles while you're experimenting on small pages, you can "embed" CSS code within the HTML document <head> by using the <style> tag.

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>Page Title</title>
     
    	<style>
    		CSS CODE GOES HERE
    	</style>
     
    </head>
     
    <body>
    	...
  2. Linked Stylesheet

    The preferred place to put your CSS code is in a separate file, called a "stylesheet". Then you add a <link> tag in the <head> of your HTML document to "connect" it to the stylesheet.

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>Page Title</title>
     
    	<link rel="stylesheet" href="yourstylesheet.css">
     
    </head>
     
    <body>
    	...

    The reason this method is preferred is because when you build a full website it allows you to have just 1 stylesheet for all of the HTML pages. This will help you keep the design consistent from page to page (and save you a lot of typing). For example, if you wanted to change your heading color, you could just modify it in one place (in the stylesheet) instead of having to edit every single HTML page across the entire site.

What CSS looks like

CSS styles contain 3 parts:

  1. Selector: the HTML element(s) or tags to style
  2. Property: which kind of style to apply (e.g. "background-color" or "font-size")
  3. Value: what the style will be (e.g. "yellow" or "24px")

For example, this CSS code will style all paragraphs on the page to have text that is bold and orange:

p {
	color: orange;
	font-weight: bold;
}

In the above example, the letter "p" is the selector (it means "apply these styles to all p tags on the page), "color" and "font-weight" are the properties (they determine which aspects of the paragraph to style), and "orange" and "bold" are the values (what the color and font-weight should be).

You can place as many (or as few) styles as you want inside the selector's curly braces.

Selectors

The selector is how you "target" the content you wish to style. There are several different kinds, the most useful being:

  1. Tag selectors

    Allows you to style all elements on the page that have a particular tag. To use a tag selector, just put the tag name into your CSS before the curly brace.

    h1 {
    	background-color: yellow;
    }

    These selectors are useful for setting baseline styles across your entire page (for example, the default body font or the default heading size).

  2. Class selectors

    Gives you more fine-grained control over what to style. For example, you might want to style some paragraphs, but not all of them. Using class selectors is a 2-step process:

    1. Add a "class" to the HTML tag(s) you want to style (so this goes in the HTML):
      <p class="important-message">Warning: do not press the button!</p>
    2. Put the class in your CSS with a dot before it:
      .important-message {
      	color: red;
      	font-weight: bold;
      }

    Choosing a class name is entirely up to you -- it can be anything you want (as long as it doesn't contain any spaces).

    The nice thing about class selectors is that you can put them on as many different elements as you want. For example, let's say you have this HTML:

    <h2 class="something-exciting">My Section Title</h2>
    <p>This is a boring paragraph</p>
    <p class="something-exciting">This one is much more interesting!!</p>

    Now in your CSS you can add this:

    .something-exciting {
    	background-color: yellow;
    }

    ... which will style the <h2> tag and the 2nd paragraph with the yellow background, but leave the 1st paragraph unstyled.

    Note that you can put as many different classes on the same HTML tag as you want -- just separate each of them with a space. For example:

    <p class="sale-item featured-item">This featured item is on sale this week.</p>
  3. Link selectors

    Lets you style <a> tags in different ways. You code these by adding :link, :visited, :hover, or :active to another selector (usually either the "a" tag selector, or a class of your choosing).

    1. :link - for styles that you want on links that have not yet been visited by the user.
      a:link {
      	color: #333899;
      }
       
      .special-offers:link {
      	color: #333899;
      }
    2. :visited - for styles that you want on links after they have been visited by the user.
      a:visited {
      	color: red;
      }
       
      .special-offers:visited {
      	color: red;
      }
    3. :hover - for styles that you want on links while the user is hovering over them with their mouse.
      a {
      	text-decoration: none;
      }
       
      a:hover {
      	text-decoration: underline;
      }

      In the above example, we first set a default style for ALL links to remove the underline, then we set a specific style that only applies to "hovered" links which will add an underline when the mouse is hovered over them.

    4. :active - for styles that you want on links while they are being pressed/clicked on. This is a very limited situation so most people don't bother with them (but they can be neat for links that have been styled to look like buttons).
      .my-cool-button:active {
      	padding: 2px 0 0 2px;
      }

Other (less-useful) selectors

You probably won't need to use these, but should be aware of them in case you see them around:

Combining Selectors

Selectors can be combined in various ways to give you very specific control over which page elements receive a certain style.

Order & Specificity

Sometimes the same style property for an element winds up with several different values. CSS will never combine two values together (for example, it will not add up two different margins or mix two different colors) -- instead it will choose one of the values over the other.

If the styles have the same selector, then the "last rule wins".

p {
	color: blue;
	color: red;
}

In the above example, paragraphs would be red (not blue), because the red color is listed after the blue color in the CSS code -- it is the "last rule", so it "wins" the conflict.

However, if two conflicting styles have different kinds of selectors, then it is not always the case that the "last rule wins". For example:

.something {
	color: blue;
}
 
p {
	color: red;
}

If you have a paragraph with the 'something' class on it (e.g. <p class="something">), it will wind up with blue text (not red) because class selectors are more specific than tag selectors. (And if you happen to be working with an ID selector, those are even more specific so they override both class and tag selectors).

Specificity can get very complicated, so the best way to avoid problems with it is to use tag selectors for your baseline styles and then use class selectors for everything else.