1 / 49

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS). Part 2. The Sources of Style Sheets. Embedded Style Sheets. <HTML> <HEAD> <STYLE type="text/css"> <!-- BODY {color: red} --> </STYLE> </HEAD> <BODY>

neviah
Download Presentation

Cascading Style Sheets (CSS)

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. Cascading Style Sheets(CSS) Part 2

  2. The Sources of Style Sheets

  3. Embedded Style Sheets <HTML> <HEAD> <STYLE type="text/css"> <!-- BODY {color: red} --> </STYLE> </HEAD> <BODY> ... </BODY> </HTML> The embedded style sheet appears in the header inside a <STYLE> element. All the text of the style sheet is inside an HTML comment so that browsers that do not support CSS will ignore the text.

  4. Inline Styles • Any tag, except the <HTML> tag itself, can have the style attribute • For example, the following will define the color of the paragraph to be green <P style="color: green"> and this is green</P>

  5. Imported Style Sheets • The @import rule imports style rules to the beginning of the style sheet • Usage: @import url(nameOfFile.css) • Several import rules may appear at the beginning of the style sheet • Import rules can appear in embedded style sheets or in external style sheets

  6. Linked Style Sheets • Links to external style sheets can appear in the header of an HTML page <HTML> <HEAD> <LINK rel="stylesheet" type="text/css” href=“name.css“ media=“print handheld”> </HEAD> <BODY> ... </BODY> </HTML>

  7. Inheritance and Cascading

  8. Inheritance of Properties • If an element does not match any rule for some given property, then that property either • has an initial value, or • inherits the value from the parent of the element • The CSS2 Specification determines which properties are inherited, for example • font-size is inherited • background-color is not inherited – its initial value is transparent

  9. Computed Values are Inherited • When a property is inherited, the computed value (and not a relative value) is inherited • See the example on next the slide

  10. Example • Given the rules: • BODY { font-size: 10pt } • H1 { font-size: 120% } • What will be the font size of the EM element in the following HTML segment? <BODY> <H1>A <EM>large</EM> heading</H1> </BODY>

  11. Cascading Order • When several rules define the same property and match the same element, then the cascading order is as follows: • Primary sort: weight and origin • Secondary sort: specificity of selectors • Final sort: order of appearance • The cascading order determines which rule applies

  12. Weight and Origin • Author style sheets override user style sheets • User style sheets override default (browser) style sheets • ! important declaration overrides normal declaration • If both author and user declarations have ! important, the user declarations still override the author declarations (in CSS2, but not in CSS1)

  13. Specificity of a Selector • Let a be the number of ID attributes in the given selector • Let b be the number of attributes and pseudo-classes in the given selector • Let c be the number of element names in the given selector • Sort the triples (a,b,c) lexicographically • Pseudo-elements are ignored

  14. Example • Consider the two rules • P {…} • .introductory {…} • If an element matches both, then the second rule has a higher specificity and overrides the first

  15. Order of Appearance • If two rules have the same weight, origin and specificity, then the one that appears last in the style sheet overrides the others • Rules in imported style sheets are considered to appear before local rules

  16. Lengths and Colors How to Specify Them

  17. Colors • Colors can be specified as names • Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow • Colors can be specified as #RRGGBB • Each of RR, GG and BB should be a hexadecimal number ranging from 00 to FF

  18. More Ways to Specify Colors • RGB(rrr,ggg,bbb) • Each of rrr, ggg and bbb should be a decimal number ranging from 0 to 255 • RGB(rrr%,ggg%,bbb%) • Each of rrr, ggg and bbb should be a decimal number ranging from 0 to 100

  19. Lengths • Lengths can be specified in absolute units • cm, in, mm, pc (6 picas per inch), pt (72 points per inch) • Length can be specified in relative units • em (the height of the current font), ex (the height of the letter “x” in the current font), px (pixels – relative to the screen resolution and size)

  20. Using % • Sometimes it is possible to use % to specify length (it is % of the current value of that property, as determined by inheritance and cascading) • For example font-size: 200%

  21. The Box Model

  22. Elements as Boxes • The element is the yellow area • The border is the thick black line • The padding is the area between the element & the border • The margin is around the border, on the outside (the dotted line is imaginary) <p> This is text. </p>

  23. Don’t Be Mislead by the Diagram • The padding has the same background color as the element • The border can get its own color and style • The margin is transparent • Margins may collapse, i.e., adjoining margins of two or more boxes may combine (overlap) to form a single margin <p> This is text. </p>

  24. Padding Properties • The following properties determine the width of the padding on each side • padding-top • padding-right • padding-bottom • padding-left • The value is • fixed length or % (of the width of the containing box) • See examples in W3Schools Alternatively, all four widths can be assigned to the property: padding

  25. Border Properties • The properties of the border are • The width (on each side) • the possible values are • thin, medium, thick, or • length in some units (not %) • The border style • The border color • See examples in W3Schools

  26. Margin Properties • The margin properties are the width on each side • The value is one of the following: • fixed length • % (of the width of the containing box) • Auto • See examples in W3Schools

  27. Visual Formatting Model Also Known as “Positioning”

  28. Inline-Level Elements • Inline-level elements do not start a new line, for example • <EM> • <SPAN> • Inline-level elements generate inline boxes, which are positioned horizontally (i.e., side-by-side on the same line until the line is full and then continuing on the next line)

  29. Block-Level Elements • Block-level elements start a new line, for example • <P> • <LI> • <DIV> • Block-level elements generate block boxes, which are positioned vertically (i.e., each box below the previous one)

  30. The Display Property • The display property may force an element to become inline-level or block-level • Some possible values of the display property are • inline • block • none • See example in W3Schools

  31. Normal Flow • Normal flow means that boxes are positioned left-to-right, top-to-bottom • Each block box starts a new line

  32. Floats • A floating box is • first laid out according the normal flow, and • then it is taken out of the normal flow and shifted left or right as far as possible • The normal flow continues along the side of a floating box • See example in W3Schools

  33. Absolute Positioning • The declaration position: absolute means that the box is taken out of the normal flow entirely and positioned in some fixed coordinates with respect to the containing block • See example in W3Schools • More examples

  34. Relative Positioning • The declaration position: relative means that the box is first laid out according to the normal flow and then it may be shifted relative to this position • The next box is laid out as if the previous relative box was not shifted • Relative positioning may cause boxes to overlap • See example in W3Schools

  35. The Clear Property • The clear property is used to indicate that a box should not be placed next to the side of a float, but rather below that float • The possible values are: • none (the initial value) • left • right • both

  36. More Properties that Effect Positioning • Clip • Overflow • Vertical-align • V-index • See examples in W3Schools

  37. Media Types

  38. Rules for Specific Media Types • It is possible to define rules for specific media types • See example in W3Schools • The visual formatting model may behave differently for different media types

  39. Examples A Three-Column Design

  40. Basic Idea • Split the page into three column • Menu on the left • Main content in the center • Links (e.g., resources) on the right • Possibly some additional text is positioned after the three columns

  41. The Rule for the Body body{ background-color: gray; font-family: Tahoma, Verdana, sans-serif; font-size: 400%; color: yellow; }

  42. The Rule for the Left Column DIV#left{ float: left; width: 20%; height: 300px; background-color: #000066; }

  43. The Rule for the Center Column DIV#center{ float: left; width: 60%; height: 350px; background-color: #660000; }

  44. The Rule for the Right Column DIV.right{ float: left; width: 20%; height: 350px; background-color: #006600; }

  45. The Body <div id="left"> <p> float: left; </p> </div> <div id="center"> <p> float: left; </p> </div> <div class="right"> <p> float: left; </p> </div>

  46. The Rule for More Text <div style="position: static"> More text goes here. … … </div>

  47. In the Following Examples • Sometimes the width is in px and sometimes the width is in % • Sometimes the “More Text” DIV has clear: left • In the following examples, we vary the value of the position property in each DIV

  48. The Examples • Example 1: All positions are static • Example 2: All positions are relative • Example 3: All DIVs are float: left • Example 4: DIV.right is float: right • Example 5: The DIV of the “More Text” has clear: left

  49. Two Right Columns • Example 6: DIV.right is float: right • Example 7: DIV.right is float: left (and it also has margins) • If the width of DIV.right is 20%, it will never fit on the right side, because of the width of the margin • Change the font size in the examples and see what happens

More Related