1 / 55

CSC 2720 Building Web Applications

CSC 2720 Building 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.

tadeo
Download Presentation

CSC 2720 Building Web Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. CSC 2720Building Web Applications Cascading Style Sheets (CSS)

  2. 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)

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

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

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

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

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

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

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

  10. 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; }

  11. Specifying Internal Style Sheet • Use <style> tag in <head> section • Add <!-- and --> between statements to hide the statements from being displayed by browsers that do not understand <style> elements. <head> … <style type="text/css"> <!-- hr { color: sienna; } p { margin-left: 20px; } body { background-image: url("images/back40.gif"); } --> </style> … </head>

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

  13. 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 …

  14. 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 }

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

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

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

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

  19. 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; }

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

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

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

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

  24. 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)

  25. 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; }

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

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

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

  29. 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 }

  30. 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 }

  31. 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)

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

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

  34. 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 }

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

  36. 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); }

  37. 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; }

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

  39. 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 }

  40. Length Units

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

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

  43. 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 */

  44. 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; }

  45. 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; }

  46. 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; }

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

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

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

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

More Related