Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


Published on

Second in a series of workshops for graduate students in the Department of English at UC Santa Barbara.

More information:

YouTube screencast with audio:

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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

  1. 1. 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
  2. 2. 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.
  3. 3. 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.
  4. 4. 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
  5. 5. 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.
  6. 6. 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.
  7. 7. Tags you’ll see, but shouldn’t use <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
  8. 8. 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.
  9. 9. 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.
  10. 10. 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;}
  11. 11. 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.
  12. 12. 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.
  13. 13. #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: <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> ● Note that it’s best to tag your text with classes and IDs that are meaningful to you.
  14. 14. 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
  15. 15. Tags that do nothing (that’s visible) ● <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 purposes 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>
  16. 16. 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> ...
  17. 17. 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.
  18. 18. 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.
  19. 19. 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. {background: url("paper.png") repeat;} – Changes the background for every <p> 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 <p> block occupies.
  20. 20. 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.
  21. 21. 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;}
  22. 22. 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.
  23. 23. 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
  24. 24. 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, 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.</p> <p>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.</p> </body>
  25. 25. ● 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.
  26. 26. Padding, border, margin p {background: aqua; padding: 0.5in; border: 2px purple dashed; margin: 1in;}
  27. 27. 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
  28. 28. 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.
  29. 29. 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.
  30. 30. 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.
  31. 31. 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.
  32. 32. 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.
  33. 33. A few examples ...
  34. 34. 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!