WDD 130 | An Introduction to HTML

An Introduction to CSS

Overview

CSS (Cascading Style Sheets) is a ruleset language that defines the style and presentation of an HTML document. CSS is made up of rules that select elements from the document and that contain style declarations. An HTML document can have zero to many CSS references.

"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

Read: 📄 CSS Basics - MDN
Watch: 🎦 What is CSS? | (4:07 mins, Transcript )

Activity Instructions

In this activity we will add a little style 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. If we want to add our own styles to this page we will use an external CSS file that will link up to the HTML page. This will allow us to keep our HTML and CSS separate and organized.

Create CSS Folder and File

In VS Code, with your wdd130 folder open, create a new folder on the wdd130 root directory named "styles".

Figure 1: Add new folder button in VS Code explorer panel
In the new styles folder, add a new file named styles.css

Figure 2: Add new file button in VS Code explorer panel

Your site folder structure should look like this:

Figure 3: Folder structure example

Write some CSS

Open the styles.css file and add the following CSS rules.
```
nav {
  background-color: steelblue;
  padding: 10px;
}
```
What is this?

This CSS rule names the <nav> element as the selected element to apply two style declarations.
1. The background color will be the color "steelblue", 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;
}
```
What is this?

This CSS rule names all the <a> elements 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: steelblue;
}
```
What is this?

This CSS rule references the <h1> element as the selected element and applies the following declaration:
1. The foreground, font color is set to steelblue.
```
img {
  width: 150px;
  height: auto;
  border: 1px solid steelblue;
  padding: 2px;
  box-shadow: 0 0 30px gray;
}
```
What is this?

This CSS rule references all the <img> 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;
}
```
What is this?

This CSS rule names all <p> elements as the selector and applies the following declaration:
1. Padding between the paragraph content and the border is set to 10 pixels.
Be sure to save your styles.css changes.

Figure 4: Example screenshot of home page with CSS

Link the CSS file to the HTML page

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">
        
```
Test the application of the style to your homepage by using Live Server. Right mouse click on the file name in the Explorer Panel in VS Code and select Open Live Server.
Make corrections if needed.

🎦 Watch: Activity Walkthrough Demonstration

Submission

Be sure to Commit and Push your changes to your wdd130 GitHub Pages site.

📑 Reference: Getting Started with the Web

CSS basics