In Module 2 we started to learn the HTML language. In this module we are going to begin the sister language to HTML, CSS. HTML is for the website content, and CSS is for the website design. These two coding languages, HTML and CSS work hand-in-hand to build websites.

Introduction to the CSS Language

CSS is an Acronym for Cascading Style Sheets

Cascading: What is a cascade anyway? A cascade is a small waterfall that is falling down a usually rocky slope. A cascade isn’t a single trickle of water but one that seeks out many paths to the bottom. Just like a water cascade, the website browser cascades through the various styles sheets throughout the code. In class we have one style sheet, but a business website will typically have several CSS stylesheets. The browser follows a set of rules to decide which CSS to display after it cascades through all of the stylesheets.

Stylesheets are used by organizations and publishers. A style sheet will specify how a logo is used and which fonts and colors can be used for the organization’s branding. With CSS we use code to create the style sheet. MinnState doesn’t have a style sheet, but the State of Minnesota does have one. If you follow the link you will see that there are instructions on what colors to use and how to display the logo.

Because the CSS styles are generally kept outside of the HTML in a separate file, they can apply to all HTML pages. For example, in the Module 3 Lab we will make one stylesheet for Pacific Trails, and we will link the one stylesheet to both the index.html and yurts.html pages. 

What Does CSS do?

CSS is used to style a website with fonts, colors, background images, and layout. You can even make animations with CSS. Here is the definition of CSS from W3C:

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

https://www.w3.org/standards/webdesign/htmlcss

How does CSS work? Adding Inline CSS

Let’s look at a simple example for CSS as a warm-up activity.

To do this example, you need to know a couple of CSS Properties:

The background-color property is used for background colors. It looks like this.

background-color: yellow;

The color property is used for the text color. The code looks like this:

 color: black;

Now that we know a couple CSS properties, let’s try it out with a quick demonstration of inline CSS.

This video demonstrates how to add inline CSS.

Inline CSS Exercise

Open JSFiddle.net.

Add this code to the HTML section and click the Run button.

<h1>Hello CSS!</h1>

Add a text color inside of the h1 tag with the style attribute and click the Run button.

<h1 style=”color:blue“>

Add a background color with a semicolon in between each of the CSS properties:

<h1 style=”color:blue; background-color:red“>

The result should look something like this:

Cascading Styles

Now that we know a bit of CSS, we can look at how the CSS Cascades. In this video I demonstrate how the browser looks at conflicting CSS and decides on what to display.

Exercise: Cascading CSS

Go to JSFiddle.net. Type these inline styles into the HTML section.

<div style="background-color:gray">

<h1 style="background-color:green">Adding inline CSS styles</h1>
</div>  

Note that we have told the h1 to be both gray and green. 

When there are two styles for the background-color, which one wins?

The more specific CSS wins. If you are interested in learning more about it, check out this Mozilla article on Cascading.

I would add one more note about cascading. When working with CSS, the challenge (and the fun) is managing the cascading and making your own CSS “win” in the browser. When we make websites in this course, there is rarely a CSS conflict. (We will introduce some conflicts when we start working with Bootstrap in Module 11.) In working on larger business websites, there can be many conflicting style sheets. For example, this web page has more than 10 stylesheets.

CSS Syntax

CSS syntax has requires three definitions: the selector, the property and the value.

Selector: The “selector” selects the HTML. This can be an HTML Element or it also can be defined by an HTML attribute, like class and id. In the example below, the selector selects the <body> of the website.

Property: The property defines which aspect of the selector will be changed; for example, the color or the font.

Value: The value defines what the color, size or shape of the property. For example, if the property is “color”, then the value could be “blue”.

The selector is followed by curly braces, and the property:value statements go inside of the curly braces. The property and value are separated by a colon, and the property:value statement ends with a semi-colon.

CSS selectors SELECT which HTML to style. As the web developer, you are the giant hand making the selection by deciding on your CSS selector.

Three Ways to Add CSS to your Website

Option 1: Inline Styles

We already looked at inline styles in the example above, but here is an example in code:

<p style="color:blue; background-color:yellow;">The text is blue and the background color is yellow.</p>

Inline styles are:

• Added in the body of the web page directly into the HTML tag
• Use the style attribute in the HTML tag
• Apply only to the specific element
• In practice, used for a quick fix

We just added inline styles in JSFiddle. In class we generally won’t use inline styles.

Option 2: Embedded Styles

You can add styles to the <head>inside of <style></style> tags. This is often used in tutorials, where it is handy to have all the code in one place. 

<head>
   <style>
      body{ 
   	background-color: red;
  	color: black;
      }
   </style>
</head>

• Syntax is the same as an external style sheet
• Place in the HTML <head> in between style tags
• See the example on this video game: https://www.w3schools.com/graphics/tryit.asp?filename=trygame_default_gravity To keep the code in one file, the CSS is added to the website head.

Option 3: External Stylesheet

For external CSS, you create a separate code file with a .css file extension, usually named “style.css”. This is the best practice for adding CSS to your website project.

In this video I demonstrate how to add CSS in a stylesheet. We look at how it works in JSFiddle, and then in the next video we will add a style sheet to our template.

Exercise: External Stylesheet in JSFiddle

1. Go to JSFiddle.net

2.  Add a background-color and text color with external CSS

When you are done, your fiddle should look something like this:

Attaching an External CSS File

If the CSS is not in the same file as the HTML, how does the HTML know how to find it?

A website is a set of files that work together. The files are linked together in code. The code references the other files based on their location in the file structure. Here are some examples of references in websites:

<a href="yurts.html">Yurts</a> <!-- Relative Anchor Tag Link -->
<link rel="stylesheet" href="pacific.css"> <!-- Attaching a Style Sheet -->

We learned how to make links in Module 2. The href attribute specifies another file in your website project. To link a stylesheet we do something similar. Instead of referencing another HTML page, we reference the location of the CSS stylesheet. The reference we provide is IN RELATION TO the file we are working on or looking at. In the screenshot below, you can see that the HTML and CSS files are in the same folder. This makes it easy to reference the CSS file from the HTML file.

If you would like to read more about the magic of references, read this article on Files and Folders.

In this video I demonstrate how to add an external stylesheet to your website project.

Exercise: Add the CSS reference to your HTML file

1. Go to your templates folder
2. Open your templates/index.html file
3. Add this to the head:

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

Now, create a file in your template folder called, style.css.

Now we need to test our code to make sure our external style sheet is correctly referenced. Type in the code below, save, and view it in a browser.

Is your text blue with a yellow background? Do a little happy dance, because you did it. Congratulations!

If the test didn’t work, then try the following:

1. Make sure you saved both the HTML and the CSS files
2. Make sure you refreshed the browser
3. Make sure that your HTML and CSS files are in the same folder. The referencing we added only connects files in the same folder.

Colors

Color Syntax Options

1. Color name (eg. purple, blue, green)
2. Hexadecimal or Hex numbers (eg. #FFFFFF)
3. RGBA (to include opacity)

Here is how you code all three types of colors.

color: purple; /* Color name */
color: #800080; /* Hex Number */
color: rgba(128,0,128,1); /* RGBA with opacity */

In addition to these three, there are other ways to add colors, but in my work as a web developer I haven’t used them. I usually use Hex numbers. I only use color names when I am testing something, because web designs need the specificity of a Hex number. I use the RGBA numbers when I want to use add opacity, which means that I want the website visitor to be able to see the background image behind my text.

Here are some of my tricks of the trade in working with colors:

• Use Color Picker tool at W3 Schools to find hex numbers for colors
• Invest in a color picker tool. Use colors from key images, like the logo
• Use hex colors unless you need to set the opacity and then use RGBA
• Try the Adobe tool for color selection: https://color.adobe.com/create

Hexadecimal Colors

When adding colors to a website, you will most frequently use a hexadecimal number. This video demonstrates how to find a hexadecimal number at W3 schools and apply it to your website design.

Exercise: Hex Colors

Open JSFiddle.net. Pick out some hexadecimal colors from W3 Schools and add them to JSFiddle. Your Fiddle should look something like this:

The Trick to Transparent Text (hint: use RGBA colors)

The trick to putting transparent text on to your website is to use RGBA colors instead of hexadecimal numbers. With the RGBA colors, you can set the opacity of the color. RGBA stands for Red Green Blue and Alpha.

This video walks you through adding an <h1> with see through text.

Exercise: RGBA Numbers for Opacity

1. Open JSFiddle.net
2. Cut and paste the following code into the CSS Section. (There is some code that we haven’t covered yet, so just cut and paste it over.)

body{
background-image:url(http://whitebuffalosolutions.com/WB-Template/images/photo1.jpg);
}
h1{
  color: rgba(255,255,255,.5);
}

2. Add a title in <h1> tags in the HTML Section
3. In the code rgba(255,255,255,.5), the last of the four numbers in the parenthesis is the opacity level. Try changing to .8. Run. Try changing it to .2. Run.

Your JSFiddle should looks something like this:

As you can see, using RGBA colors is a nice trick for adding text that you can see through!

Font Family and Google Fonts

The font-family property sets the font choice for a website. The CSS code looks like this:

p { 
   font-family: Arial, Verdana, sans-serif; 
}

• This code instructs the browser to first look for the Arial font. 
• If Arial  isn’t available, then use the Verdana font. 
• If Verdana isn’t available, then use the default sans-serif font for the browser. 

It is typical to list out at least a couple fonts, in case the preferred font isn’t available on the user’s browser.

Web-Safe Fonts

There is a short list of fonts that will work in all browsers. If you want to use a different font, you need to install the font-family on the website.

For a complete list: Web-safe fonts 

Web-safe fonts are generally available on all browsers. You can see five of them on the image in the below. 

Most websites use Google Fonts instead of Web Safe Fonts because they are very easy to install on a website.

Google Fonts

See the Google Font choices at fonts.google.com

Google Fonts are FREE! 

There are two steps to using a Google Font. 

1. Import the font stylesheets. Cut and paste them from Google.
2. Add the font to specified CSS selectors. You can add it to the body, and it will apply to the entire website.

Just a quick note of caution. While Google Fonts makes it easy to install more fun fonts on your website, you want to only choose one or two per website. The fonts load on to the user very quickly, but adding a lot of fonts will slow down how fast your page loads.

When you choose a font for your website, you may want to choose a fancier font for headings. If you do, make sure you choose a font that is easy to read for the paragraph text.

This video demonstrates how to choose and install Google Fonts on your website.

Exercise: Google Fonts

First, lets try this out in JS Fiddle.

• Go to fonts.google.com
• Pick out a Display font
• Install in on JSFiddle with the @Import

Your JSFiddle should look something like this, but the font that you chose.

Note that on the example above, the Rubik Maze font is available to the entire website, but I only selected to use it on the <h1> elements.

Now that we have the hang of Google Fonts, let’s add a Google Font to your website template.

Go to fonts.google.com

Pick out one or two fonts. For your text font be sure to choose out a bold font. 

Place the @import at the top of your CSS file in your website template

Select body, and add the regular text font

If you have a special font for headings, Select h1 and add the font 

The code in your CSS file should look something like this, but with your font choices:

@import url('https://fonts.googleapis.com/css2?family=Barrio&family=Lato:wght@300;700&display=swap');

body{
   font-family: 'lato', sans-serif;
}

h1{
   font-family: 'Barrio', cursive;
}

Note that in the example above, the Lato font with apply to the entire website, since the selector is <body>. For the <h1> headings, we are overriding the Lato font with the Barrio font.

Font Size and other CSS Text Properties

You can use pixels (px), EMs (em), or percentage (%) to set the font size. Most developers use EM, but in some cases they may use PX.

EMs are best practice, because the browser adjusts their size based on the screen selections of the website user. EM is an acronym for ephemeral unit. Generally, there are 16 pixels in one EM.

As shown in the code below, “em” is used for EMs, and “px” is used for pixels. Note that there is no space between the number and em or px.

p{
   font-size: 1em; 
}

p{
   font-size: 16px; 
}

Other CSS Text Properties

There are a many other text properties. Listed below are the most commonly used text properties.

font-weight: the value would usually be “bold” or “normal”

text-align: You can use this property to align the text to center, right or left. Left is the default.

line-height: This is the spacing between each line. A nice setting is 1.5.

letter-spacing: This is the spacing between each letter. It makes a nice effect on a heading.

h3{
   font-weight: bold;
   text-align: center;
   line-height: 1.5;
   letter-spacing: 2px;
}

In the example above, the <h3> headings would be set to bold, the text is aligned to the center, the line-height if the text wraps is 1.5, and the spacing between the letters is 2px.

Exercise: Font Size and Other CSS Text Properties

1. Open JSFiddle.net. 
2. Add some text to the HTML section with HTML markup. 
3. Modify your font-size with in the CSS
4. Try the following CSS properties.

• font-weight: normal|bold
• line-height: Eg. 1.5
• text-align: left|right|center
• letter-spacing: Eg. 2px

Here is some HTML to get you started on the exercise:

<h1>
Placeholder Text
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Your JSFiddle should look something like this:

Classes and IDs

Classes and IDs are part of both the HTML and the CSS languages. As web developers we use classes and IDs to select HTML with more precision. But before we jump in to that, we need to review HTML attributes.

HTML Attributes

Attributes modify the HTML element. In the example below, the h1 element is modified with the attribute class=”headline”.

<h1 class="headline">My Headline</h1>

To add an attribute, first type a space after the element, the = and then place the value in quotation marks. Most elements have attributes and sometimes an element will have several attributes, like this:

<h1 class="headline" id="headline">My Headline</h1>

Note that there is a space between the attributes. Without the space the attributes won’t work.

Here are some HTML Attributes

href=””

lang=””

class=””

id=””

IDs and Classes are used to make a more precise selection of HTML. They are used similarly, have one important difference.

• Use id when you need an CSS only once on the page.
• Use class if the CSS may be used more than once on the page. 

For CSS, classes are generally used instead of IDs, because they can be reused on the page. Before HTML5 and the addition of the semantic elements websites used an ID to identify where a section was on a page, eg. <div id=”footer”> or <div id=”nav”>. IDs are used more frequently with JavaScript. If you aren’t sure which one to use, use a class instead of an ID.

Syntax for Class and ID in Two Languages

Here is the complicated part. CSS and HTML are different languages, and so you write the code differently in the HTML and CSS.

As you can see, in the HTML, you type out the word “class”. In the CSS, there is a shortcut, and you simply type a period. For the ID, you type out “id” in the HTML, but in the CSS you simply type a #.

The syntax is different because the languages evolved separately.

Using class and id Attributes to Select HTML Elements

This video demonstrates how to use class and id as CSS selectors.

Exercise: Classes and IDs

Open JSFiddle. Add an element in the HTML and add a class to it. Now select the class in the CSS. Repeat it with an ID. Your JSFiddle should look something like this:

Using <span> and <div>

<span> and <div> are generic elements you can add in order to select parts of the websites. We will be learning more about the difference in Module 5, but for now, use a <div> around a larger section and use a <span> in the middle of a sentence.

For example, if you want to select the company name to change the CSS, you would select it with a span and add a class to it, as follows: 

<p>We can help you make a website at <span class="company-name">Platypus Web Design</span>.
We will work with you to build your website.</p>

How to Center Content on a Web Page

Before HTML5 you could simply center content with <center> tags. The <center> tags are now obsolete.

If you want to center text, you can simply apply “text-align:center”. But how do you center larger sections and images?

You can center a block element by setting the margin to auto on both the left and right sides. (We will learn more about block in future modules.) The code below is used to set the main section of the website to a maximum width of 800px, and then center it horizontally. To center something, you start by adding a max-width to it, like 800px or 80%, and then add set the margin-left and margin-right to auto.

main{
   margin-left: auto;
   margin-right: auto;
   max-width: 800px;
}

This video demonstrates how to center content on JSFiddle.

Exercise: Centering a Web Page

Open JSFiddle.net. Add some content and add a div with the id of wrapper around it. Center it. Your JSFiddle should look something like this:

Pacific Trails Lab

The lab for this week is the Chapter 3 Pacific Trails Lab in the back of the textbook.

Frequently Asked Questions