UD Logo
School of Education
Textbook Cover

Computational Thinking on the Internet

Chapter 8: Cascading Style Sheets

After completing Chapter 8, you will know how to:

End of Chapter Labs

Lab Project 8.1: Color Encoding on the Internet

When you work with cascading style sheets, it helps to understand how colors are encoded. Instead of showing you the color itself, style sheets use color notations whereby the color is expressed in codes that tell the browsers what colors to make onscreen.

If the world were all black and white, you would only need two color codes, namely, 0 for black and 1 for white. Instead, there are millions of possible colors that your browser can display onscreen. Follow this YouTube link to see the co-founder of Instagram, Kevin Systrom, explain how these colors are encoded.

As Kevin Systrom explains, the Web uses a red-green-blue (RGB) color model in which there are 8 bits of precision for Red, 8 bits of precision for Green, and 8 bits of precision for Blue. This makes for 24 bits of precision in all. If you were to use decimal numbers to express colors with this much precision, the values would range from 0 to 16,777,216, which is how many colors your browser can display. Putting numbers like that into your CSS would make it pretty hard for you to understand the colors you are mixing, and it would be time consuming to type all those numbers.

To make this more straightforward, CSS lets you create colors using a notation called a hex triplet, where hex stands for hexadecimal, which means the number base is 16. In hexadecimal, the numbers go from 0 to F. If you were to count from 0 to F, the count would be 0 1 2 3 4 5 6 7 8 9 A B C D E F. As you can see, this makes for 16 different numbers. However, sixteen numbers are not enough. Out on the Web, each component of Red, Green, and Blue can have up to 256 different values. To count this far in hex, you need to add another place. Then you can count in hex from 00 to FF, which gives you the 256 values you need because 16 * 16 = 256 in decimal.

In a hex triplet, the color values range from #000000 (black) to #FFFFFF (white). The first two numbers in the hex triplet are the amount of Red, the next two numbers represent Green, and the last two numbers are Blue. Thus, the form of the hex triplet is RRGGBB. Colors can have 256 different amounts of Red, of Green, and of Blue. The number of different colors this can make is 256 * 256 * 256 = 16,777,216.

You can start to become familiar with hex triplet notation by looking at the pure color codes. Pure red, for example, is #FF0000. Pure green is #00FF00, and pure blue is #0000FF.

Happily, there are tools that mix the colors for you and tell you what are the corresponding hex codes that will make those colors in your CSS. For a list of color mixing tools, follow this link to Color Picker. For more details regarding the Web’s color model, follow this Wikipedia link to Web Colors.

In this Lab, your task is to explore the various Web colors and create a stylesheet assigning the colors you have chosen to the various elements on your Web page. If your instructor has assigned you to hand in your work on this lab, you may either submit one HTML file in which your chosen styles are defined in an embedded stylesheet, or you can submit two separate files with one containing your CSS and the other your HTML.

Lab Project 8.2: Bootstrap Web Design

As an app that is wildly popular on mobile devices but is also used on desktops and widescreens, Twitter faced the challenge of making its content appear well across the wide range of screen sizes. To make this work, Twitter created a framework called Bootstrap that uses a combination of HTML, CSS, and JavaScript to permit Web designers to create responsive designs. Bootstrap has become wildly popular in modern Web design. In this computational thinking module, you will accomplish the following learning objectives:

Bootstrap Tools

Due to the popularity of Bootstrap, an increasing number of web creation tools include support for the Bootstrap framework. Nevertheless, many web designers prefer to code by hand, so to speak, which means to use a code editor to create your Web pages instead of a more fully functioned tool. Listed here are tools you can explore in order to decide what approach you would like to use in creating your own Bootstrap web designs:

Installing Bootstrap

Depending on the tools you choose for developing your Bootstrap website, you may not need to install Bootstrap directly, because it is built into some of the tools. If you decide to use Dreamweaver, for example, Dreamweaver automatically installs the Bootstrap runtime folders into your website. If you are coding manually, on the other hand, you will need to download the Bootstrap installer, which is a zip file that creates the Bootstrap runtime folders when you unzip it. You can download the Bootstrap installer via the Download button at the Get Bootstrap page.

You can also download the Bootstrap examples by following this link to the Bootstrap examples. They include a copy of the Bootstrap runtime folders, which power the examples. After you unzip the Bootstrap examples, you will find more than a dozen examples in the \docs\examples folder.

For a fantastic overview of Bootstrap's features, be sure to surf the examples in the Bootstrap Expo.

Using Bootstrap with Atom

This book's HTML, CSS, and JavaScript tutorials used Atom as your plain text code editor. Likewise, you can use Atom to create Bootstrap web designs. When you think about it, because Bootstrap comprises the same kinds of HTML, CSS, and JavaScript filetypes you have already learned to edit with Atom, of course you can use Atom to edit Bootstrap web designs.

To use Bootstrap with Atom, follow these steps:

  1. Use Atom to open the project in which you want to use Bootstrap. If you have not yet created the folder that will contain your project, use Atom’s File→Add Project Folder tool to create the folder now.
  2. Download the package that says "Compiled CSS and JS" from getbootstrap.com/getting-started. Make sure to download the version that comes with already compiled CSS/Javascript.
  3. Run the bootstrap package you downloaded in the previous step; running the bootstrap package creates a bootstrap folder on your computer.
  4. Use the Windows Explorer or the Macintosh Finder to inspect the bootstrap folder. Notice how the bootstrap folder contains two subfolders named css and js. Use the Windows Explorer or the Macintosh Finder to drag and drop these folders into your project’s folder. If you are creating the page in your website folder, for example, when you are done with this step your website folder will contain the subfolders website\css and website\js.
  5. Use Atom’s File menu to create a new page upon which you will try Bootstrap. In this example, name the page MyFirstBootstrap.html.
  6. Copy and paste the “Hello World” sample code that the Bootstrap site provides in their basic template.
  7. Use your browser to run your page and see how it renders onscreen.

After you get the basic template running, you can explore some of the more advanced examples. They demonstrate how to use the various Bootstrap features that are documented down the page of Bootstrap components.
If your instructor asked you to hand in this lab, what you should submit is a file containing screenshots of your browser displaying HTML files you created in which you demonstrate the Bootstrap components you have decided to use. By demonstrating the elements you have decided to use in your design, the file you submit will indicate which Bootstrap components you found of value. As you will discover, Bootstrap is vast, and you should not feel obliged to use more components than good taste dictates. Sometimes less is more, and in Web design, it is often best to make judicious use of a few design elements rather than trying to use every component on a single page.