UVA MDST 3073 CSS 2012-09-20

Studio 4: CSS

Prof. Alvarado
MDST 3703/7703
20 September 2012

Business
• Quizzes due Thursday at midnight
– Will extend if the WordPress server goes
down again
• 90 mins …
– But some flexibility
– Two hours is the hard limit
• Plan to have graded by next week

Responses from Last Studio
• “Should I continue to break the divisions
down into sentences? What would happen if
you broke it down into individual words? If I
were to further break it down, how could
this be useful for me? What could I do with
it?”
– See the Charrette Project

Responses
• How can the word “broken,” with the
quotation marks around it, mean anything?
Is there somewhere that I can go in and
signify what each classification means? Will
my signifying what it means change
anything about the html document? I feel
like I am seeing one side of the process. Is
there another side to it?
– Classes provide “hooks” that can be used to
define styles and behaviors

Responses
• In simple recreation exists a form of
democratization of information
– Remediation as appropriation
• I am still confused about what SPAN and DIV
actually do
– These are just generic structural elements
– DIVs are blocks, SPANs are in-line
• Where/when do you define what a “chapter-
name” actually looks like
– In CSS or JavaScript …

Responses
• Under content is where the actual tags of
paragraph and quote come into play, which
also confuses me because I typically think
of those aspects as belonging under
structure, since they don’t relate to the
meaning, or maybe even layout since they
help format the page.
– Paragraphs and quotes are structure
– Content comprises the actual words and
letters (the “character data”)

Responses
• I feel like I need a crash course in HTML
before I can handle the fast pace of this class
– It should feel weird at first!
– No need to internalize all of HTML
– We are learning the logic of markup
• I thought we were using HTML on JEdit
which is supposed to be non-linear and non-
hierarchical, but we have also been using XML
which is very hierarchical
– Yes, non-linear and hierarchical patterns are
mixed up in real life

The Document Stack

CONTENT (TEXT) ASCII, Unicode, etc.

STRUCTURE XML

STYLE / LAYOUT CSS

STRUCTURE,
represented by HTML

LAYOUT, as interpreted by
Chrome

LAYOUT, with CSS (as
interpreted by Chrome)

CSS
• Stands for “Cascading Style Sheets”
• Allows you to add styles to HTML
– and XML in general
– Browsers know how to apply CSS styles to
documents
• “Style” includes things like
– Font characteristics
– Line characteristics
– Background colors and images
– Position of things on a page

CSS is language that associates
style directives with document
elements

A style directive is something like
“make the font size 12 points”

To do this, CSS needs an efficient
way to describe document
elements

The DOM
• The elements in a document marked up in
HTML are stored in a a tree called the
DOM
– Document Object Model
• The browser can do this because HTML
follows the OHCO model
• CSS uses the DOM to specify elements

In the DOM, every element has an address
that can be expressed as a string
e.g. html/body/h1
Think of this as the element‟s ancestry

Let’s look at an example …

<html>
<head>
<title>I’m an HTML document</title>
</head>
<body>
<h1>Here is the first header</h1>
<p>Here is some conent</p>
</body>
</html>

Standard HTML Doc

<html>
<head>
</head>
<body>
<p>Here is some content:</p>
<div>
Here is some special content that I
want to make bigger.
</div>
</body>
</html> Standard HTM

<html>
<head>
</head>
<body>
<p>Here is some content:</p>
<h1>
</h1>
</body>
</html> What not to do!

<html>
<head>
</head>
<body>
<div style=“font-size:14pt;">
</div>
</body>
</html> Instead, use CSS

<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“default.css” />
</head>
<body> Even better: CSS in linked file
<div>
Here is some special content that I want
to make bigger.
</div>
</body>
</html>

default.css
.foo {
font-size:14pt;
font-weight:bold;
}

This is what the content of the
default.css file would look like.

CSS Syntax: Selectors
.foo {
font-size:14pt;
font-weight:bold;
}

The “selector” indicates what
elements the styles apply to. Can
address element names, classes,
and ID. This uses the DOM.

CSS Syntax: Selectors
Here the selector
#foo { finds an element with
font-size:14pt; an ID attribute with
the value “foo” …
font-weight:bold;
}

e.g. <div id=“foo”>Hey.</div>

Example selectors
p Any p element
p.foo Any p element with a class of foo
.foo Any element with a class of foo
#foo The element with an id of foo

CSS Selectors and the DOM
X Y is descendant of X
Elements of type X X>Y
#X Y is child
Element with ID X X+Y
.X Y follows X
Elements of Class X X~Y
* Y immediately follows
Every element
XY

CSS Selectors and Attributes
X[title] href ends with
X has title X[data-*="foo"]
X[href=“foo”] Attribute matches
X has href of „foo‟ X[foo~="bar"]
X[href*=”foo"] Attribute among
href contains „foo‟ values
e.g. attr=“v1 v2 v3”
X[href^="http"]
href begins with ...
X[href$=".jpg”]

CSS Selectors and Pseudo Elements
X:link X:before
unclicked anchor X:after
X:visited Before and after the
clicked anchor element
X:hover Works with the
content property
on mouse hover
E.g. content:”foo”;
X:checked
checked input

CSS Selectors: Double Colon
• X::first-letter
• X::first-line

CSS Syntax: Declarations
.foo {
font-size:14pt;
font-weight:bold;
}
The “declarations” specify
properties and values to apply to
the element.

Format = property-name:
value;

Example Directives
font-family: Georgia, Garamond, serif;
color: blue;
color: #eeff99;
background-color: gray;
border: 1px solid black;

Basic Idea
• A CSS file is just a series of “rules” that
associated styles with elements
• A CSS rule has two parts
– A selector to identify elements (tag name,
class, id)
– One or more declarations of style
• CSS rules have a simple syntax
– Selectors followed by curly braces
– Key/value pairs separated by colons
– Rules separated by semi-colons

Basic idea
• You can apply any number of rules to a
document
• Rules may appear in attributes, headers, or
external files
• Rules are “cascaded”
– Later ones inherit previous ones
– Later ones have precedence (can
overwrite) earlier ones

Exercise
• Let’s try to format out Persuasion
• Go to blog post for today’s studio

UVA MDST 3073 CSS 2012-09-20

More Related Content

UVA MDST 3073 CSS 2012-09-20