WDD 130: Web Fundamentals

An Introduction to CSS

Overview

CSS (Cascading Style Sheets) is a rule set language that defines the style and presentation of an HTML document. CSS rules select elements from the document and contain style declarations.

"Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements ... CSS is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features." - MDN

Prepare

Activity Instructions

In this activity, you will add some style declarations to your course home page.

Currently your home page (index.html) has default styling applied by the browser that renders the page. For example the <h1> element is styled as larger and bolder. In this activity, we will apply custom styling.

Create CSS Folder and File

  1. In VS Code, with your wdd130 folder open, create a new folder in the wdd130 root directory named "styles".
  2. In the new styles folder, add a new file named "styles.css"
    Demonstration of adding the folder and file within that new folder.

Write some CSS

  1. Open the styles.css file and add the following CSS rules. 
    nav {
  background-color: darkblue;
  padding: 10px;
}

    This CSS rule names the <nav> element as the selected element to apply two style declarations.

    1. The background color will be the color "darkblue", which is a valid, named color.
    2. Padding, or area between the content and border is set to 10 pixels for readability. 
    nav a {
  color: white;
  display: block;
  padding: 20px;
}

    This CSS rule selects all the <a> (anchor / link) elements in the HTML that are children of the <nav> element and applies the following declarations:

    1. The foreground or font color will be white.
    2. The display will change from the default of inline to block.
    3. Each anchor tag will have padding of 20px;

    h1 {
  color: darkblue;
}

    This CSS rule references the <h1> (heading 1) element as the selected element and applies the following declaration:

    1. The foreground, font color is set to darkblue.
    img {
  width: 150px;
  height: auto;
  border: 1px solid black;
  padding: 2px;
  box-shadow: 0 0 30px gray;
}

    This CSS rule references all the <img> (image) elements as the selector and applies the following declarations:

    1. a set width with a height that will adjust dynamically to fit the image's aspect ratio.
    2. A border shortcut that names the width, type of border, and color of the border.
    3. Padding between the image and the border.
    4. A box shadow around the image border with zero offset and depth of 30px in gray. 
    p {
  padding: 10px;
}

    This CSS rule selects all the <p> (paragraph) elements as the selector and applies the following declaration:

    1. Padding between the paragraph content and the border is set to 10 pixels.
  2. Be sure to save your styles.css changes.
Example screenshot of home page with CSS
Example home page with CSS applied

Link the CSS file to the HTML page

  1. Open the index.html file and add the following line in the <head> section of the HTML document. 
            <link rel="stylesheet" href="styles/styles.css">
  2. Test the application of the style to your homepage by using Live Server. To do this, right mouse click on the file name in the Explorer Panel in VS Code and select Open Live Server.
  3. Make corrections if needed.

Video Demonstration: ▶️ Activity Walkthrough

Remote Render and Test

  1. In the VS Code Source Control area, publish the site with these additions and changes by committing with a message and syncing to your wdd130 GitHub Pages remote site.

    Publishing activities is good practice and the process will become more routine. Remember that the message you write with the commit is for you to give the commit some context.

  2. Open up your GitHub Pages rendered URL to test the page.

Optional Resources