Factors to Consider When Choosing Accounts Payable Services Providers.pptx
UVA MDST 3073 CSS 2012-09-20
1. Studio 4: CSS
Prof. Alvarado
MDST 3703/7703
20 September 2012
2. 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
3. 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
5. 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
6. 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 …
7. 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”)
8. 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
13. 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
15. 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
16. 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
17. 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
19. <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
20. <html>
<head>
<title>I’m an HTML document</title>
</head>
<body>
<h1>Here is the first header</h1>
<p>Here is some content:</p>
<div>
Here is some special content that I
want to make bigger.
</div>
</body>
</html> Standard HTM
21. <html>
<head>
<title>I’m an HTML document</title>
</head>
<body>
<h1>Here is the first header</h1>
<p>Here is some content:</p>
<h1>
Here is some special content that I
want to make bigger.
</h1>
</body>
</html> What not to do!
22. <html>
<head>
<title>I’m an HTML document</title>
</head>
<body>
<h1>Here is the first header</h1>
<p>Here is some conent</p>
<div style=“font-size:14pt;">
Here is some special content that I
want to make bigger.
</div>
</body>
</html> Instead, use CSS
23. <title>I’m an HTML document</title>
<style type="text/css">
div {
font-size:14pt; Better yet,
font-weight:bold;
}
put CSS here
</style>
</head>
<body>
<h1>Here is the first header</h1>
<p>Here is some conent</p>
<div>
Here is some special content that I
want to make bigger.
</div>
24. <title>I’m an HTML document</title>
<style type="text/css">
.foo {
font-size:14pt;
font-weight:bold; Or using a
} class attribute
</style>
</head>
<body>
<h1>Here is the first header</h1>
<p>Here is some conent</p>
<div class=“foo”>
Here is some special content that I
want to make bigger.
</div>
25. <html>
<head>
<title>I’m an HTML document</title>
<link rel=“stylesheet” type=“text/css”
href=“default.css” />
</head>
<body> Even better: CSS in linked file
<h1>Here is the first header</h1>
<p>Here is some conent</p>
<div>
Here is some special content that I want
to make bigger.
</div>
</body>
</html>
26. default.css
.foo {
font-size:14pt;
font-weight:bold;
}
This is what the content of the
default.css file would look like.
27. 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.
28. 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>
29. 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
30. 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
31. 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”]
32. 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
34. 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;
37. 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
38. 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
39. Exercise
• Let’s try to format out Persuasion
• Go to blog post for today’s studio
