Getting Started With CSS

Introduction To CSS

This section will focus on adding CSS (Cascading Style Sheets) to our project. CSS is used to add styling and layout to our web pages. This includes styling our fonts, colors, sizing, positioning, layout, direction of content, animations, and spacing.

Separating content (HTML) from presentation (CSS) enables projects to become more organized and scalable. By the end of this section, our project will look a lot different without adding any new HTML content to the page.

CSS syntax

CSS works by applying rules to HTML elements. These rules consist of selectors (to select elements) and declarations (to set style properties):

header {
    background-color: #2d877d;
    color: #f6f6f6;
    padding: 1rem;
}

header: This selector will select all header elements.
background-color: #2d877d;: Inside the curly braces {}, we set one or more declarations. These include the property to set such as background-color, and the value such as #2d877d.
color: This sets the color of the text, or decorative parts of the element.
padding: Padding creates space within the element. This will be covered in more depth later.

Hex colors

Values such as #2d877d are called hexadecimal (or hex) colors. The color is created by specifying the red, green, and blue values #RRGGBB. Values range from 00 to ff. Here are some examples:

Hex code	Visual	Description
`#000000`		If all are set to the lowest value of `00`, the color will be black.
`#ffffff`		If all are set to the highest value of `ff`, the color will be white
`#00ff00`		This sets the lowest values for red and blue, and the highest for green.
`#ff0000`		This sets the lowest values for green and blue, and the highest for red.

Each #RRGGBB value can be set to mix colors.

Where to add CSS

CSS can be applied in various ways:

Inline styles

A style attribute is added to a HTML opening tag, and will only affect a single element. Using a shortened version of the previous example, this is how we could set the background of the header:

<header style="background-color: #2d877d;">

Multiple styles can be set be separating each with a semi-colon.

You can try this in your project, this will only apply to the header on the page it was added to. Remove after testing.

Although this works, it is generally discouraged for various reasons:

This method mixes the CSS and HTML content, making it harder to read and understand.
If a style is changed, multiple pages may need to be edited.
This inefficient way of repeating styles will result in lots of additional, repeated code.

Internal stylesheets

Internal stylesheets are placed into a HTML <head> section, between the <style> elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width">
    <title>Online Store: Home</title>
    /* CSS Styles */
    <style>
      header {
        background-color: #2d877d;
        color: #f6f6f6;
        padding: 1rem;
      }
    </style>
  </head>

This separates the styling from the HTML elements, and allows these styles to be re-used across the page. However, this will need to be repeated inside each page they will apply to, causing more maintenance when updating.

Remove these styles from your project after testing.

External stylesheets

To address the issues from above, we can move our styles into a separate file, with the .css extension. This can then be linked to any HTML page. Styles can then be re-used across multiple pages, and a single source means style updates apply throughout the project.

Create a new file in your project folder called styles.css:

online-store/
├── images
├── dashboard.html
├── index.html
├── styles.css

Add the following styling to the styles.css file:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #252525;
    background-color: #f8f8f8;
}

header {
    background-color: #2d877d;
    color: #f6f6f6;
    padding: 1rem;
}

Link this file inside the HTML files by adding the <link> element inside the <head> section:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width">
    <title>Online Store: Home</title>
    <!-- link external stylesheet -->
    <link rel="stylesheet" href="styles.css" />
  </head>

<!-- dashboard.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width">
    <title>Online Store: Dashboard</title>
    <!-- link external stylesheet -->
    <link rel="stylesheet" href="styles.css" />
  </head>

<link>: This element is used to link the current document to an external resource.
rel="": This attribute declares the relationship, since we are linking to our styles, the relation is set to stylesheet.
href="": We provide the path to the file using the href attribute, similar to when using links <a href="dashboard.html">Dashboard</a>.

These styles are now shared across both HTML pages.

Dashboard Page Table And Modal CSS Selectors Header Styling