Skip to main content

3. CSS & Modular Design

Modular web design​

When using a modular approach to website design, we are separating concerns.

Each component used to build the website serves a specific and distinct purpose. These components may be replaced and modified as needed with little disruption to the website as a whole.

Using modular design techniques can improve performance and make it easier to maintain your website.

This building block approach utilizes 3 main types of website components:

  1. HTML for structure.
  2. CSS for presentation.
  3. Programming languages, such as JavaScript, for behavior (interactive capabilities).

The most important concept in modular web design is the separation of structure and presentation.

The structure of your web pages is controlled by your HTML code.

The presentation aspect, which includes the layout, colors, typography, and the overall "look" of your web pages, should be controlled by CSS styling.

CSS​

CSS is used to control the presentation (or style) of a website.

In HTML5, older HTML elements that deal with presentation have been deprecated (no longer recommended) with the expectation that you will use CSS to control all styling.

The basic format for CSS code:

selector {
property: value;
}

The selector is the element that you want to style. For example, it could be "p" to select paragraph elements for styling.

The property describes the type of styling you want to apply to the element.

The value is the option you choose to use based upon the allowed values for the given property.

p {
color: #000000;
}

CSS properties and allowed values can be found on the W3Schools website.

Each line with a property and value is known as a "declaration".

The list of declarations must be enclosed within an opening and closing curly bracket. And there must be a semicolon between each declaration.

p {
color: #000000;
letter-spacing: 1px;
}

As a side note, see this color chart to find color codes (such as #000000). More can be found from a Google search. Or you can use an eyedropper tool to get colors from the web pages you visit.

Should you use color codes or color names? (e.g., #000000 or black?)

Either is fine.

But there is not a name for every color.

There are nearly 17 million possible colors when using color codes.

There are only about 140 CSS color names.

CSS code format​

People have different opinions about how CSS code should be formatted. For example, some prefer indenting each declaration:

p {
     color: #ffffff;
     letter-spacing: 1px;
     font-weight: bold;
}

Others prefer to do it all in one line:

p {color: #ffffff;letter-spacing: 1px;font-weight: bold;}

I don't like the latter method because it is more difficult to read. But maybe that's just me.

There are three ways to apply styling to your web page:

  1. Inline styling applied to individual HTML elements.
  2. Internal CSS in the page head
  3. External CSS in a separate file <--- The Modular Way

Inline CSS​

Inline styling can look messy and make your code difficult to manage. It is sometimes used out of laziness when an external stylesheet would be more appropriate. However, it also has some practical uses.

For example, it comes in handy when creating HTML emails. You may also need to use some inline styling when creating posts in a content management system, such as WordPress.

We will use inline CSS in this next practice exercise just to get acquainted with the concept. We won't use it again during this course.

The format for inline styling is just a bit different from the CSS example I gave above. When applying inline CSS, a selector with curly brackets is not needed. You are specifying what you want to style by adding it to that particular element's tag.

Here's an example of inline styling:

<p style="color: #ffffff;">Some text.</p>

This will make the text in the paragraph element white: #ffffff

style is an HTML attribute and your CSS declarations are the value for this attribute.

To add a new CSS declaration, simply add it after the semicolon.

A semicolon isn't actually required after the last declaration. But it might be a good idea to get in the habit of adding that semicolon after every declaration. If you forget a semicolon where it actually belongs, all of hell may break loose :)

<p style="color: #ffffff; letter-spacing: 1px;">Some text.</p>

Internal stylesheets​

Internal CSS is placed in the <head> element of your web page and only applies to that particular page. Your CSS code must be contained within the <style> HTML element.

<!doctype html>
<html lang="en">
   
   <head>
   
      <meta charset="utf-8">
      <title>My Title</title>
      <meta name="description" content="My description.">
      
      <style>
   
         p {
           color: #ffffff;
           letter-spacing: 1px;
         }
   
         h2 {
           color: #decb81;
         }
   
      </style>
   
   </head>

Internal CSS is also referred to as embedded CSS.

External stylesheets​

Using external stylesheets is the correct way to apply styling to your web pages in a modular way.

The <link> element is used to provide the path to a CSS file. It would need to appear in the head of each page of the website.

<!doctype html>
<html lang="en">
   
   <head>
   
      <meta charset="utf-8">
      <title>My Title</title>
      <meta name="description" content="My description.">

      <link rel="stylesheet" href="style.css">
   
   </head>

Notice that we have the attribute="value" format again. This time we have added 2 attributes and their corresponding values:

<link rel="stylesheet" href="style.css">

The rel attribute, which is short for "relationship", is used to communicate that this is the stylesheet for this page.

And the href attribute provides the URL to this file.

Notice that, in this example, a relative URL is used to provide the location of the CSS file. In this case, only the name of the file is provided.

This URL is communicating that the HTML file and the CSS file are in the same folder together. Since that is the case, no further directions were required.

When the browser loads this page, it will also load this external stylesheet and apply the styling provided to the web page.

Each page of the website could have a stylesheet link that provides the URL to this same CSS file.

See how easy it would be to make changes to your entire website just by making changes to this one CSS file?

Creating an external CSS stylesheet​

An external CSS stylesheet is simply a text file containing CSS code.

The file needs to be named with a .css extension. The primary stylesheet for a website is often named style.css or styles.css

Classes and IDs​

Classes and IDs are used to assign names to elements in the HTML.

For example:

<h1 class="page-title">

In my CSS code, I can now refer to that particular h1 element using .page-title

To create a class selector, you use a period followed by the class name used in the HTML:

.page-title {
color: red;
}

Or I could use an ID instead:

<h1 id="page-title">

IDs are declared in your CSS by using the hash symbol (#) followed by the ID name that you assigned in the HTML:

#page-title {
color: red;
}

You can be more specific with your CSS selector by also specifying the name of the HTML element you want to style:

h1.page-title {
color: red;
}

p#monkey {
color: brown;
}

Class and ID names can be whatever you would like. However, IDs and classes can't contain spaces.

And the name of each ID in a page needs to be unique. Something with an ID represents a unique item on a page.

For example, if you use this...

<p id="monkey">

You can't use "monkey" as an ID for any other element in that page.

However, the same class name can be used multiple times in the same page.

Can you add more than one class to the same element?

YES!

Simply add a space between class names, such as:

<p class="first second">

This <p> element has been assigned 2 classes: One named first and another named second.

Should you use a class or ID?​

Most web designers today no longer use IDs for CSS styling.

There is sound logic behind this approach, which is explained here. As you get more advanced, you may begin to see these advantages.

However, when learning, feel free to explore using both classes and IDs. Make mistakes, get frustrated, learn, and come to your own decision about this matter.

But if you are unsure about whether to use a class or ID, it's probably best to choose a class.

Intra-page links​

Since we have just introduced the concept of IDs, it seems appropriate to jump away from CSS a bit and discuss intra-page links. It will give you a better idea of why IDs can be important for identifying one particular item on a page.

Let's say you have a page containing a long article with several sections. Here's one of the sections in that article:

<h2 id="baked-potato">Baked Potatoes</h2>
<p>Baked potatoes are made from potatoes. These potatoes are baked.</p>

And let's say that you want links at the top of the page that will take you to the different sections in the article. This can be accomplished by referencing the element's ID using the hash symbol:

<a href="#baked-potato">Baked Potato</a>

When clicked, this link will take you to the element in the page that has an ID named baked-potato.

Intra-page linking is one of the reasons that you don't want to use IDs more than once in the same page. An element with an ID needs to represent a single, unique element in that page.

intra-page links are also referred to as anchor links.

CSS Validation​

In the previous lesson, we began checking HTML validation. Now, we will also start checking CSS validation using this tool:

https://jigsaw.w3.org/css-validator/

If some of your CSS code isn't working, check CSS validation. Errors can prevent things from working.

The validation message will show you the general location where the problem was found. Your syntax error might be in that area or somewhere prior to that.

The problem is most often something super simple—often involving semicolons or curly brackets.