Assigned: Friday, Jan 27, 2017
Due: Monday, Jan 30, 2017 at noon
Collaboration: You should work with your assigned partner for this lab.
Cascading Style Sheets (CSS) use a language that is closely coupled with HTML. Web developers use CSS to add presentation rules to HTML documents, typically without extensive changes to the HTML markup. Using HTML and CSS together, you can describe the content and structure of your document in HTML, then separately describe its presentation using CSS. This tends to be helpful for accessibility (especially screen-readers for vision-impaired users). CSS gives you significant control over the appearance and placement of elements on your webpage. In today’s lab, you will start out using CSS to change the appearance of text on your page. Then you will move on to basic layout changes, which control the placement of HTML block elements. Finally, we’ll use a common CSS framework, Bootstrap, to save some of the difficult work involved in building CSS and HTML.
Continue working with your partner(s) from the previous lab. If your partner is not here, see me and we can find an alternate group for you to work with.
Originally, CSS was designed to specify rules for typography;
CSS canspecify which fonts, colors, font sizes, and basic text decorations should be used on a page.
We’ll start out using the color and text-align rules in CSS.
The following HTML document uses the HTML style attributes to specify colors for some text elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A simple CSS-styled page</title>
</head>
<body>
<h1 style="color: blue">This page uses CSS</h1>
<p style="text-align: right">
You can control text placement as well as font and color.
</p>
<h2>Default headings are left alone</h2>
<p style="text-align: right">
If you want multiple elements to have the same style, you have to set the style
attribue for each one when using this method.
</p>
</body>
</html>
While this gives us a lot of control, it can be quite cumbersome if you want to apply the same style rules to many elements. Generally, we actually write CSS rules outside of HTML tags and link them to elements in the document. Here’s an example of the same page using separate style rules:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A simple CSS-styled page</title>
<style>
h1 {
color: blue;
}
p {
text-align: right;
}
</style>
</head>
<body>
<h1>This page uses CSS</h1>
<p>
You can control text placement as well as font and color.
</p>
<h2>Default headings are left alone</h2>
<p>
If you want multiple elements to have the same style, you have to set the style
attribue for each one when using this method.
</p>
</body>
</html>
You can see the same style rules are inside the style take in the document’s head section.
These rules are connected to elements on the page using CSS selectors.
In this case, we use the name of the HTML tag to refer to elements on the page;
h1 refers to all <h1> tags, and p refers to all <p> tags.
This works fine if we want to apply the same rules to all instances of a specific tag, but sometimes we want more control over where styles appear.
To do this, we typically use CSS classes, and sometimes IDs.
Here is an example that uses both:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A simple CSS-styled page</title>
<style>
#page-title {
color: blue;
}
p.text-center {
text-align: center;
}
p.text-right {
text-align: right;
}
.red-please {
color: red;
}
</style>
</head>
<body>
<h1 id="page-title" class="red-please">This heading will be blue, not red</h1>
<p>
This text will be aligned according to the default rules.
</p>
<p class="text-center">
This text will be center-aligned.
</p>
<p class="text-right red-please">
This text will be red and right-aligned.
</p>
</body>
</html>
The class attribute in HTML elements allows you to specify which set of rules should apply to this element.
In the CSS, you refer to a class using .classname, or you can be more specific and specify both a tag and class name (as in the p.text-center and p.text-right rules above).
The selector #page-title refers to an HTML element with the ID page-title.
IDs are supposed to be unique, so this is meant to refer to just one element on the page.
When multiple rules apply to a single element, rules are given precedence by document order, unless one rule is “more specific” than the other.
To be more specific, a rule can specify both a tag and class, or even a set of tags.
For example, the selector html body p.text-center refers to a <p> tag with the text-center class that is contained in a <body> tag, which itself is in an <html> tag.
The <h1> element has both an ID and a class, both of which are used in selectors to apply style rules.
CSS treats ID-based selectors as more specific than class-based selectors, so the heading remains blue even though it has the red-please class.
There is one last complication: typically we don’t write CSS inside of an HTML document at all.
Instead, we put it in a separate .css file and link it to the document.
The following HTML file links a .css file named style.css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A simple CSS-styled page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="page-title red-please">This heading will be red, not blue</h1>
<p>
This text will be aligned according to the default rules.
</p>
<p class="text-center">
This text will be center-aligned.
</p>
<p class="text-right red-please">
This text will be red and right-aligned.
</p>
</body>
</html>
Now instead of writing CSS rules inside the <head> section, just write them in a file named style.css in the current directory.
Add some interesting style rules to your personal page from the prevous lab.
You should have at least four CSS selectors and six rules before moving on.
You can find an extensive list of CSS properties at the Mozilla Developer Network CSS Reference.
I recommend trying out the font-family, text-decoration, color, font-weight, and text-transform properties.
If you want to apply a set of rules to a text fragment rather than an entire paragraph, you can use the <span> tag:
<p>
This is a paragraph that contains a <span class="special">special section</span>
that will be styled differently.
</p>
Once you’ve added some CSS rules to your page, run the command git add style.css to include your CSS file, git commit your changes, and git push them up to GitHub.
Building website with CSS can be quite frustrating; browsers implement slightly different versions of the CSS rules, and even a well-behaved browser can do some pretty unintuitive things in response to CSS rules. To simplify this process, many web developers now use CSS frameworks. There are many options, but one of the most common options is Bootstrap from Twitter. This framework includes a large number of default rules and ready-to-use CSS classes that make it easy to add style options to a webpage.
To use Bootstrap, you’ll want to start out with the following basic HTML template from http://getbootstrap.com:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
In addition to including some CSS rules, this HTML example includes two new featuers: comments and <script> tags.
An HTML comment is placed between <!-- and --> markers.
This text will be visible in the source of your page, but not on the page itself, even if it appears in the body of the HTML document.
The <script> tags are pulling in some JavaScript code that is necessary for some of Bootstrap’s features.
We’ll talk about JavaScript soon, but for now it’s enough to know that these tags pull in code.
Copy and paste this template into a new file, bootstrap.html, and copy over the content from your original page.
You’ll see that Bootstrap applies quite a few CSS rules by default.
However, most people use Bootstrap for layout as well.
The main building block for pages built with Bootstrap is the <div> tag.
This is a tag that contains other elements, and Bootstrap uses CSS classes to specify how each div is placed and sized.
Bootstrap layouts are build from rows and columns;
every page is 12 columns wide, but a div can span any number of those columns.
The following example shows the contents of the <body> section for a page that uses rows and columns:
<div class="container"> <!-- Everything goes inside a container div -->
<div class="row"> <!-- Everything in this row will be above the next row -->
<div class="col-md-4">
<h1>Column Heading</h1>
<p>This text has one column to the right.</p>
</div>
<div class="col-md-8">
<h2>Smaller Column Heading</h2>
<p>This is a wider column</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Here is some text in a medium-width column.</p>
</div>
<div class="col-md-6">
<p>Here is some more text in a medium-width column.</p>
</div>
<div class="col-md-6">
<p>
Even though this column is in the same "row" as the other two, the total width
exceeds 12 so it will wrap to a new row.
</p>
</div>
</div>
</div>
You should try out this example content to see exactly how it is rendered. As you try it out, resize your browser window to see how the layout changes. You may need to adjust your NoScript settings to allow Bootstrap to run the JavaScript code it uses to adjust for window size changes.
Bootstrap does a good job adjusting placement to deal with narrow windows, and even gives you some rules to specify different layouts at different window sizes.
The col-md-6 class says a <div> should be 6 units wide when the window is medium sized.
There are similar rules like col-lg-6 (six units wide with a large window), col-sm-6 (six units wide with a small window), and col-xs-6 (six units wide with an extra small window).
You can apply multiple styles to set column widths for a variety of screen sizes, but Bootstrap will also use some reasonable defaults if you just specify medium window sizes.
You can find examples of Bootstrap-styled elements at http://getbootstrap.com/css. Use this guide to add at least two bootstrap styled elements from this page. I recommend trying one or more list styles, buttons, and tables.
There are also some Bootstrap “components,” which are standard HTML patterns you can add in connection with Bootstrap styles to build useful user interface elements. You can find a list of components at http://getbootstrap.com/components/. Add a nav, at least one label, and a panel to your page.
You’ll find these building blocks are very useful when you’re building a visualization. You usually need a simple layout and some basic user interface elements, and Bootstrap makes it easy to add what you need without too much hassle. It does tend to make your website look somewhat generic, but you can always add additional CSS rules or a Bootstrap theme from sites like https://bootswatch.com to change the general look of the page.
Once you have these components in place, commit your changes and push them to GitHub.
Don’t forget to add your bootstrap.html page to the repository.