Cascade Stylesheets (CSS)

Size: px

Start display at page:

Download "Cascade Stylesheets (CSS)"

Loraine Nicholson
6 years ago
Views:

1 Previous versions: David Benavides and Amador Durán Toro (noviembre 2006) Last revision: Manuel Resinas (october 2007) Tiempo: 2h escuela técnica superior de ingeniería informática Departamento de Lenguajes Grupo de Ingeniería del Software [Ángel US V7] Diseño: Amador Durán Toro ( )

Style and content Separating content (the information to be displayed) from style (how it is displayed) presents many advantages. It simplifies the HTML code of web pages.

2 Style and content Separating content (the information to be displayed) from style (how it is displayed) presents many advantages. It simplifies the HTML code of web pages. It promotes a homogeneous look for a web site by applying the same stylesheets to all its web pages. It expands the layout possibilities of HTML allowing an exhaustive control. It allows the presentation of the same content with different styles without modification. The semantic web Style and content separation is the first step towards the semantic web. In the semantic web, web pages will contain information about its content that will be able to be treated automatically. Sevilla, October 2009 Software Engineering Group 1

Style specification (example) <html> <head>

<p>párrafo sencillo</p> </body> </html> h1 {

border-bottom-width: 5; border-bottom-style:

color: olive; font-style: italic; font-size:

3 Style specification (example) <html> <head> </head> <body> <h1>ejemplo de CSS</h1> <p>párrafo sencillo</p> </body> </html> h1 { color: navy; font-family: sans-serif; border-bottom-width: 5; border-bottom-style: solid; border-bottom-color: blue; } p { color: olive; font-style: italic; font-size: large; } Not all browsers display styles equally Engineering Group 2

The CSS standard The first version of the standard, known as CSS level 1, dates from 1996 December. Later, in 1998 May the CSS level 2 specification is finally aproved.

4 The CSS standard The first version of the standard, known as CSS level 1, dates from 1996 December. Later, in 1998 May the CSS level 2 specification is finally aproved. From 2005 June, the draft of CSS 2.1 is available. Since the end of 1999, CSS 3 is under development. CSS standards are available in several languages (including Spanish) in the W3C website. Engineering Group 3

The style attribute <html> The style of a HTML element can be specified using

It is not recommended because it does not separate style from content.

<p style="font-family:monospace; color:red"> Párrafo con estilo </p> </body>

5 The style attribute <html> The style of a HTML element can be specified using the style attribute. It is not recommended because it does not separate style from content. <head> </head> <body> <h1>ejemplo atributo style</h1> <p>párrafo sin estilo</p> <p style="font-family:monospace; color:red"> Párrafo con estilo </p> </body> </html> This way has the highest priority in the cascade* *After browser settings, for example setting a bigger or smaller font. Engineering Group 4

6 Internal stylesheet <html> A stylesheet can be include in a HTML header using the <style> element. Better option than using the style attribute although it does not allow reusing the styles in other pages. <head> <style type="text/css">  </style> </head> <body> <h1>ejemplo hoja interna</h1> <p>párrafo sin estilo</p> <p>párrafo con estilo</p> </body> </html> Engineering Group 5

External stylesheet <html> The <link> element is used in the header in order to apply an

It is the recommended way of applying styles since it promotes style reuse in many web pages.

css" /> </head> <body> <h1>ejemplo hoja externa</h1> <p>párrafo de ejemplo</p> </body> </html>

7 External stylesheet <html> The <link> element is used in the header in order to apply an external stylesheet. It is the recommended way of applying styles since it promotes style reuse in many web pages. <head> <link rel="stylesheet" type="text/css" href="ejemplo.css" /> </head> <body> <h1>ejemplo hoja externa</h1> <p>párrafo de ejemplo</p> </body> </html> /* ejemplo.css */ h1 { } color: navy; font-family: sans-serif; border-bottom-width: 5; border-bottom-style: solid; border-bottom-color: blue; p { } color: olive; font-style: italic; font-size: large; Engineering Group 6

8 Style cascade A given element in a HTML document could have a number of associated styles. The closer or the more specific style has the precedence. If not redefined, child elements inherit their parent's style. user settings style attribute internal sheet external sheet Engineering Group 7

Basic syntax /* comment */ selector 1, selector 2,, selector M { } property 1 : value 1 ; /* comment */ property 2 : value 2 ; ; property N : value N

The style declaration is formed by a list of semicolon-separated property:value pairs.

9 Basic syntax /* comment */ selector 1, selector 2,, selector M { } property 1 : value 1 ; /* comment */ property 2 : value 2 ; ; property N : value url(external_sheet_path.css); Selectors specify the elements the style declaration is going to be applied to. The style declaration is formed by a list of semicolon-separated property:value pairs. Some of these properties accept compound values (space-separated) or alternative values (comma-separated). Other style sheets can be imported (included). declaration C language-like comments can be used inside or outside declarations. Engineering Group 8

10 The example: <html> <head> </head> <body> <div> <h1>indice</h1> <ul> <li>item 1</li> <li><em>item</em> 2</li> </ul> <div> <h1>contenido</h1> <p>parrafo primero</p> <p>parrafo <em>segundo</em></p> </body> </html> Engineering Group 9

11 HTML elements: The style is applied to the selected elements. <html> <head> </head> <body> <div> <h1>indice</h1> <ul> <li>item 1</li> <li><em>item</em> 2</li> </ul> <div> <h1>contenido</h1> <p>parrafo primero</p> <p>parrafo <em>segundo</em> </p> </body> </html> p { text-indent: 2em; color: blue; } Engineering Group 10

12 HTML elements: The style is applied to the selected elements. <html> <head> </head> <body> <div> <h1>indice</h1> <ul> <li>item 1</li> <li><em>item</em> 2</li> </ul> <div> <h1>contenido</h1> <p>parrafo primero</p> <p>parrafo <em>segundo</em> </p> </body> </html> p { text-indent: 2em; color: blue; } h1 {color: red;} Engineering Group 11

13 HTML elements: The style is applied to the selected elements. <html> <head> </head> <body> <div> <h1>indice</h1> <ul> <li>item 1</li> <li><em>item</em> 2</li> </ul> <div> <h1>contenido</h1> <p>parrafo primero</p> <p>parrafo <em>segundo</em> </p> </body> </html> p { text-indent: 2em; color: blue; } H1 {color: red;} body {color: green;} Engineering Group 12

14 HTML elements in context: The style is applied to the elements that follow the specified parent-child relationship: <html> <head> </head> <body> <div> <h1>indice</h1> <ul> <li>item 1</li> <li><em>item</em> 2</li> </ul> <div> <h1>contenido</h1> <p>parrafo primero</p> <p>parrafo <em>segundo</em> </p> </body> </html> p em {font-weight: bolder; color: blue;} Engineering Group 13

15 HTML elements in context: The style is applied to the elements that follow the specified parent-child relationship. <html> <head> </head> <body> <div> <h1>indice</h1> <ul> <li>item 1</li> <li><em>item</em> 2</li> </ul> <div> <h1>contenido</h1> <p>parrafo primero</p> <p>parrafo <em>segundo</em> </p> </body> </html> p em {font-weight: bolder; color: blue;} li em {text-decoration: underline;} Engineering Group 14

16 The example: The attribute class allows to define one or more classes (usually one) to a HTML element. <html> <head> </head> <body> <div> <h1>indice</h1> <ul> <li class= aviso >Item 1</li> <li><em>item</em> 2</li> </ul> <div> <h1>contenido</h1> <p>parrafo primero</p> <p class= aviso >Parrafo <em>segundo</em></p> </body> </html> Engineering Group 15

17 Classes: Styles may be applied to classes. The style will be applied to any HTML element with a matching class attribute. <html> <head> </head> <body> <div> <h1>indice</h1> <ul> <li class= aviso >Item 1</li> <li><em>item</em> 2</li> </ul> <div> <h1>contenido</h1> <p>parrafo primero</p> <p class= aviso >Parrafo <em>segundo</em></p> </body> </html>.aviso { color: red; } Engineering Group 16

18 Classes: Styles may also be applied to HTML elements of an specific type. <html> <head> </head> <body> <div> <h1>indice</h1> <ul> <li class= aviso >Item 1</li> <li><em>item</em> 2</li> </ul> <div> <h1>contenido</h1> <p>parrafo primero</p> <p class= aviso >Parrafo <em>segundo</em></p> </body> </html>.aviso { color: red; } p.aviso {text-align: center;} Engineering Group 17

19 HTML elements may have an id attribute, which must be unique in the XHTML/HTML document. <html> <head> </head> <body> <div id= menu > <h1>indice</h1> <ul> <li class= aviso >Item 1</li> <li><em>item</em> 2</li> </ul> <div id= contenido > <h1>contenido</h1> <p>parrafo primero</p> <p class= aviso >Parrafo <em>segundo</em></p> </body> </html> Engineering Group 18

20 Styles can be defined for HTML elements with a specific id attribute. <html> <head> </head> <body> <div id= menu > <h1>indice</h1> <ul> <li class= aviso >Item 1</li> <li><em>item</em> 2</li> </ul> <div id= contenido > <h1>contenido</h1> <p>parrafo primero</p> <p class= aviso >Parrafo <em>segundo</em></p> </body> </html> #menu {border-style: dotted;} Engineering Group 19

21 Universal selector Universal selector: it represents any element; used for setting style properties for the whole document. * { color: green; font-size: 200% } CSS selectors: pseudoclasses Hyperlink pseudoclasses allow to specify styles for different link states. a:link for non-visited links a:active for links under processing a:visited for visited links Other pseudoclasses can be applied to any element: :hover when the mouse cursor is over the element :focus when the element has the focus (keyboard input) Engineering Group 20

22 Property values Keywords: usually used for non-numerical properties: underline, small, xxlarge, right, Lengths: they can be expressed in the following units: em: width of an "m" character in the current font ex: height of an "x" character in the current font px: pixels (screen points) in: inches (1 inch = 2.54 cm) cm, mm: centimeters, millimeters pt, pc: points (1/72 inch), picas (12 points) %: percentage relative to current size URLs: absolute or relative to the stylesheet URLs url(protocol://server:port/resource_path) url(resource_path) Colors: they can be expressed as Standard color names: red, green, blue, aqua, Hexadecimal RGB: #c0c0c0, #00ffc0, Decimal RGB: rgb(0,255,0), rgb(0%,100%,0%) Engineering Group 21

23 It is recommended: Using always relative values (%, em, ex ) Using always generic values Engineering Group 22

24 Some font properties font-family: it can be specified generically or using concrete font names. A list of fonts can be specified just in case some of them is not available. Generic names: serif, sans-serif, cursive, fantasy, monospace Concrete names: "Times New Roman", Palatino, Courier, font-size: it can be specified absolutely using values or symbols or relatively. Absolutely (values): 8pt, 10pt, 12pt, 14pt, 16pt, Absolutely (symbols): xx-small, x-small, small, medium, large, x-large, xx-large (browser font sizes). Relatively: 120% (i.e. 20% bigger than its parent's font), larger (one level up), smaller (one level down). font-style: font slant, which can be normal, italic or oblique. font-weight: font boldness, which can be normal, bold, bolder, lighter or a multiple-of-100 value between 100 and 900 (400 is the normal value). Engineering Group 23

25 Colors and Almost all HTML elements can have a foreground and a background color and/or image. Unlike other style properties, background is not inherited. Color specification As already seen, colors can be specified using color names, hexadecimal values, or decimal values ( or percentage between 0% and 100%). The 16 standard color names are the following: black = # silver = #c0c0c0 gray = # white = #ffffff maroon = # red = #ff0000 green = # lime = #00ff00 olive = # yellow = #ffff00 navy = # blue = #0000ff purple = # fuchsia = #ff00ff teal = # aqua = #00ffff Engineering Group 24

26 Some background properties background-color: element's background color; default value is transparent. background-image: image for element's background specified as a URL; default value is none. background-attachment: it specifies if the background image must move with the element (scroll, default value) o must remain fixed inside the browser window (fixed value). background-position: position of the background image inside the element's area; default position is the upper left corner. It can be specified as an offset, as a percentage of the element's area or as left, center, right, top, bottom. For example: background-position: 5px 5px; /* horizontal vertical offset */ background-position: right center; background-repeat: it specifies how the image must be repeated in order to fill all element's area. repeat: default value, it generates a mosaic. repeat-x, repeat-y: the image is repeated in one axis direction only. no-repeat: image is not repeated, i.e. it is displayed only once. Engineering Group 25

27 Some text properties text-align: element's text alignment; valid values are left (default value), right, center and justify. text-indent: it specifies the indentation of the first line of the element's text. text-decoration: it adds "decorations" to text such as underline, overline, line-through, blink or none (default value). text-transform: it specifies the case of the element's text; valid values are: capitalize (first letter in upper case), uppercase, lowercase or none. vertical-align: vertical position of the text inside the element's area; valid values are: baseline, middle, sub, super, text-top, text-bottom, top, bottom and percentages. line-height: separation between text lines; it accepts absolute values, percentages or the normal value. word-spacing: space between words; default value is normal. letter-spacing: space between letters; default value is normal. Engineering Group 26

28 Some list properties list-style-image: it specifies the URL of the image for the item marker or none if no marker is desired. list-style-position: it specifies it the item markers must be inside or outside the element's box. list-style-type: it specifies the type of marker depending on the type of list: Unordered lists (<ul>): disc, circle, square or none. Ordered lists (<ol>): decimal, lower-roman, upper-roman, lower-alpha, upperalpha or none. Other properties: properties for creating counters and for generating a specific text for an element can also be specified (see Advanced CSS). Engineering Group 27

29 Every HTML element follow a layout model based on concentric boxes. There are two types: <html> Inline boxes (em, b, span ) Block boxes (h1, p, div ) <head> </head> <body> <div id= menu > <h1>indice</h1> <ul> <li class= aviso >Item 1</li> <li><em>item</em> 2</li> </ul> <div id= contenido > <h1>contenido</h1> <p>parrafo primero</p> <p class= aviso >Parrafo <em>segundo</em></p> </body> </html> Engineering Group 28

30 An element s box Padding: Space between content and border Margin: Space between border and the next box Border Content Padding Margin Engineering Group 29

31 Content area properties height: default value is auto which is the height needed to show the element completely. width: same as height but related to element's area width. Padding and margin properties* padding-{tlbr}: padding width or auto which is usually the default value, i.e. 0. A percentage relative to content area width can also be specified. Padding area is displayed using the element's background. margin-{tlbr}: same as padding-{tlbr} but related to margins. Margins are transparent, so the background of the container element can be seen. *{tlbr} can be any of top, left, bottom, right. Engineering Group 30

32 Border properties* border-{tlbr}-color: border's color; if not specified, the foreground color of the element is used. border-{tlbr}-width: border width specified as a length or using thin, medium (default value), or thick. border-{tlbr}-style: border style, which can be one of the following values: none, dotted, dashed, solid, double, groove, ridge, inset y outset. Engineering Group *{tlbr} puede ser cualquiera de top, left, bottom, right. 31

33 The layout is made by the block boxes: Boxes are distributed vertically in the order they appear in the code. <html> <head> </head> <body> <div id= menu > <h1>indice</h1> <ul> <li class= aviso >Item 1</li> <li><em>item</em> 2</li> </ul> <div id= contenido > <h1>contenido</h1> <p>parrafo primero</p> <p class= aviso >Parrafo <em>segundo</em></p> </body> </html> Engineering Group 32

34 Boxes may float either on the left or on the right. This means: They are no longer as wide as the document. Boxes below take their place. h1 p H1 {float:left;} h1 p h1 p p p p Engineering Group 33

35 Example: #menu {float: left;} Engineering Group 34

36 clear: it specifies which sides of an element must not be adjacent to float elements; it accepts the values none (default value), left, right and both. #contenido {clear: left;} Engineering Group 35

37 Display and visibility properties display: it specifies how to display an element; it accepts the values block, inline, list-item and none. If none is specified, the element and their children is neither displayed nor taken into account for layout. visibility: it specifies an element's visibility; it accepts the values visible, hidden and collapse (for table items only). The hidden value makes the element invisible but the browser takes it into account for layout (the element's area is displayed as a hollow). Engineering Group 36

Other style properties There are other style properties apart from the explained: table properties, the content and counter-related properties for list items, the z-index property for ordering

38 Other style properties There are other style properties apart from the explained: table properties, the content and counter-related properties for list items, the z-index property for ordering overlapping elements, pseudoelements as :first-letter, audio styles, printing styles, etc. W3C's validator W3C offers a validator service for CSS stylesheets in Engineering Group 37

39 Web sites about CSS Engineering Group 38

escuela técnica superior de ingeniería informática

Tiempo: 2h escuela técnica superior de ingeniería informática Previous versions: David Benavides and Amador Durán Toro (noviembre 2006) Manuel Resinas (october 2007) Last revision:pablo Fernandez, Cambios