CSCE Chapter 3 (Cascading Style Sheets) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department of Computer Science & Engineering The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 2 Structure and content do NOT equal presentation! Presentation is not meant to be determined by HTML elements Defaults exist = 24-pt, bold, Times Roman Reason: Not all Web pages display in PC browser windows Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 3 Styles provide powerful control over the presentation of web pages. Styles are implemented with three different scopes: local, internal, and external. Local styles are confined to a single element Internal styles affect elements in an entire page External styles can affect multiple pages. The term cascading comes from the effect of the way the different styles are applied when more than one exists. Local styles take precedent over internal styles, and internal styles take precedence over external styles. Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 4 Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More Redefines the presentation rule (style) for certain elements “Internal” because contained within the HTML source document itself Styles may be defined using different style sheet languages so … … the language used must be specified Internal Style Sheets

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 5 Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More element in section … Internal Style Sheets The style sheet instructions in this elements are: Written in plain text format Using the cascading style sheet language

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 6 Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More Also specify default style sheet language for entire HTML document: elements go in the section Internal Style Sheets

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 7 Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More Colors Using the element, placed within the element, to create an internal style sheet (defining the color property of the and elements in this example): h2 {color:red} h3 {color:#D61130} h2 { color:red } Style definition Name of tag Property Value

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 8 Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More Changes made to the internal style sheet are reflected throughout the document There are over 16 million colors available using the RGB hexadecimal color numbering Colors h2 { color:#D61130 }

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 9 Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More Styles can also be used to align headings with the text-align property – left, right, and center, for example: h2 {color:red; text-align:center} Alignment

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 10 Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More Font sizes can be set by using: absolute sizes in points (24pt), percentage (150%), or to preset values of xx-small, x-small, small, medium, large, x-large, and xx-large. When fonts are set using absolute sizes, control is taken away from the user, which may make some pages inaccessible to visually impaired persons. Font Size

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 11 Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More The font-style property allows setting an element to italic, or oblique (slanted text similar to italics) The font-weight property is used to create a “bold” appearance and can be set to values from 100 to 900, where 700 is regular bold text Bold and Italic Revisted

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 12 Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More h1 {text-align:center;font-style:italic; font-size:30pt} h3{color:red; font-size:19pt; font-weight:700} Bold and Italic Revisited

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 13 Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More text-decoration controls underline, overline, line- through, and blink (Ugh!) text-transform allows setting text to uppercase and lowercase font-variant allows setting text to small-caps background controls the color background behind the text All these properties can employ a value of “none” which allows removal of any property assigned by another style Beyond Bold and Italic

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 14 Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More Paragraph styles only work with complete elements (both the and tags are used) and not when only the tag is used by itself Properties include text-indent for indentation (a positive value is a normal indent, a negative value, a hanging indent) and line-height Property values can be in points (pt) or a percentage (150%) of the font size Kerning (spacing between letters) can adjusted with the letter-spacing property Paragraphs

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 15 Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More Remember: only works for content enclosed within elements Paragraphs p {font-size:14pt}

CSCE Chapter 3 (Cascading Style Sheets) Indent and line spacing p {text-indent:25pt; line-height:24pt} p {text-indent:12%; line-height:150%} Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Font Families What if not installed on user’s browser? p {font-family: “ Lucida ” } Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Include more than one font families p {font-family:“Lucida”, “Arial”} Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Formatting Fonts Using Styles Warning: multiple fonts may not have the impact you intend User’s display may not include the fonts you specified Common fonts may be the best choice overall Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) You Can Compress Definition p {font-style:italic; font-weight:500; font-variant:small-caps; font-size:14pt; line-height:24pt; font-family:“Lucida”, “Arial”} p {font: italic 500 small-caps 14pt/24pt “Lucida “, ”Arial”} Font Size Bold and Italic and Beyond Paragraph Styles and Font Families The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Do all paragraphs have to be the same? Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More Classes are used to create multiple versions of the same basic structure, inheriting characteristics from the parent class, and specifying its own. Previously set properties can be changed to a different value or returned to default by specifying the property value “none”.

CSCE Chapter 3 (Cascading Style Sheets) Tags with Multiple Styles The same type of element can have multiple definitions called “classes” p {text-align:justify; font-weight:bold} p.intro {text-align:center; color:red} Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Tags with Multiple Styles The p.intro class includes the styles of the p class but changes those styles How is this class invoked? Explains why “none” is an option text-transform; font-variant … Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Local Styles Local styles take precedence over other style definitions The text in this paragraph will The text in this paragraph won’t be red Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) No existing tag is quite right. Now what? Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Custom Tags Can create entirely new elements Generic tags: (block level) (inline) Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Custom Tags span {font-size:18pt} Let me make something perfectly clear. Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Classes may be defined for custom tags span.red {color:red} Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) I’m going to get tired of entering style definitions into all my web pages. Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Text-only file Contains style definitions only h2 {color:red} h1 {font-size:24pt} p {text-align:center} p.small {font-size:10pt} No tags needed Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More External Style Sheets

CSCE Chapter 3 (Cascading Style Sheets) External Style Sheets Save in a file with a.css extension css = cascading style sheets Local, internal and external may be present in the same document Local overrides internal Internal overrides external Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) External Style Sheets How to specify external style sheets? Add tag in section Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Possible Problems Problem: older versions of browsers might not recognize style definitions Could use comments: <!-- p {text-indent:25pt; line-height:24pt} --> Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) More Problems XHTML may not recognize this use of comments Solution: use method If older version of browser does not recognize this tag it will ignore it Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More

CSCE Chapter 3 (Cascading Style Sheets) Benito Mendoza 35 Implementing complex style sheets can be a little bit frustrating. Some times is difficult were the syntax errors are. The browser support for styles in general is not uniform. Try out their styles implementation on all the target browsers or stay with the basic styles Creating an Internal Style Sheet Experimenting with Colors Changing the Alignment The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More Last Thing …

CSCE Chapter 3 (Cascading Style Sheets) Exercise Debugging Exercise, p. 81 Correct errors Using Local Styles Creating Custom Tags External Style Sheets The Power of Styles Formatting Fonts Using Styles One Tag, Multiple Styles: Classes & More