CSSThe problem with HTMLCascading Style SheetsCSS syntax, ICSS syntaxExample of CSSMore about selectors, IExample of overridingMore about selectors, IIMore about selectors, IIIMore about valuesThe 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 EndJan 14, 2019CSSFirst CSS LectureApplications to HTML2The problem with HTMLHTML was originally intended to describe the content of a documentPage authors didn’t have to describe the layout--the browser would take care of thatThis 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 pagesAs a result, HTML acquired more and more tags to control appearanceContent and appearance became more intertwinedDifferent browsers displayed things differently, which is a real problem when appearance is important3Cascading Style SheetsA Cascading Style Sheet (CSS) describes the appearance of an HTML page in a separate documentCSS has the following advantages:It lets you separate content from presentationIt lets you define the appearance and layout of all the pages in your web site in a single placeIt can be used for both HTML and XML pagesCSS has the following disadvantage:Most browsers don’t support it very well4CSS syntax, ICSS 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 greenA CSS file is just a list of these selector/descriptor pairsSelectors may be simple HTML tags or XML tags, but CSS also defines some ways to combine tagsDescriptors are defined in CSS itself, and there is quite a long list of them5CSS syntaxThe general syntax is: selector { property: value }or selector, ..., selector { property: value; . . . property: value}whereselector 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 tagSpaces after colons and semicolons are optionalA semicolon must be used between property:value pairs, but a semicolon after the last pair is optional6Example 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.htm7More about selectors, IAs 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 onesThe 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)8Example of overriding9More 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 paragraphA child selector > chooses a tag with a specific parent: h3 > em { font-weight: bold } selects an em only if its immediate parent is h3An 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 italic10More about selectors, IIIA 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"] { ... }11More about valuesAs we have seen, the syntax for a CSS rule is:selector, ..., selector { property: value; . . . property: value }The value is whatever occurs between the colon and the semicolon (or closing brace)Example: * {font-family: Trebuchet, Verdana, sans-serif;}This means to use the Trebuchet font for everything, if it is available; else use the Verdana font, if available; else use whatever sans serif font the browser uses as defaultsection {border: thin solid blue;}This means to put a borders around section elements; the borders are to be thin and solid and blue12The class attributeThe class attribute allows you to have different styles for the same elementIn 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>D<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}13The id attributeThe 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">14div and spandiv and span are HTML elements whose only purpose is to hold CSS
View Full Document