CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu

CSS1-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

CSS1-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

CSS1-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)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)Example  Can be applied to any number of documents  In separate files, potentially on any server on the Internet  A 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 = " 

CSS1-5 CSS Validation validator/validator-upload.html

CSS1-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

CSS1-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

CSS1-8 Style Specification Formats: Document level  Style sheet appears as a list of rules that are the content of a tag  The 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

CSS1-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 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.

CSS1-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

CSS1-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

CSS1-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  This is narrow  This is wide class

CSS1-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  … Example

CSS1-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 – Welcome to my Home

CSS1-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

CSS1-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

CSS1-17 Property Value Forms  There are 60 different properties in 7 categories  Fonts  Lists  Alignment of text  Margins  Colors  Backgrounds  Borders

CSS1-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 */

CSS1-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

CSS1-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)

CSS1-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;  Text-transform  Capitalize; uppercase; lowercase; none  Text-indent  Value (percentage)  Line-height  Value (number, percentage)

CSS1-22 Position properties  Absolute positioning  Position: absolute; top, left, z-index Example # one{ position:absolute; top: 1em; left: 1em; }  Relative positioning  Position: relative; Example Example  Span Grouping element: does not apply any inherent formatting to its contents

CSS1-23 Alignment of Text  Element dimensions  Specify the actual dimensions of each page element Example Example  Nested elements ExampleExample  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)

CSS1-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

CSS1-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

CSS1-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

CSS1-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  Example

CSS1-28 User Style Sheets  Users format pages based on preference   User Styles .note { font-size: 9pt }   Thanks for visiting my Web site. I hope you enjoy it.  Please Note: This site will be moving soon. Please check periodically for updates.   Example Example

CSS1-29 Other interesting stuff  Cursor ExampleExample  Specifies the type of cursor to be displayed when pointing on an element. Cursor: url(sample.cur), cursor: crosshair  First letter (pseudo element) ExampleExample  Adds special style to the first letter of a text P:first-letter{color:#000; font-size:xx-large}  Mighty Hover ExampleExample Complete CSS2 Properties: nce.asp

CSS1-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