css1-1 cascading style sheets (css) xingquan (hill) zhu [email protected]
TRANSCRIPT
![Page 2: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/2.jpg)
CSS 1-2
CSS Introduction Levels of Style Sheets
Inline style sheets Document-level style sheets (embedded style sheets) External style sheets
Style Specification Formats Depends on the level of the style sheet Inline vs Document level
Selector Forms Simple selector, Class selector, Generic selector, Id
selector Pseudo Classes Property value forms
Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders
![Page 3: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/3.jpg)
CSS 1-3
Introduction Evolution
The CSS1 specification was developed in 1996 CSS2 was released in middle-1998 CSS3 is on its way
Things you should know about CSS CSSs provide the means to control and change
presentation of HTML documents• But Why? Element presentation vs document structure
CSS is not technically HTML, but can be embedded in HTML documents
Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents
Style is specified for a tag by the values of its properties
![Page 4: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/4.jpg)
CSS 1-4
Levels of Style Sheets
Inline Specified for a specific occurrence of a tag and apply only to
that tag Appears in the tag itself (Example)
Document-level style sheets Apply to the whole document in which they appear Appears in the head of the document (Example)
External style sheets (Example) Can be applied to any number of documents In separate files, potentially on any server on the Internet A <link> tag is used to specify that the browser is to fetch and
use an external style sheet file <link rel = "stylesheet" type = "text/css" href = "http://www.wherever.org/termpaper.css"> </link>
![Page 5: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/5.jpg)
CSS 1-5
CSS Validation
http://jigsaw.w3.org/css-validator/validator-upload.html
![Page 6: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/6.jpg)
CSS 1-6
CSS Introduction Levels of Style Sheets
Inline Document-level style sheets (embedded style sheets) External style sheets
Style Specification Formats Depends on the level of the style sheet Inline vs Document level
Selector Forms Simple selector, Class selector, Generic selector, Id
selector Pseudo Classes Property value forms
Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders
![Page 7: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/7.jpg)
CSS 1-7
Style Specification Formats
Format depends on the level of the style sheet
Inline Style sheet appears as the value of the style
attribute General form:
style = "property_1: value_11, value_12, value_13; property_2: value_2;
…property_n: value_n;“
Final ; optional but preferred
Example
![Page 8: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/8.jpg)
CSS 1-8
Style Specification Formats: Document level
Style sheet appears as a list of rules that are the content of a <style> tag
The <style> tag must include the type attribute, set to "text/css"
The list of rules Selector1 {property_1: value_1; property_2:
value 2} Selector2 {property: value}
Comments in the rule list must have a different form - use C comments (/*…*/)
Example
![Page 9: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/9.jpg)
CSS 1-9
Style Specification Formats: Conflicting Styles
Styles defined by the user take precedence over styles defined by the user agent
Styles defined by authors take precedence over styles defined by the user.
Styles defined for parent elements are also inherited by children (nested) elements
Inheritance Example In case of conflict
Properties defined for child and descendant elements have a greater specificity than properties defined for parent and ancestor elements.
![Page 10: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/10.jpg)
CSS 1-10
CSS Introduction Levels of Style Sheets
Inline Document-level style sheets (embedded style sheets) External style sheets
Style Specification Formats Depends on the level of the style sheet Inline vs Document level
Selector Forms Simple selector, Class selector, Generic selector, Id
selector Pseudo Classes Property value forms
Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders
![Page 11: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/11.jpg)
CSS 1-11
Selector Forms
Simple Selector Form The selector is a tag name or a list of tag
names, separated by commas• Simple examples:
– H1, h3, p
• Contextual selectors– Ol ol li
– P em
![Page 12: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/12.jpg)
CSS 1-12
Selector Forms: Class Selector
Used to allow different occurrences of the same tag to use different style specifications
A style class has a name, which is attached to a tag name p.narrow {property: value; …} p.wide {property: value; …}
The class you want on a particular occurrence of a tag is specified with the class attribute of the tag <p class = "narrow"> This is narrow </p> <p class = "wide"> This is wide class </p>
![Page 13: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/13.jpg)
CSS 1-13
Selector Forms: Generic Selector
A generic class can be defined if you want a style to apply to more than one kind of tag
A generic class must be named, and the name must begin with a period .really-big { … }
Use it as if it were a normal style class <h1 class = "really-big"> … </h1> … <p class = "really-big"> … </p>
Example
![Page 14: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/14.jpg)
CSS 1-14
Selector Forms: id Selector
Allow the application of a style to one specific element General form:
• #specific-id {property-value list} Example:
• #section14 {font-size: 20}• When referring to this the id selector
– <h1 id=“section14”> Welcome to my Home </h1>
![Page 15: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/15.jpg)
CSS 1-15
Pseudo Classes
Pseudo classes are styles that apply when something happens, rather than because the target element simply exists
Names begin with colons hover classes apply when the mouse cursor is
over the element focus classes apply when an element has
focus
Example
![Page 16: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/16.jpg)
CSS 1-16
CSS Introduction Levels of Style Sheets
Inline Document-level style sheets (embedded style sheets) External style sheets
Style Specification Formats Depends on the level of the style sheet Inline vs Document level
• Conflicting Styles Selector Forms
Simple selector, Class selector, Generic selector, Id selector
Pseudo Classes Property value forms
Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders
![Page 17: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/17.jpg)
CSS 1-17
Property Value Forms
There are 60 different properties in 7 categories Fonts Lists Alignment of text Margins Colors Backgrounds Borders
![Page 18: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/18.jpg)
CSS 1-18
Units of Measurement Units (no space is allowed between the value
and the unit specification) px - pixels in – inches (1 inch = 2.54 cm) cm - centimeters mm - millimeters pt – points (1/72 inch) pc - picas (12 points) em - height of the letter ‘M’ ex-height - height of the letter ‘x’
Example P { line-height:150% } /* 150% of ‘font-size’ */ P {line-height: 1.5em} #banner { height: 60%; width:70%; margin-left:15%;
border: 1px solid #000} /* a box */
![Page 19: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/19.jpg)
CSS 1-19
Font Property Font-family
Value is a list of font names - browser uses the first in the list it has
font-family: Arial, Helvetica, Courier Generic fonts: serif, sans-serif, cursive, fantasy, and
monospace (defined in CSS) Browser has a specific font for each If a font name has more than one word, it should be
single-quoted
Font-size Possible values: a length number or a name, such as
xx-small, smaller, xx-large, etc
Example
![Page 20: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/20.jpg)
CSS 1-20
Font Property
Font-style italic, oblique (useless), normal
Font-weight - degrees of boldness bolder, lighter, bold, normal Could specify as a multiple of 100 (100 – 900)
• 400 is the normal size
Font (shorthand) For specifying a list of font properties font: bolder 14pt Arial Helvetica Order must be: style, weight, size, name(s)
![Page 21: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/21.jpg)
CSS 1-21
Text related Properties
Text-decoration line-through, overline, underline, none
Letter-spacing; Word-spacing Value is any length property value
Text-align Left; right; center; justify
Vertical-align Baseline; sub; super; top; text-top; middle; bottom;
text-bottom; <percentage> Text-transform
Capitalize; uppercase; lowercase; none Text-indent
Value (percentage) Line-height
Value (number, percentage)
![Page 22: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/22.jpg)
CSS 1-22
Position properties
Absolute positioning Position: absolute; top, left, z-index
Example# one{
position:absolute; top: 1em; left: 1em;}
Relative positioning Position: relative; Example Span
• Grouping element: does not apply any inherent formatting to its contents
![Page 23: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/23.jpg)
CSS 1-23
Alignment of Text Element dimensions
Specify the actual dimensions of each page element Example
Nested elements Example The text-indent property allows indentation
Takes either a length or a % value The text-align property has the possible
values, Left (the default), center, right, or justify
Sometimes we want text to flow around another element the float property Left, right, and none (default)
![Page 24: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/24.jpg)
CSS 1-24
Alignment of Text (contd.)
If we have an element we want on the right, with text flowing on its left, we use the default text-align value (left) for the text and the right value for float on the element we want on the right
<img src = "c210.jpg" style = "float: right" />-- Some text with the default alignment – left
Clear float <p style=“float: clear” …
Example
![Page 25: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/25.jpg)
CSS 1-25
Border related properties
Box model Margin-top (right, left, bottom)
Value (percentage) Padding-top (right, left, bottom)
Value (percentage) Border-top-width (right, left, bottom)
Thin, medium, thick (value) Border-style
Dotted, dashed, double, none Border-color
Example
![Page 26: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/26.jpg)
CSS 1-26
Background
Background-color: Red; #0000FF
Background-image: url(myimage.jpg)
Background-repeat: Repeat; no-repeat; repeat-x; repeat-y:
Background-position: Top; center; bottom; left; right; 20px 20px
Background-attachment: Fixed; scroll;Background for single elements
Example
![Page 27: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/27.jpg)
CSS 1-27
List Property
list-style-type Disc, circle, square, decimal, lower-roman,
upper-roman, lower-alpha, upper-alpha, none.
Can also use an image for the bullets in an ordered list <li style = "list-style-image: url(bird.jpg)">
Example
![Page 28: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/28.jpg)
CSS 1-28
User Style Sheets
Users format pages based on preference
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>User Styles</title> <style type = "text/css">
.note { font-size: 9pt }</style>
</head> <body> <p>Thanks for visiting my Web site. I hope you enjoy it. </p><p class = "note">Please Note: This site will be
moving soon. Please check periodically for updates.</p> </body>
</html> Example
![Page 29: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/29.jpg)
CSS 1-29
Other interesting stuff
Cursor Example Specifies the type of cursor to be displayed when pointing on an
element. • Cursor: url(sample.cur), cursor: crosshair
First letter (pseudo element) Example Adds special style to the first letter of a text
• P:first-letter{color:#000; font-size:xx-large} Mighty Hover Example
http://icant.co.uk/csstablegallery/index.php?css=75#r75
Complete CSS2 Properties:
http://www.w3schools.com/css/css_reference.asp
![Page 30: CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu](https://reader035.vdocuments.site/reader035/viewer/2022062304/56649dc85503460f94abdc3e/html5/thumbnails/30.jpg)
CSS 1-30
CSS Introduction Levels of Style Sheets
Inline Document-level style sheets (embedded style sheets) External style sheets
Style Specification Formats Depends on the level of the style sheet Inline vs Document level
• Conflicting Styles Selector Forms
Simple selector, Class selector, Generic selector, Id selector
Pseudo Classes Property value forms
Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders