Introduction to Web Design: Cascading Style Sheets (CSS) and Responsive Design

5.0. Overview

We've got a few webpages linked together at this point, but websites in "the real world" are quite a bit more complicated (and look quite a bit nicer) than ours at this point!

Websites in "the real world" are sometimes more complex, and may have entire teams of people working on them. Even an individual working on a website may find it a challenging and complex process. If you get interested in developing websites, you have options:

code by hand ( www.learnapphysics.com )
use a blog-style service ( wordpress.com )
use an online cloud-based solution ( squarespace.com or wix.com )

If you decide to get involved in working on the web, the more you know about HTML, CSS, and JavaScript, the better you'll be able to take care of things, whether it's coding a site or managing one.

We've already gotten some HTML figured out, so let's look at how we can make our site look good.

5.1. Intro to Cascading Style Sheets (CSS)

If HTML is focused on the content of our website, CSS is concerned with the styling: What fonts are used? What color schemes? How does the menu work? How are graphics images displayed? What does the website look like when viewed on a phone?

Once you have a basic HTML website established, you can start working on developing a system for styling it.

There are three different strategies, and each can be useful.

5.1.1. Inline styles

We have a paragraph in our website that has been defined this way:

<p>If you've had to stay inside for a long period of time, either because of health concerns or civil unrest, you know that it can be stressful.</p>

If we want to color the test of this paragraph red, we can do so by specifying that "style" in-line with the rest of our markup. It would look like this:

<p style="color: red;">If you've had to stay inside for a long period of time, either because of health concerns or civil unrest, you know that it can be stressful.</p>

By specifying the style for that paragraph, every letter in that paragraph will be colored red.

But what if we wanted all of the paragraphs on this page to be colored red?

5.1.2. Internal styles

Another way of describing styles is by specifying them for the entire page, with a style-description included in the head section of the webpage (not the header):

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Example Page</title>
    <style>
        p { color: red; }
    </style>
</head>

This will work great for a single page. But... what if we want every paragraph on our entire website to be colored red?

5.1.3. External styles

An external stylesheet can describe all the styles for a website. Every single page on the website can refer to that one stylesheet, and they will all follow the rules indicated on that sheet.

The reference to that stylesheet occurs in the head section as follows:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Example Page</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

And what is in that style sheet, the file style.css ? A whole series of style descriptions, perhaps including this one:

p  {
    color: red;
    font-style: italic;
    line-spacing: 1.2em;
}

There are a few other style descriptions that I slipped in there, and they'll all be applied to every paragraph on our entire website.

5.2. Adding Styles to our Website

Let's go through and add a series of styles to our external style sheet. We'll add the styles one at a time and see what kind of effect that has on our pages and site.

Before we get started, let's copy our old site into a new project. We've done a good job so far with our first version of the website, and we don't want to risk losing that version of the site.

We could manually copy all the pages from 03-sampleWebsite into 03-sampleWebsite2 or something similar, but why don't we fork it instead? That will make a complete copy of everything that we've done so far, and then we can work on that new version.

Make sure that in repl.it that you've switched over to that new version, and then let's look at the styles.css document. This is where we'll begin writing our styles.

5.2.1. Site and page styles

Let's style the general html and body of our document by establishing some general settings:

/* Default styles for mobile-friendly, "responsive" small-width browsers*/

html, body
{
    margin: 0;
    border: 0;
    padding: 0;
    background: #3B6AA0;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 100%;
}

"Run" the page in repl.it and see what our new webpage looks like!

Let's style the "header" div, as well as the actual text inside, and the footer as well:

header, footer, header h1
{
    margin: 0;
    border: 0;
    padding: 0.25em;
    background: #3B6AA0;
    text-align: center;
}

"Run" the page. Is it looking any better?

Let's ignore the menu for the moment and style the "main" (content) section, including the links that appear in this section:
```
main
{
    margin: 0;
    border: 0;
    padding: 1em;
    background: #D9E5F2;
    overflow: auto;
}

a:link, a:visited
{
    color: #703FC6;
    font-weight: bold;
}

a:hover, a:active
{
    color: #000000;
}
```
"Run" the page, and try moving your mouse over the link in the content page. Does it work as it should?

It's time to turn our attention to the menu, which is perhaps the trickiest part of the page.

nav
{
    margin: 0;
    border: 0;
    padding: 0;
    background: #D49E30;
    overflow: auto;
}

nav ul
{
    margin: 0;
    border: 0;
    padding: 0;
}

nav li
{
    margin: 0;
    border-style: solid; 
    border-width:0 0 1px 0;
    border-color: #000; 
    padding: 0;
    list-style-type: none;
    display: block;
    width: 100%;
    text-align: center;
    float: left;
}

nav li#here {
    display: none; 
    }

nav a:link, nav a:visited
{
    margin: 0;
    border: 0;
    padding: 0.5em;
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bold;
}

nav a:hover, nav a:active 
{
    background: #F3A812;
    color: #703FC6;
}

Let's style the links in the footer.

footer a:link, footer a:visited
{
    color: #fff;
}

footer a:hover, footer a:active
{
    color: #000;
}

And, let's style our img tag so that the images will take up the entire width of the page.
```
img
{
    margin: 0;
    padding: 0;
    width: 100%;
}
```
[Optional] We can create out own class of styling by declaring a custom class. Let's say that we want some of our images to only take up half the width of the page. In the style.css sheet include these lines:
```
img.half
{
    width: 50%;
    display: block;
    margin: 1em auto;
}
```
This defines a class called "half" that we can specify for any images that we want to have these properties. In the help.html file now, change the img line to this:
```
<img src="assets/sunken_city_rock2.jpg" class="half" />
```
Take a look at the Help page and see how the image is displayed now.

Each one of these styles is important for getting our menu to work the way we want it to. Once you've got them entered in, "run" the page again and see what our menu looks like now.

At this point, we hope we've got a functioning website. You can make changes to the colors and make other tweaks as you wish, but keep in mind that it's very easy to "break" CSS with a simple change. You probably want to make a backup copy of your work before you begin to make too many changes.

5.3. Colors on a Website

Choosing specific colors and/or color themes for a website is a complex subject that we won't be able to spend much time on here. Certainly you want to be able to specify colors for different parts of your website.

You can find lots of information on how to choose and identify colors for your website at these links:

5.4. Mobile-friendly websites

Up to this point this website has been tested by viewing it on a computer screen that is in "landscape-mode," wider than it is tall, but it actually looks good on a phone, in "portrait" mode. This website is mobile-friendly, meaning it looks good on a phone, where a large amount of web traffic comes from.

If you want to website to also look good on a desktop browser in landscape mode, we should make the site "responsive," ie. able to flow and adjust itself to viewing in different contexts.

We're going to do that primarily by creating CSS that will change how the menu looks when it's viewed on a wider browser window:

/* Desktop-friendly "responsive" styling for 
                         wider browser windows */
@media (min-width: 600px) 
{
    nav li {
        border: 0;
        width: 33%; // This is an important change
    }
    
    nav li#here {
        padding: 0.5em 0;
        background: #F3A812;
        color: #703FC6;
        display: block;
    }
}

"Run" this new version of the code in repl.it, and use the handles on the browser pane to adjust the window back and forth between a narrow width and a wider width. You should see the webpage adjust accordingly.

5.5. Header Image

We've already seen how you can bring in image into a website. Sometimes it's nice to be able to use an image as part of the header for your document.

Get a copy of this image of trees_and_sky.jpg and move it into the assets folder of your website.

In the style.css document, include:

header
{
    background-image: url("trees_and_sky.jpg"); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

5.6. Debugging CSS

Our website isn't quite working yet! We have some bugs, some issues that are preventing it from working as intended.

The trees_and_sky.jpg graphic isn't showing up in the header as I wanted it. What's wrong with our code in the header instructions in our style.css file? Let's go ahead and fix that.

5.6.1. Still not working

Even once you get that fixed, the image won't be showing up correctly. The header h1 styling in style.css seems to be obscuring the image. How can we fix that?