View
553
Download
1
Category
Preview:
DESCRIPTION
Citation preview
Studio 4: CSS
Prof. AlvaradoMDST 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
Turning words into elements
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
How does it work?
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/h1Think of this as the element’s ancestry
Let’s look at an example …
Standard HTML Doc
<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 HTM
<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>
What not to do!
<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>
Instead, use CSS
<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>
<html><head><title>I’m an HTML document</title><style type="text/css">div {font-size:14pt;font-weight:bold;}</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></body>
</html>
Better yet, put CSS here
<html><head><title>I’m an HTML document</title><style type="text/css">.foo {font-size:14pt;font-weight:bold;}</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></body>
</html>
Or using a class
attribute
<html><head><title>I’m an HTML document</title><link rel=“stylesheet” type=“text/css” href=“default.css” /></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></body>
</html>
Even better: CSS in linked file
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#foo {font-size:14pt;font-weight:bold;
}
Here the selector finds an element with an ID attribute with the value “foo” …
e.g. <div id=“foo”>Hey.</div>
Example selectorsp Any p elementp.fooAny 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 DOMX
Elements of type X#X
Element with ID X.X
Elements of Class X*
Every elementX Y
Y is descendant of XX > Y
Y is childX + Y
Y follows XX ~ Y
Y immediately follows
CSS Selectors and AttributesX[title]
X has titleX[href=“foo”]
X has href of ‘foo’X[href*=”foo"]
href contains ‘foo’ X[href^="http"]
href begins with ...
X[href$=".jpg”]href ends with
X[data-*="foo"]Attribute matches
X[foo~="bar"]Attribute among
valuese.g. attr=“v1 v2 v3”
CSS Selectors and Pseudo Elements
X:linkunclicked anchor
X:visitedclicked anchor
X:hoveron mouse hover
X:checkedchecked input
X:beforeX:after
Before and after the element
Works with the content property
E.g. content:”foo”;
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 Directivesfont-family: Georgia, Garamond, serif;color: blue;color: #eeff99;background-color: gray;border: 1px solid black;
CSS Box Model
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
Recommended