Upload
didier
View
55
Download
0
Embed Size (px)
DESCRIPTION
Cascading Style Sheets (CSS) Xingquan (Hill) Zhu [email protected]. 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 - PowerPoint PPT Presentation
Citation preview
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
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
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>
CSS 1-5
CSS Validation
http://jigsaw.w3.org/css-validator/validator-upload.html
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
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
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
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.
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
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
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>
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
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>
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
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
CSS 1-17
Property Value Forms
There are 60 different properties in 7 categories Fonts Lists Alignment of text Margins Colors Backgrounds Borders
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 */
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
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)
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)
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
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)
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
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
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
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
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
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
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