Using CSS

How and where do we write the CSS code to get it to change the presentation of your page?

Inline CSS

You can write CSS rules directly into your HTML elements using the style attribute. These rules will only affect the specific element with the attribute, and potentially any elements that it contains.

<p style="color: red;"><strong>Error:</strong> This contains error text.</p>

Error: This contains error text.

This is a <p> element with an inline style applied.

This would be extremely tedious if this were the only way to apply styles.

Local CSS

You can use the <style> element to write CSS rule directly on a web page. These rules will only affect the elements on the current HTML page. The <style> element can be placed anywhere on the page, though it’s usually placed at the top.

Open your index.html and add a <style> element into the <head> element at the top of the page.

Add the following rules into the element:

html {
  background-color: beige;
  font-family: sans-serif;
  font-size: 20px;
}

body {
  padding: 1rem;
  margin: 0 auto;
  max-width: 640px;
}

a {
  color: red;
}

Any rule written within the style element would effect the entire page. The end result should look like this:

Sample page with local CSS

We’ve changed the default background color, font family, and font size of the page; the padding, and maximum width of the content in the body; using the auto for the left and right margins, we’ve centered the content in the body; and we’ve set the default color the link for the page.

External Stylesheets

Declaring rules in a style element only make changes to the change that the element is on. To have the same styles on every page of your site, you can link to an external CSS file.

  1. Create a new file called styles.css and copy and paste the contents of the <style> element (but not the element itself) into the new file.

  2. Replace the <style> with the <link> element.

    <link rel="stylesheet" type="text/css" href="styles.css">

When you refresh, your page should look the same. Make sure the link element is typed correctly if it’s not working. When it is working, you can use the same <link> element on all of your pages to share the styles throughout your website.

You can view the stylesheet for The HTML Hobbyist for an example: styles.css.

CSS Resets and Normalizations

Any setting that you don’t explicitly set in your CSS will be provided by the browser. The problem is that every brand of browser has slightly different default styles. In the early days browsers had different default background colors. If you forgot to explicitly set your background color it would show white in one brand of browser and silver in another. The differences in the default settings of browsers led to the development of CSS resets and normalizations. The goal of both a reset and a normalize is to make the HTML in a browser appear the same in all browsers. They just have different ways of solving that issue.

A CSS reset removes the default browser styling.

CSS Reset

A CSS normalize makes the default browser styling consistent across browsers.

CSS Normalize

My personal preference is to begin with a normalize set of rules in my stylesheet. For the HTML Hobbyist website’s CSS, I didn’t apply a normalize or a reset. There may be subtle differences that show up between browsers, and I’m OK with that for this website.

Exercises

  • Create an external stylesheet and link to it from all of your pages.
  • Make all of your h2 elements navy.
  • Change the standard link color to red.
  • Use the :hover pseudo-selector to make the link turn green when you hover over it.
  • Use the :focus pseudo-selector to make the link turn green when you tab to it.