CSC 2720 Building Web Applications

CSC 2720Building Web Applications Cascading Style Sheets (CSS)

Benefits of Cascading Style Sheets • Separate document presentation from document content • More features for formatting the appearance • Can define font, size, background color, background image, margins, etc. • Share style sheets across multiple documents or entire Web site • Reduce development and maintenance time • Can specify a class definition for a style, effectively defining new HTML elements • Flexible – rules are applied in a hierarchical manner (precedence rules)

How do Style Sheets work? • Browser may ignore some or all of the rules specified in the style sheets.

Cascading Style Sheets • A simple text file with “.css suffix” • CSS, Level 1 (1996) • Concerned with applying simple styles to HTML elements • CSS, Level 2 (1998) • Incorporates and extends CSS-1 • Supports media-specific style sheets (visual browsers, aural devices, printers, etc) • CSS, Level 3 (Under development) • Incorporates and extends CSS-2 • Focused on modularization of the CSS specification • New selectors, fancy borders and backgrounds, vertical text, user interaction, speech and much more. • Note: • A browser may not support all features in CSS level 1 and 2 • See http://www.westciv.com/style_master/academy/browser_support/ for info about browser's support for CSS.

What kinds of style does CSS support? • CSS 1 • Font properties such as typeface and emphasis • Color of text, backgrounds, and other elements • Text attributes such as spacing between words, lines • Alignment of text, images, tables, etc. • Margin, border, padding, and positioning of most elements • Dimension • CSS 2 • Relative and fixed positioning of most elements • Bidirectional texts • New font properties

Select an element in the HTML file • What are statements, selectors, declarations and properties? • How to specify them?

CSS Syntax A single statement Property names and values (3 properties here) selector body { font-family: Verdana,Helvetica,sans-serif; font-size: 1em; text-align:justify; } /* CSS Comments */ declaration

CSS Syntax • Statement must have one or more selectors and a declaration. • Selector specifies which HTML elements to be affected. • Declaration is one or more properties separated by semicolons “;”. • Property has name and value separated by a colon “:”. • Some values have unit • White space is ignored but can improve readability

Three Ways of Using CSS • External Style Sheet • Store CSS code in an external file (usually with .css extension) • Apply to any document that explicitly includes the .css file • Internal or Embedded Style Sheet • Defined in HTML document • Affect only the page where the style is defined • Inline Styles • Specified as an attribute in HTML tag • Apply to only one element

Specifying External Style Sheet • Use <link> tag in <head> section to associate an external style sheet to the HTML file. <head> … <link rel="stylesheet" type="text/css" href="style1.css" > …</head> style1.css h1 { text-align: center; font-family: Arial; } h2 { color: #440000; text-align: center; font-family: Arial Black, Arial, Helvetica; }

Specifying Internal Style Sheet • Use <style> tag in <head> section • Add  between statements to hide the statements from being displayed by browsers that do not understand <style> elements. <head> … <style type="text/css">  </style> … </head>

Specifying Inline Styles • Use attribute style in HTML tag to specify properties applied to that element <p style="color: sienna; margin-left: 20px;"> This is a paragraph </p>

CSS-1 & CSS-2 Selectors • HTML element selectors • Selector groups • Class selectors • ID selectors • Contextual selectors • Link pseudo class selectors • Pseudo element selectors • Dynamic pseudo class selectors • Child selectors • More advanced selectors …

HTML element selectors • The selector is a name of an HTML element. hr { color: sienna; } p { font-weight: bold; } • Selectors can be grouped together as comma-separated list H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif } is equivalent to: H1, H2, H3 { font-family: sans-serif }

Universal Selector • "*", the universal selector, matches the name of any element type. /* All elements use this font */ * { font-family: sans-serif }

Class Selectors • Class selector allows you define different styles for the same type of HTML element. • e.g.: Define two classes of paragraph, one center justified and one right justified. • HTML elements + class  "New elements" /* Define two classes for element 'p' */ p.right {text-align: right;} p.center {text-align: center;} /* Define a global class usable by all elements */ .warning { font-color: red; } <p class="right">This paragraph is right-aligned.</p> <p class="center">This paragraph is center-aligned.</p> <b class="warning">Don't you dare to fall asleep!</b>

ID Selectors • ID selector allows you define styles for a specific element (not a specific kind of elements.) p#special { font-weight: bold; } /* Specific style for element with id="layer1" */ #layer1 { position:absolute; left:140; top:140; z-Index:1 } <p id="special">I love Java!<p> <p>This is some paragraph</p> <div id="layer1"><img src="dummy.gif" /></div>

Contextual Selectors • Decendent selector: • Selectors separated by space characters • Select elements that are contained in some element • e.g.: div strong {text-decoration: underline} • Select: <div><strong> selected</strong></div> • Select: <div><p>…<strong> selected </strong>…</p></div> • i.e., all the <strong> elements inside a div element. • Child selector: • Selectors separated by ">" character • Select only the immediate children • e.g.: div > strong {text-decoration: underline} • Select: <div><strong> selected </strong></div> • Does not select: <div><p><strong> not selected </strong></p></div>

Pseudo-Classes and Pseudo-Elements • Pseudo-class selector • Based on a set of predefined qualities that an HTML element can possess. • No actual class attributes exist in the markup. • :active, :link, :visited, :hover, :focus, :first-child • Pseudo-element selector • Identify a virtual element that doesn’t exist in the markup. • :before, :after, :first-letter, :first-line • e.g.: p:first-child:first-line { font-size: larger; }

Link Pseudo-Classes Hover <style type="text/css">.class1 A:link {text-decoration: none}.class1 A:visited {text-decoration: none}.class1 A:active {text-decoration: none}.class1 A:hover {text-decoration: underline; color: red;}Background colored link .class2 A:link {background: #FFCC00; text-decoration: none}.class2 A:visited {background: #FFCC00; text-decoration: none}.class2 A:active {background: #FFCC00; text-decoration: none}.class2 A:hover {background: #FFCC00; font-weight:bold; color: red;}</style>

Dynamic Pseudo Classes • Apply to any element (not just links) in the • Active state • While the mouse is being pressed on the selected element • Hover state • While the mouse is over the selected element • Focus state • While the selected element has the keyboard focus • e.g.: change the background color of a paragraph to green while the mouse is over it. • p:hover { background: green; } • Note: • IE does not yet support pseudo class on elements other than links. • Pseudo class must be specified for elements (cannot be a generic class or generic id) • p:hover and div.someClass:active are ok, but .someClass:hover is not ok

Other Selectors • Adjacent sibling selectors • e.g.:h1 + h2 { margin-top: -5mm } selects H2 if (a) h1 and h2 have the same parent (b) h2 immediately follows h1 • Attribute selectors • Select elements with specific attributes • e.g.:h1[title] { color: blue; } selects h1 that has an attribute named "title" (regardless of its value). • e.g:span[type=example] { color: blue; }selects span element with attribute type="example" • See CSS-2 specification for detailed info http://www.w3.org/TR/REC-CSS2/selector.html

Additional Syntax Rules • Keywords must not be placed within quotes • Examples: • width: "auto"; Incorrect width: auto; Correct • border: "none"; Incorrect border: none; Correct • background: "red"; Incorrect background: red Correct • All CSS style sheets are case-insensitive • Exceptions: font name, HTML attribute values such as values of class and id.

Inheritance • An element inherits its parent's properties if the properties are not specified for the element. • e.g.: <h1 style="color:blue">The headline <em>is</em> important!</h1> The emphasized text "is" is displayed in blue color. • Computed values, not actual values, are inherited. <body style="font-size: 10pt"> <h1 style="font-size: 120%"> A <em>large</em> heading</h1></body> The font size for h1 is 12pt (relative to the font size of its parent). The font size for em is also 12pt (not 14.4pt)

The Cascade (Precedence Rules) • Author rules > User rules > User agents • Rules marked “important” have the highest priority, and they overrides the normal order of cascade. • User's "important" rules have higher priority than the same author's "important" rules. • Syntax: h1 { font-size: 16pt !important; font-family: sans-serif; }

More specific rules have precedence over less specific rules • A selector's specificity is calculated as follows: • count the number of ID attributes in the selector (= a) • count the number of other attributes and pseudo-classes in the selector (= b) • count the number of element names in the selector (= c) • ignore pseudo-elements. • e.g.: * /* a=0 b=0 c=0 -> specificity = 0 */ LI /* a=0 b=0 c=1 -> specificity = 1 */ UL LI /* a=0 b=0 c=2 -> specificity = 2 */ UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */ H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ #x34y /* a=1 b=0 c=0 -> specificity = 100 */ • In case of tie, the last rule has priority.

Property Categories • Text style – Fonts properties, … • Text layout – Text alignments, … • Foreground & Background • Border • Margin • Padding • Page layout • Element type • User interface

Text Style Properties • What properties does text have? • Color • Font-specific • font-weight • font-family • font-size • font-style • font-size-adjust • font-stretch • Text-specific • text-decoration • text-transform • text-shadow

Useful Font Properties • font-weight • Relative weight (boldness) of font • normal | lighter | bold | bolder | 100 | 200 | ... | 900 | inherit H1 { font-weight : 200 } H2 { font-weight : bolder } • font-style • Font face type within a family • normal | italic | oblique P { font-style : normal } TH { font-style : italic }

Useful Font Properties, cont. • font-size • Either relative or absolute size of font • Absolute length value: pt, pc, in, cm, mm • Relative length values: em, ex, px, % • Absolute size: xx-large | x-large | large | medium | small | x-small |xx-small • Relative size: smaller | larger STRONG { font-size: 150% } P { font-size: 14pt } P { font-size: xx-large }

Useful Font Properties, cont. • font-family • Typeface family for the font H1 { font-family: Arial } /* Arial is a font name */ H2 { font-family: serif } /* serif is a keyword, which suggests the user agents to use a font that belong to the "serif" font family */ • Generic font families: • serif: Times New Roman • sans-serif: Arial • cursive: Comic Sans MS • fantasy: Decorative fonts • monospace: Courier New (Font with fixed width)

Text layout properties • How text is layout on a page? • Letter-spacing • Word-spacing • Line-height • Vertical-align • Text-indent • Text-align • Direction

Useful Text Properties • text-decoration • Describes text additions or “decorations” that are added to the text of an element • none | underline | overline | line-through | blink P { text-decoration: underline; } • vertical-align • Determines how elements are positioned vertically • top | bottom | baseline | middle | sub | super | text-top | text-bottom | % • text-align • Determines how paragraphs are positioned horizontally • left | right | center | justify

Useful Text Properties, cont. • text-indent • Specifies the indentation of the first line of the paragraph • +/– pt, pc, in, cm, mm | +/– em, ex, px, % P { text-indent: -25px } /* Hanging indent */ • line-height • Specifies the distance between two consecutive baselines in a paragraph • normal | number | pt, pc, in, cm, mm | em, ex, px, % .double { line-height: 200% } .triple { line-height: 3 } /* 3x the font size */ DIV { line-height: 1.5em }

Background Properties • How can we set the background of an element? • Background-color • Background-image • Background-attachment • Background-repeat • Background-position • background

Useful Color and Background Properties • color • Color of the text (foreground color) • color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb) | rgb(rrr%, ggg%, bbb%) P { color : blue; } H1 { color : #00AABB; } H3 { color : rgb(255, 0, 0 ); } /* red */ • background-color • Background color • transparent | all possible values of property "color" • background-image • none | url(filename) • Specifies an image to use as the background of region H2 { background-image: url(Bluedrop.gif); }

Useful Color and Background Properties • background-repeat • Specifies how to tile the image in the region • repeat | repeat-x | repeat-y | norepeat BODY { background-image: url(Bluedot.gif); background-repeat: repeat-x; } • background • Lets you combine properties in a single entry P { background: url(wallpaper.jpg) repeat-x; }

Useful Color and Background Properties • background-attachment • Specifies whether background image is fixed or scrolled with document • scroll | fixed • e.g: Creates an infinite vertical band that remains "glued" to the viewport when the element is scrolled. BODY { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; } • note: "fixed" fixes image w.r.t. to the viewport (the browser displaying area) and not w.r.t. to the containing black.

Useful Color and Background Properties • background-position • Specifies initial position of the background image • Specified using two values • % % • <length> <length> /* fixed absolute distance */ • [top | center | bottom] [left | center | right] BODY { background: url("banner.jpeg") right top } /* 100% 0% */ BODY { background: url("banner.jpeg") top center } /* 50% 0% */ BODY { background: url("banner.jpeg") center } /* 50% 50% */ BODY { background: url("banner.jpeg") bottom } /* 50% 100% */ BODY { background: url(banner.jpeg") 100px 100px }

Length Units

margin border padding This is the Content padding border margin Box Model • Every displayable element is contained in a box that has a content area (text, image, etc.), an optional padding, border and margin areas.

Content, Padding, Border and Margin • Content area is the smallest rectangle containing the rendered data that make up the element. • Padding is the space between the content and the element's borders. • Padding takes the background of the element • Border can have styles • Margin is the space between the element's borders and the "containing box" (which belongs to the element's parent or ancestor in the document tree) • Margin is always transparent

Padding and Margin • Padding and margin can be further divided into four sub-areas -- top, right, bottom, left • Padding areas take the background of the element. • Margin areas are always transparent (takes the containing box background). • Does not apply to table elements (table, td, tr, th) P { padding-top: 2em; margin-right: 10em; } • Short hand for setting margin (same for padding) body { margin: 2em } /* all margins set to 2em */ body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

Border Properties • Border has the following properties • width • <length> | thin | medium | thick • color • <color value> | transparent • Default value is the "color" property value of the element • style • none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset • When style is "none", the border width is zero P { border-width: 2em; border-color: red; border-style: solid; }

Border Properties • Border can also divided into top, left, bottom and right edges. P { border-top-width: 2em; border-right-width: 4em; border-bottom-width: 2em; border-left-width: 4em; border-top-style: solid; border-right-style: double; border-bottom-style: solid; border-left-style: solid; } /* Same as the following shorthand writing */ P { border-width: 2em 4em; border-style: solid double solid solid; }

Border Properties /* Another form of shorthand writing of the previous example The specified values for each property must be in the following order: <width> <style> <color> */ P { border-top: 2em solid; border-right: 4em double; border-bottom: 2em solid; border-left: 4em solid; } /* Other examples: Applies to all four edges */ DIV { border: thin solid blue; } SPAN { border: 0.2in dotted red; }

Images and Floating Elements • width, height • Specify a fixed size for an element (usually an image) • auto | <length> img.bullet { width: 50px; height: 50px; } • float • This property lets elements float into the left or right margins with text wrapping around • none | left | right • clear • Controlling flow next to float • none | left | right | both

SPAN and DIV • <SPAN> • An inline-level element in HTML, meaning that no line breaks are inserted before or after the use of it. • Other inline-level element: <b>, <img>, <em>, … • <DIV> • A block-level element in HTML, meaning that line breaks are automatically inserted to distance the block from the surrounding content. • Other block-level elements: <p>, <table>, <ol>, <h1>, … • The whole block can be easily positioned on the page.

CSS Positioning Schemes • Static • Follows normal flow • Relative • Places an element with respect to where it would be statically positioned (i.e. relative to the position assigned by the browser). • Absolute positioning • An element will be located with respect to its parent element (containing box) • Fixed positioning • The page scroll, the elements also scroll (remain fixed in the page). • Not supported in IE

Useful Positioning Properties • top, left, bottom, right • Specifies the top/left/bottom/right sides of the layer relative to the parent window • <length> | % | auto • position • Describes how the position is defined to the parent window • absolute | relative | static | fixed • visibility • Determines whether a layer is visible or hidden • visible | hidden

CSC 2720 Building Web Applications