Introduction to Web Design for Literary Theorists
Second Workshop:
Overview of CSS
Patrick Mooney
Co-Lead TA, 2013-2015
Department of English
UC Santa Barbara
Objectives for this workshop series
- To learn the basic skills involved in building a small website for a course or section.
- To actually build such a web site that is useful for your students and that represents you positively.
- To engage in practices that minimize the labor required to do these things.
- To make your teaching practices more visible on the web.
- To be able to read various versions of HTML and CSS in other places on the web.
Objectives for today's workshop
- To learn the basics of CSS, the W3C's technology describing to browsers how your well-structured, semantically written content should be rendered (displayed).
- To understand the syntax of CSS, learn methods for applying it to your HTML, and demonstrate some of the possibilities for using CSS for styling your web pages.
- To understand that writing semantic rather than presentational HTML results in a consistent look for a site and easier maintenance and updating.
Details, details …
- We'll cover a lot quite quickly today.
- You don't need to memorize all the details.
- There are great references on the web.
- What's important is that you pick up major concepts and work along with them.
- Come talk to me in my office hours if you have questions!
- A collection of useful links for this workshop series is online at http://is.gd/todoho.
- That includes a copy of this slideshow!
What you won't learn in these workshops
- Everything about every version of HTML.
- Everything about producing cutting-edge designs.
- How to produce web sites with active content.
- More than a little bit about search-engine optimization.
Which Is to Say …
- Some of the information you'll get here is incomplete or moderately simplified.
- I'll be overlooking lesser-used options in the interest of demonstrating basic concepts.
- But everything I say is an honest simplification, and is sufficient for our purposes.
- Once you understand the basics, you can dive more deeply into details.
- You're not going to walk out of here with the skills to be a professional web designer.
- However, you will walk out of here knowing enough to present your content to your students—and the world—in a way that reflects positively on you.
Reminders from last time
- HTML is the standard language for displaying content on web sites.
- An HTML document (
web page
) is a plain text file with markup (tags
). - These tags indicate the structure (not the appearance) of the document to machines that render (display) or otherwise parse and interpret it.
- We'll talk more about services that parse for purposes other than rendering during our next session.
Reminders from last time
- You'll hear me say this a lot: your HTML should focus on describing the document's structure, rather than its appearance.
- Describing the appearance of well-structured content is the function of CSS.
- To put it another way, you should separate content from presentation.
- There are many good reasons for this. Some examples:
- If you sprinkle
<font>and<align>and other formatting codes throughout your documents, then updating the overall appearance of your website requires that you go back and edit all of those codes in each HTML document. - But if you separate your formatting information into a separate file, all you have to do is edit that file.
- Marking up your content semantically rather than presentationally also helps you to write markup that can be parsed by machines in various ways that are helpful to you (and your students or other visitors).
- If you sprinkle
Tags you'll see, but shouldn't use
| Presentational Tag | Purpose |
|---|---|
<b></b> | bold text |
<big></big>,<small></small> | to change text size |
<blink></blink> | primarily used to ensure that people despise you |
<center></center> | for centering text |
<font></font> | for font size and face |
<i></i> | italic text |
<sub></sub>,<sup></sup> | subscript, superscript |
<u></u> | underlined text |
Takeaway: There are far better ways to accomplish these things.
A minimally acceptable XHTML document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhmlt">
<head>
<title>Some books I've read</title>
</head>
<body>
<p>I read many books on my bus trip last summer. Of all of them, the <em>most</em> disappointing was <cite>1Q84</cite>.</p>
</body>
</html>
Some comments on that minimal XHTML document
- The
<!DOCTYPE>declaration is (to you) a string of gibberish whose purpose is to tell the browser what flavor of HTML you're using.- Those familiar with SGML might recognize this as an SGML declaration, because HTML was originally an SGML application.
- The W3C has finally wised up in HTML5, which has a much simpler DOCTYPE declaration. However, for a variety of reasons, we're not learning HTML5 in this series.
- The
xmlns=attribute on the<html>tag tells XML parsers how to parse the HTML. - You can just look up these values, or (even better) use existing documents as templates.
How CSS works
- CSS information consists of a set of rules, each of which is applied to a well-formed HTML document.
- Each rule consists of a selector and a declaration.
- The selector indicates which chunks of HTML the rule applies to.
- Selectors can be simple or very complex. You can get a lot of traction out of very simple selectors.
- The declaration indicates what the content selected by the selector should look like.
An example: what <h1> looks like
h1 {font-family: Arial;
font-size: 36pt;
text-align: center;}
- The selector here simply tells the browser that the declaration applies to (controls the appearance of) every
<h1>tag. - Like HTML, CSS ignores extra white space.
- Conveniently, the return (line break) character also counts as white space.
- This means that you could just as well do this:
h1 {font-family; Arial; font-size: 36pt; text-align: center;}
- This means that you could just as well do this:
Reminder: Some attributes are for any tag
<tag id="something">- Attaches a unique ID to an individual tag for some purpose of your own.
<tag class="something something_else">- Indicates that the tag belongs to one or more groups that you yourself designate for some purpose of your own.
<tag style="some valid styling information">- This tag has an implicit selector; that selector is
whatever the scope is of the tag to which the
style=attribute has been attached. - This is a poor overall strategy for styling your text.
- It makes your HTML presentational again! With all of the problems associated with that!
- But it's a good way to play quickly with styling ideas and see what effects they have.
- This tag has an implicit selector; that selector is
More examples
p,td,li {font-family: "Times New Roman";
font-size: 12pt;
margin-bottom: 0;}
- You can specify that the same declaration apply to multiple selectors.
p.first-paragraph {margin-top: 0;}
- You can restrict the selector to specific classes of tags.
p#abstract {font-style: italic;}
- You can restrict the selector to specific unique IDs of tags.
More examples
p#abstract {color: red;}
#abstract {font-style: italic;}
- You can specify that tags be selected by ID (that's what the pound sign does). As the second example shows, you don't even have to specify to which tag you'll be applying the ID.
- There is no master list of class names you have to use (though there are common ontologies and some good reasons to use them; still, it's optional).
- I could have just as well chosen the name
j22oryu665th8if that had suited me (and some systems that generate HTML/CSS do in fact use such names). - It's best to tag your text with classes and IDs that are meaningful to you.
More examples
.abstract {font-style: italic;}
- You can specify that tags be selected by class (note the dot in front of the class name) regardless of what tag that class is applied to.
- For example, the second rule will match either of the following and render the text inside the tag in italics:
<p class="abstract">This paper pointlessly compares several characters in later Dickens novels.</p><p>This paper compares the eponymous characters in <span class="abstract">Martin Chuzzlewit</span> and <span class="abstract">David Copperfield</span>.</p>
More complex selectors
li ol li {margin-top: 0;}
- This rule means
don't use a top margin on any list item that is inside an
<ol>tag that is inside another<li>tag. - Using a compound selector made up of one selector followed by another, separated only by a space, means
apply this rule to any of [the second selector] when it occurs in a context where it is already specified by [the first selector].
- Note that, when the measurement is zero, you don't need to specify a number of units.
- As you can see from the example, you can have as many levels of context specificity as you'd like…
More complex selectors
#nav li ul li a {text-decoration: none;}
- This rule means
don't underline (or apply any other decoration to) any
<a>tag that is inside a list item that is part of an underlined list that is inside a list item that is inside a block with the IDnav. - Again, this is a compound selector that uses a unique ID as (part of) the selector (the pound sign).
More complex selectors
#nav > li {list-style-type: none;}
- This rule means
don't display a bullet or number to any list item that is the immediate child of the element with the ID
nav(but don't apply this rule if the<li>element is a more remote descendant of thenavelement than being its immediate child). - A greater-than sign means
only apply this rule when [the second selector] is an immediate child of the first selector
.
Tags that do nothing (visible, on their own)
<span></span>: marks an inline group of text for some purpose of your own.<p>I thought that <span class="book-title">1Q84</span> was a very disappointing novel.</p><div></div>: marks a block-level group of text for some purpose of your own.<div class="document-header">
<p>I was very disappointed by <span class="book-title">1Q84</span>.</p>
<p>However, I quite enjoyed <span class="book-title">Infinite Jest</span>.</p>
</div>
So, where does CSS styling go?
- In the
styleattribute of individual tags.- In this case, you don't need a selector: the tag itself is the selector.
<li style="font-style: italic;">First item</li>
- In this case, you don't need a selector: the tag itself is the selector.
- In the
<head>section of individual HTML files.<html>
<head>
<style>
h1 {font-size: 24pt; font-family: Arial;}
</style>
<title>Some Thoughts</title>
</head>
<body> …
Best practice: in an external style sheet
- All of your CSS rules go in a single plain-text file.
- You do something like this in the heading of each HTML document to which you want to apply those CSS rules:
<html>
<head>
<link rel="stylesheet" type="text/css" href="content.css">
<title>Some Thoughts</title>
</head> - Updating all of the web pages that depend on that style sheet is then as simple as updating that style sheet.
So, what can you do with declarations?
- Short version: a lot.
- You can control pretty much every imaginable aspect of how individual chunks of HTML are rendered with appropriate declarations.
- You can have fine-grained control over which parts of each individual document your declarations apply to.
- Mozilla has a complete list of all valid element properties that can be modified with CSS.
- Warning: it's pretty long.
- There are also about eight billion other useful online references.
Example: changing the document background
body {background: white;}
body {background: rgb(255,255,255);}
body {background: #ffffff;}
All of these change the background for the
<body>tag (i.e., the whole page).whiteis a standard color name (there are 16 others).Other (nonstandard) colors can be used by specifying their red, green, blue components in hexadecimal, on a scale of 0–FF (which is 0 to 255 in decimal); or on a scale of 0–255 with the
rgb()specifier.
Example: Changing the background on other things
p.info-box {background: url("paper.png") repeat;}
- Virtually any declaration can be applied to virtually any selector (though there are some combinations that don't make sense).
- This rule changes the background for every
<p>(paragraph) tag with theclassattribute set toinfo-boxto whatever image is contained in the filepaper.png, and tiles it so that it fills the whole box that the<p>block occupies. - A reminder: you can call your classes whatever you'd like (provided that they're syntactically legal names). Here,
info-boxisn't a magic name that has a special meaning defined in some standard somewhere; it's just a name I chose to be meaningful to me.
MLA-compliant text (more or less)
p {font-family: Times New Roman
, Times, serif;
font-size: 12pt;
text-indent: 0.5in;
width: 6.5in;
text-align: left;
margin: 1in;
line-height: 200%;}
- The browser (or other rendering software) will comply with as many of the declarations as it can.
- Remember that people will view your web pages with a variety of operating systems, devices, and software.
A few words about fonts
p {font-family: Times New Roman
, Times, serif;}
- For the font to be used, the user must have it installed on her system.
- There are no fonts that everyone has installed.
- However, the vast majority have Times New Roman (or Times), Courier New (or Courier), Arial (or Helvetica); other common fonts include Comic Sans and Impact.
- You should also list fall-back fonts in case the user doesn't have the font you want.
- The web browser's rendering engine will go through the list until it finds a font name that's installed on the user's system.
- The last font you list should be a generic name:
serif,sans-serif,monospace, orcursive.
Can't you serve the fonts you want directly from your web site?
- Theoretically, yes. But …
- The file format for fonts transferred across the web is not the same as the file format for fonts on your computer. You have to convert them.
- You're paying for storage and bandwidth; fonts can take up a lot of both. (A well-designed font can take up dozens or hundreds of times as much space as this entire slideshow.)
- If the browser has to wait for fonts to download, the page will render more slowly.
- Fonts are, legally, creative works; designing one well takes an incredible amount of effort. They are subject to copyright. You can't just upload a font from your computer unless you designed it or otherwise have permission to use it.
- There are fonts that you can use that are served by third parties at no charge to you (though there are always terms and conditions). There's a list on the workshop website.
Some useful text properties
| Property | Useful values |
|---|---|
font-size |
12pt; 120%; 3em |
font-family |
"Arial Black", Arial, sans-serif |
font-style |
normal; italic; oblique; inherit |
font-weight |
normal; bold; 400; bolder; lighter |
text-align |
left; right; center; justify |
color |
black; #000000; rgb(0,0,0) |
text-decoration |
none; overline; blink; underline; line-through |
white-space |
normal; pre; nowrap |
text-indent |
0.5in; 2ex; 20px; 4pt; 2.5cm; 3pc |
The HTML box model
Say you have an HTML file containing two paragraphs:
<body>
<p>Whatever normcore selvage Schlitz, locavore PBR&B viral. Butcher pork belly slow-carb, 8-bit kitsch PBR food truck ethical kale chips fap. Etsy lo-fi swag mixtape pop-up. Williamsburg keytar meggings.</p>
<p>Letterpress fixie DIY cred, fap umami ethical McSweeney's small batch cardigan Banksy viral Blue Bottle Intelligentsia disrupt. Deep v ethical literally salvia brunch banjo fanny pack.</p>
</body>
- Every block-level element is rendered in a box.
- Usually, borders are invisible, unless you explicitly set them to be visible.
- You can control many details about how these boxes are displayed.
Padding, border, margin
p {background: aqua;
padding: 0.5in;
border: 2px purple dashed;
margin: 1in;}
Useful layout properties
| Property | Useful settings |
|---|---|
clear |
left, right, both |
display |
inline, block, list-item, table, none |
width |
800px; 80%; 6.5in; 60em |
vertical-align |
top; baseline; middle; bottom; sub; super |
position |
static; relative; absolute; fixed |
top, right, bottom, left |
12px; .25in; 3em; 20% |
float |
left, right, none |
There are also some shorthand
properties
p {font: italic small-caps bold 12pt/24pt "Times New Roman", Times, serif;}
p {font: bold 12pt Times New Roman
;}
- You can specify values for multiple related properties in a convenient one-line shorthand.
- You can drop some properties (defaults will be used), provided that what is in there is in the right order.
- Similarly,
marginis a shorthand property formargin-left,margin-right,margin-top, andmargin-bottom. - And
backgroundis a shorthand property forbackground-color,background-image,background-repeat,background-attachment, andbackground-position.
So that's a lot of detail …
- If it makes you feel better, I can't remember it all offhand, either.
- There are lots of good references on the web, including at the W3C's site.
- The W3C has a CSS validator in addition to its HTML validator.
- If your CSS doesn't seem to be working, validate it—and the HTML you're applying it to—before tearing your hair out.
- The workshop series website has some useful links related to CSS.
CSS is odd and can be kind of terrible
There are a lot of interacting behaviors no matter what you do, and no matter what you do someone’s going to find the results baffling in some way or other.
— Eric Meyer, Un-fixing Fixed Elements with CSS Transforms
- There are a lot of possibilities to learn, remember, and look up.
- You can be very very specific about what you're doing and how you display your documents.
- Simple modifications to the default display are easy to accomplish in a few lines.
- The difficulty most people have is with unexpected interactions between non-intuitive implementation details.
So what's good design, then?
- There are many different approaches to web page design
- However, some rules of thumb …
- Readers don't parse text on web pages in the same way that literary theorists read novels.
- Consider the immediate visual impacts of the decisions you make: you should provide visual cues that help readers to find crucial information quickly. Leverage the semantic structure of your documents to do this.
- Use color, size, grouping, spacing, and positioning to give clues about how items are related to each other.
- Put common elements that need to be easily found in the same place on every page on your site, so that your visitors don't have to search for them.
How do you learn decent design?
- Look critically and thoughtfully at other web sites you visit. Ask yourself what does and doesn't work well.
- What helps you to parse the web page quickly?
- How could the web page be more easily parsed?
- What is aesthetically appealing about it?
- What is visually ugly about it?
- What ideas, practices, and/or elements can you appropriate?
- There are links to a few articles about design on the workshop series website's links page.
Some general principles
- Don't be afraid of white space. You don't have to pay for paper; you don't have to cram everything into the smallest space possible.
- Know why you're making the design choices you're making.
- Use color, grouping, etc. to connect related elements.
- Remember that people scan web pages instead of reading them straight through. Give visual cues to help them do this.
- Back away from your monitor and squint at your page. Can you identify its major features?
A few examples of good design
A suggestion …
- You won't really have learned anything today unless you apply these skills in the near future.
- Take your HTML-marked section guidelines handout and make it attractive. Use an external linked style sheet.
- Start setting up a section website. You can take one of mine as a model, if you'd like.
- Run your HTML and CSS through the W3C's validators and resolve any problems.
- Come talk to me in my office hours if you hit any snags!