Web Design for Literary Theorists II: Overview of CSS (v 1.0)

Introduction to Web Design
For Literary Theorists
Second Workshop:
Overview of CSS
9 May 2014
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, and to do a
good job of it.
● To engage in practices that minimize the labor
required to do so.
● 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 for informing browsers how your
content should be displayed.
● To understand the syntax of CSS, methods for
applying it to your HTML, and some of the
possibilities for using CSS for styling your web
pages.
● To understand why writing semantic rather
than presentational HTML results in a
consistent look for a site and easier
maintenance and updating.

Details, details ...
● I’m going to be moving over a lot of details
rather quickly today.
● You don’t need to memorize them all.
– There are great references on the web, of course.
– This presentation will be online in a few days.
– What’s important is that you pick up major concepts
and work along with them.
– Come talk to me in my Lead TA office hours if you
have questions!
● A collection of useful links is online at
http://is.gd/todoho.

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 partial or
moderately simplified (but it’s honest and, I think, sufficient).
● 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 text file with
markup (“tags”) that indicate the structure of the
document to machines that render or otherwise
interpret it.
● Your HTML should focus on describing the
document’s structure, rather than its appearance.
– To put it another way, you should separate content from
information about its presentation.
– Describing the appearance of well-structured content is
the function of CSS.

Tags you’ll see, but shouldn’t use
 – bold text
<big></big>, – to change text size
<blink></blink> – primarily used to ensure that
people despise you.
<center></center> – for centering text
 – for font size and face
 – italic text
, – subscript, superscript.
 – underlined text

A minimally acceptable 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.
● 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
● 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.
– This means that you could just as well do this:
h1 {font-family; Arial; font-size: 36pt;
text-align: center;}
h1 {font-family: Arial;
font-size: 36pt;
text-align: center;}

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 is a poor overall strategy for styling your text,
but not a bad way to see quickly how things look.

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.

#abstract {font-style: italic;}
.abstract {font-style: italic;}
● You can specify that tags be selected by ID (the first
example) or by class (the second example) regardless
of what tag belongs to that class.
● For example, the second rule will match either of the
following and render the text inside the tag in italics:
This paper pointlessly
compares several characters in later Dickens
novels.
This paper compares the eponymous characters
in Martin
Chuzzlewit and David Copperfield.
● Note that it’s best to tag your text with classes and IDs
that are meaningful to you.

li ol li {margin-top: 0;}
#nav li ul li a {text-decoration: none;}
#nav > li {list-style-type: none;}
– The first rule means “don’t use a top margin on any list item
that is inside an <ol> tag that is inside another <li> tag.”
– The second rule means “don’t underline 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 ID nav.”
– The third rule means “don’t display a bullet or number for
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 the nav element than being its
immediate child).”
More complex selectors

Tags that do nothing (that’s visible)
●
 – marks an inline group of text
for some purpose of your own.
I thought that 1Q84
was a very disappointing novel.
●
<div></div> – marks a block-level group of text
for some purposes of your own.
<div class="document-header">
I was very disappointed by 1Q84.
However, I quite enjoyed Infinite Jest.
</div>

So, where do you put style information?
● In the style attribute 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 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 this in the heading of each HTML
document that uses 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.
● The W3C has a complete list of all valid
element properties that can be modified with
CSS.
● There are also about eight billion other useful
online references.

Example: changing the background
body {background: white;}
body {background: rgb(255,255,255);}
body {background: #ffffff;}
– All change the background for the <body> tag (i.e., the whole
page).
– “white” is a standard color name (there are 16 others).
– 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 with the rgb() specifier.
p.info-box {background: url("paper.png") repeat;}
– Changes the background for every tag with the class attribute
set to “info-box” to whatever image is contained in the file
paper.png, and tiles it so that it fills the whole box that the 
block occupies.

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
● 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), and
possibly Comic Sans and Impact.
● You should provide fall-back fonts in case the user
doesn’t have the font you want.
– They’ll be used in decreasing order of preference.
● The last font you use should be a generic name: serif,
sans-serif, monospace, cursive.
p {font-family: "Times New Roman", Times, serif;}

Can’t you just upload fonts to your
web site?
● 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.
– Fonts are, legally, creative works that take an
incredible amount of work to do well. 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.
– If the browser has to wait for fonts to download,
the page will render more slowly.

Some useful text properties
property Useful settings
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>
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, cred scenester Neutra Intelligentsia meh pork belly blog
Pinterest tote bag. Lo-fi High Life pop-up, freegan small batch lomo
hashtag 90's jean shorts XOXO. 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.
Flexitarian authentic Marfa Shoreditch salvia, freegan vegan
twee Intelligentsia wayfarers. Pour-over 3 wolf moon ugh synth.
Neutra beard mustache, ennui lomo mlkshk Schlitz Intelligentsia. Yr
ethical Carles, fap direct trade selvage whatever skateboard Tumblr
you probably haven't heard of them mumblecore Schlitz. Salvia
hashtag gastropub American Apparel. Roof party art party tousled
jean shorts, pickled farm-to-table yr sriracha pop-up cardigan pork
belly. Street art Banksy Marfa freegan hoodie direct trade lo-fi,
hella gentrify kitsch Shoreditch umami retro Pinterest chambray.
</body>

● Every block-
level element
is rendered in
a box.
● You can control
a lot about
these boxes.
– Usually,
borders are
invisible,
unless you
explicitly set
them to be
visible.

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%
(use with relative, absolute, or fixed positioning)
float left, right, none

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 multiple values for related properties
in a convenient shorthand.
● You can drop some properties (defaults will be used),
provided that what is in there is in the right order.
● Similarly, margin is a shorthand property for margin-
left, margin-right, margin-top, and margin-bottom.
● And background is a shorthand property for background-
color, background-image, background-repeat,
background-attachment, and background-position.

So that’s a lot of detail …
● 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 about CSS.

So what’s good design, then?
● There are many approaches to design in the
context of web pages. However, some rules of
thumb …
– Readers don’t parse text on web pages in the same
way that literary theorists read novels.
– 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 crucial elements in the same place on every
page, so that readers 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.

Some general principles
● Don’t be afraid of white space.
● Think about why you’re making the 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.

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
validator and resolve any problems.
– Come talk to me in my office hours if you hit any
snags!

Web Design for Literary Theorists II: Overview of CSS (v 1.0)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Web Design for Literary Theorists II: Overview of CSS (v 1.0)

Similar a Web Design for Literary Theorists II: Overview of CSS (v 1.0) (20)

Más de Patrick Mooney

Más de Patrick Mooney (20)

Último

Último (20)

Web Design for Literary Theorists II: Overview of CSS (v 1.0)