DOC PREVIEW
Penn CIT 597 - First CSS Lecture Applications to HTML

This preview shows page 1-2-14-15-29-30 out of 30 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 30 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 30 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 30 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 30 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 30 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 30 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 30 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

CSSThe problem with HTMLCascading Style SheetsCSS syntax, ICSS syntaxExample of CSSMore about selectors, IExample of overridingMore about selectors, IIMore about selectors, IIIThe class attributeThe id attributediv and spanUsing style sheetsExternal style sheetsEmbedded style sheetsInline style sheetsCascading orderExample of cascading orderA novel example: XMLA novel example: CSSA novel example: ResultSome font properties and valuesShorthand propertiesColors and lengthsSome text properties and valuesPseudo-classesChoosing good namesReferencesThe EndCSSFirst CSS LectureApplications to HTMLThe problem with HTML•HTML was originally intended to describe the content of a document•Page authors didn’t have to describe the layout--the browser would take care of that•This is a good engineering approach, but it didn’t satisfy advertisers and “artists”–Even people that actually had something to say wanted more control over the appearance of their web pages•As a result, HTML acquired more and more tags to control appearance–Content and appearance became more intertwined–Different browsers displayed things differently, which is a real problem when appearance is importantCascading Style Sheets•A Cascading Style Sheet (CSS) describes the appearance of an HTML page in a separate document•CSS has the following advantages:–It lets you separate content from presentation–It lets you define the appearance and layout of all the pages in your web site in a single place–It can be used for both HTML and XML pages•CSS has the following disadvantage:–Most browsers don’t support it very wellCSS syntax, I•CSS syntax is very simple--it’s just a file containing a list of selectors (to choose tags) and descriptors (to tell what to do with them):–Example: h1 {color: green; font-family: Verdana} says that everything included in h1 (HTML heading level 1) tags should be in the Verdana font and colored green•A CSS file is just a list of these selector/descriptor pairs–Selectors may be simple HTML tags or XML tags, but CSS also defines some ways to combine tags–Descriptors are defined in CSS itself, and there is quite a long list of themCSS syntax•The general syntax is: selector {property: value}–or selector, ..., selector { property: value; . . . property: value}–where•selector is the tag to be affected (the selector is case-sensitive if and only if the document language is case-sensitive)•property and value describe the appearance of that tag•Spaces after colons and semicolons are optional•A semicolon must be used between property:value pairs, but a semicolon after the last pair is optionalExample of CSS•/* This is a comment */•h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st available font */•p, table, li, address { /* apply to all these tags */ font-family: "Courier New"; /* quote values containing spaces */ margin-left: 15pt; /* specify indentation */}•p, li, th, td {font-size: 80%;} /* 80% of size in containing element */•th {background-color:#FAEBD7} /* colors can be specified in hex */•body { background-color: #ffffff;}•h1,h2,h3,hr {color:saddlebrown;} /* adds to what we said before */•a:link {color:darkred} /* an unvisited link */•a:visited {color:darkred} /* a link that has been visited */•a:active {color:red} /* a link now being visited */•a:hover {color:red} /* when the mouse hovers over it */Adapted from: http://www.w3schools.com/css/demo_default.htmMore about selectors, I•As we have seen, an XML or HTML tag can be used as a simple element selector: body { background-color: #ffffff }•You can use multiple selectors: em, i {color: red} You can repeat selectors: h1, h2, h3 {font-family: Verdana; color: red}h1, h3 {font-weight: bold; color: pink}•When values disagree, the last one overrides any earlier ones•The universal selector * applies to any and all elements: * {color: blue}•When values disagree, more specific selectors override general ones (so em elements would still be red)Example of overridingMore about selectors, IIA descendent selector chooses a tag with a specific ancestor:–p code { color: brown }–selects a code if it is somewhere inside a paragraph•A child selector > chooses a tag with a specific parent: h3 > em { font-weight: bold } selects an em only if its immediate parent is h3•An adjacent selector chooses an element that immediately follows another: b + i { font-size: 8pt }Example: <b>I'm bold and</b> <i>I'm italic</i> Result will look something like: I'm bold and I'm italicMore about selectors, III•A simple attribute selector allows you to choose elements that have a given attribute, regardless of its value:–Syntax: element[attribute] { ... }–Example: table[border] { ... }•An attribute value selector allows you to choose elements that have a given attribute with a given value:–Syntax: element[attribute="value"] { ... }–Example: table[border="0"] { ... }The class attribute•The class attribute allows you to have different styles for the same element–In the style sheet:p.important {font-size: 24pt; color: red}p.fineprint {font-size: 8pt}–In the HTML:<p class="important">The end is nigh!</p>F<p class="fineprint">Offer ends 1/1/97.</p>•To define a selector that applies to any element with that class, just omit the tag name (but keep the dot): .fineprint {font-size: 8pt}The id attribute•The id attribute is defined like the class attribute, but uses # instead of .–In the style sheet:p#important {font-style: italic} or# important {font-style: italic}–In the HTML:<p id="important">•class and id can both be used, and do not need to have different names:<p class="important" id="important">div and span•div and span are HTML elements whose only purpose is to hold CSS information•div ensures there is a line break before and after (so it’s like a paragraph); span does not•Example:–CSS: div {background-color: #66FFFF} span.color {color: red}–HTML: <div>This div is treated like a paragraph, but <span class="color">this span</span> is not.</div>Using style sheets•There are three ways of using CSS:–External style sheet•This is the most powerful•Applies to both HTML and XML•All of CSS can be used–Embedded style sheet•Applies to HTML, not to XML•All of CSS can be used–Inline styles•Applies to HTML, not to XML•Limited form of CSS syntaxExternal style sheets•In HTML,


View Full Document

Penn CIT 597 - First CSS Lecture Applications to HTML

Documents in this Course
DOM

DOM

21 pages

More DOM

More DOM

11 pages

Rails

Rails

33 pages

DOM

DOM

21 pages

RELAX NG

RELAX NG

31 pages

RELAX NG

RELAX NG

31 pages

RELAX NG

RELAX NG

31 pages

RELAX NG

RELAX NG

31 pages

Rake

Rake

12 pages

Ruby

Ruby

58 pages

DOM

DOM

21 pages

Tomcat

Tomcat

16 pages

DOM

DOM

21 pages

Servlets

Servlets

29 pages

Logging

Logging

17 pages

Html

Html

27 pages

DOM

DOM

22 pages

RELAX NG

RELAX NG

30 pages

Servlets

Servlets

28 pages

XHTML

XHTML

13 pages

DOM

DOM

21 pages

DOM

DOM

21 pages

Servlets

Servlets

26 pages

More CSS

More CSS

18 pages

Servlets

Servlets

29 pages

Logging

Logging

17 pages

Load more
Download First CSS Lecture Applications to HTML
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view First CSS Lecture Applications to HTML and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view First CSS Lecture Applications to HTML 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?