HTML (Hyper Text Markup Language) CSS. (Cascading Style Sheets) HTML: problems with styles. HTML: styles. CSS: specifications.

Size: px

Start display at page:

Download "HTML (Hyper Text Markup Language) CSS. (Cascading Style Sheets) HTML: problems with styles. HTML: styles. CSS: specifications."

Loren Owen
5 years ago
Views:

1 CSS (Cascading Style Sheets) Antonio Lioy < it > english version created by Marco D. Aime < > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) page description language textual description (text file) specification through commands (tags) interpreted by browsers HTML files include three types of commands: the text of the document to be visualised a logical subdivision of the document in parts (headings, paragraphs,...) hints on the graphical presentation of the document (formatting, i.e. the visualization style) HTML: styles the tags were originally intended to represent the logical content of the document rather than the formatting (which is left to the browser) <h1> means this is a first-level heading <p> means here a new paragraph starts and so on new tags were later added to manage formatting (e.g. <font>), independently from logical components (heading, paragraph, table, ) HTML: problems with styles creating Web sites with a clean separation between content and formatting rules has become more and more difficult sites have become large and complex sets of pages, which should provide an homogeneous graphical appearance formatting rules applied in the wild make maintaining sites extremely awkward Solution: CSS Cascading Style Sheets first introduced by the World Wide Web Consortium (W3C) in the HTML 4.0 standard, and now used also with XHTML and XML the style sheets describe how to visualise the logical components of the document: the first-level title the page background they enforce a strong separation between the content and the presentation format CSS: specifications CSS1 (December 1996) 50 properties CSS2 (May 1998) e CSS2.1 (July 2007) w3 (several errors) add 70 new properties to CSS1 (media-specific style-sheet e.g. for printers and sound devices downloadable fonts, tables, element positioning) CSS3 under development A.Lioy - Politecnico di Torino ( ) F.1

2 CSS home page at W3C CSS: resources tutorials and other resources automatic validation service CSS CSS descriptions are normally saved in text files external to the HTML document files with.css extension CSS files are referenced inside the head of the HTML document the same CSS file is usually included by several HTML pages it is possible to change the appearance of an entire site by modifying a single file! possible but not recommended to define the style in-line: for a single file, for single tags CSS syntax the CSS syntax includes three components: selectors, properties, and values selector { property : value ;... } the selector is the name of a tag, of a class ( class attribute), or a unique identifier ( id attribute) tag_name [ tag_name ].class [ tag_name ]:pseudo-class #unique_id the tag name can be omitted (or set to * ) to specify any tag CSS syntax - examples /* tag */ body { background-color: gray } p { font-family: "sans serif" } /* tag.class */ p.centered { text-align: center; color: green } /* class */.warning { color: red } /* tag list */ h1, h2, h3 {color: green } /* tag:pseudo-class */ a:hover { background: aqua } /* #id */ #footer { font-style: italic } Hierarchical view of HTML... <body> <h1>the kings of Rome</h1> <p>the first three kings:</p> <ul> <li>romolo</li> <li>numa Pompilio</li> <li>tullo Ostilio</li> </ul> </body> siblings first child body object hierarchy h1 p ul li li li Hierarchical inheritance properties assigned to an element are automatically inherited by his descendants it is then possible to specify a different style for a descendant the most specific rule is applied to set the font type for a page, it is better to specify a style for the BODY element rather than for every specific element exceptions: background, borders, dimensions, A.Lioy - Politecnico di Torino ( ) F.2

3 Hierarchical selectors it is possible to specify hierarchical selectors to constrain the application of some property to some specific nesting E1 E2 element E2 when descends from E1 E1 > E2 element E2 when child of E1 E1 + E2 element E2 when immediately preceded by E1 as sibling E:first-child element E when it is the first child of its parent Conditional selectors E [ A ] element E with any value assigned to the attribute A E [ A="Val"] element E with the value Val assigned to the attribute A E : lang(l) element E in the language L (e.g. "it", "de", "fr", "enuk") E : focus element E when holds the focus (e.g. a field for inserting text is active) CSS comments same syntax as the C language, i.e. /* */ /* this is a comment */ p { text-align: center; /* this is another comment */ color: red } Referring to style sheets (link tag) every HTML page using a given style sheet must include its name inside the section with the tag <link rel="stylesheet" > the user agent reads the definitions included in the file (after downloading it) and formats the page accordingly <link rel="stylesheet" type="text/css" href="polito.css"> <title>... Internal style sheets you can define a style directly inside the section with the <style> tag not recommended since you lose the advantage of sharing the style among multiple pages useful only for testing (then move the style to an external file) <style type="text/css"> body { background-color : gray } </style>... For old browsers... browsers ignore unknown tags, but visualise their content if not commented new browsers ignore the comment symbols (since style sheet comments are different) <style type="text/css">  </style> A.Lioy - Politecnico di Torino ( ) F.3

4 Style for single tags (in-line style) when a full CSS is not necessary, it is recommended to use anyway the CSS syntax with the STYLE attribute in specific tags  Prof. Antonio <b>lioy</b> Multiple definitions (cascading) in case multiple style definitions apply to the same element, the browser computes the element style by considering all the definitions in cascade, with the following priorities: tag setting (highest priority) internal style sheet external style sheet (lowest priority)  Prof. Antonio <span style="font-weight:bold">lioy</span> Multiple definitions: example an external stylesheet linked to the page includes the following definition: h1 {color: red; text-align: left} while an internal stylesheet includes: h1 {text-align: right} the resulting definition, used by the browser for <h1>, will be: color: red text-align: right Media-type it is possible to specify that a stylesheet applies only when the page is visualised on a specific media (or "media-type"): parameter "media= " inside the LINK tag possible to list multiple media-type parameters, separated by commas <link rel="stylesheet" type="text/css" href="polito_print_a4.css" media="print">... Supported media-types defined in CSS-2.1 all braille (Braille tactile device) embossed (Braille page printer) handheld (= small screen, limited bandwidth) print (page printer, pre-print view) projection screen speech (in CSS2 was "aural") tty (line printer; do not use "px") tv (=low resolution + audio) Media-type and media-group media-type media group paged, continuous visual, audio, speech, tactile grid, bitmap static, interactive braille continuous tactile grid both embossed paged tactile grid static handheld both visual, audio, grid, both speech bitmap print paged visual bitmap static projection paged visual bitmap interactive screen continuous visual, audio bitmap both speech continuous speech N/A both tty continuous visual grid both tv both visual, audio bitmap both A.Lioy - Politecnico di Torino ( ) F.4

5 Including a style sheet (@import) a CSS can import rules from another CSS, either unconditionally or conditionally to the media-type url ("URI_CSS") [ media1, media2,... ] ; to be inserted before any formatting rule example (inside a CSS url("poli_print.css") print; body { color: blue }... CSS: definition of the class attribute different styles can be defined for the same HTML element by using the class attribute examples: a normal paragraph, left-aligned a citation paragraph, centered and italic a centered class, to be used in place of <center> p.normal { text-align: left } p.citation { text-align: center; font-style: italic } /* not recommended: not a logical class */.centered { text-align: center } HTML: using the class attribute <p class="normal"> The poet wrote: </p> <p class="citation"> Nel mezzo del cammin di nostra vita... </p> The poet wrote: Nel mezzo del cammin di nostra vita... CSS: units relative: "em" = height of the letter "M" in the current font "ex" = height of the letter "x" in the current font "px" = pixel size absolute: "in" = inch (25.4 mm) "cm" or "mm" "pt" = typographic point (1/72 of an inch) "pc" = pica (12 pt) NOTE: "em" and "ex" are referred to the parent font if used to define font sizes CSS: colors some pre-defined colors can be accessed by name: Black, White, Gray, Silver, Yellow, Red, Purple, Fuchsia, Maroon, Green, Lime, Olive, Aqua, Teal, Blue, Navy other colors can be specified by their RGB code, hexadecimal / decimal/ percentage examples (equivalent to "red"): rgb (255, 0, 0) rgb (100%, 0%, 0%) #ff0000 #f00 /* abbreviation for two repeated hex digits*/ N.B. same names of HTML but different RGB format CSS: background (I) background-color: color inherit transparent "transparent" is default background-image: url("image_uri") image URL you should specify also a color, to be used: when failing to download the image for surrounding the image shown in correspondence to images s transparencies A.Lioy - Politecnico di Torino ( ) F.5

6 CSS: background (II) background-repeat: repeat repeat-x repeat-y no-repeat inherit multiple copies of the image to span either the entire background, or only horizontally, or only vertically background-position: position_h position_v every position can be either a keyword, or a distance (from the top-left corner), or a percentage (of the container total size) keyword (horizontal): left, center, right keyword (vertical): top, center, bottom when there is only one keyword, the second is assumed to be equal to "center" CSS: background (III) background-attachment: fixed scroll inherit the image is fixed, or follows the scrolling of the content background: color image_uri repeat attachment position inherit shorthand notation for the various specifications the order is not relevant since every element has a different syntax (elements may also be omitted) example (gray background, centered image, follows the content) background: gray url("polito_logo.jpg") scroll center center no-repeat color: color CSS: text properties (I) text-align: left right center justify text-transform: none capitalize uppercase lowercase text-decoration: none underline overline linethrough blink text-indent: length percentage negative values are possible (the text is moved to the left) CSS: text properties (II) line-height: normal multiplier length percentage the multiplier value is inherited as it is for the percentage, the resulting value is inherited examples: { line-height: 1.2; font-size: 10pt } = for the height of their rows, children inherit a multiplier of 1.2 to be applied to the size of their font { line-height: 120%; font-size: 10pt } = for the height of their rows, children inherit a fixed value of 12pt CSS: font properties (I) font-style: normal italic oblique NOTE: oblique is slightly different from italic font-weight: normal bold the numeric value identifies the black saturation font-variant: normal small-caps font-stretch: ultra-condensed extra-condensed condensed semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded rarely supported by UAs CSS: font properties (II) font-size: font_size absolute value (pt, mm, ) relative value (em, ex, ) percentage absolute value (1 7, normal=3) or relative (+/ N) xx-small x-small small medium large x-large xx-large (note that there is no normal and no specific scale) notes: relative values and percentages are referred to the font of the parent element (may be the UA default) prefer relative and percentage values, avoid absolute ones A.Lioy - Politecnico di Torino ( ) F.6

7 CSS: font properties (III) font-family: font_name_list ordered list (Courier, Courier New, ) UA chooses the first matching the local fonts useful to specify a generic font in the last position beware of compatibility issues among the listed fonts generic fonts (and compatibility): serif (times, times new roman, palatino,...) sans-serif (arial, helvetica, verdana,...) monospace (courier, courier new, fixed, ) cursive ( comic sans MS, florence,...) fantasy (impact, oldtown,...) CSS: formatting model every block is seen as a container (box) margin (trasparent) border padding content element width container width CSS: container size width: length percentage auto inherit min-width: length percentage inherit max-width: length percentage none inherit content width (fixed, minimum, maximum) height: length percentage auto inherit min-height: length percentage inherit max-height: length percentage none inherit content height (fixed, minimum, maximum) various browsers have different defaults for margin, border and padding set them explicitly CSS: margin and padding size margin-left, margin-right, margin-top, marginbottom: auto length percentage percentage refers to the parent s length margin: m_top_bottom_left_right margin: m_top_bottom m_left_right margin: m_top m_right_left m_bottom margin: m_top m_right m_bottom m_left shorthand notation (in 4 versions) for margin length same parameter number correspondence used also for borders padding-left, padding-right, padding-top, paddingbottom, padding: auto length percentage CSS: containers borders border-top-style, border-right-style, border-bottom-style, border-left-style, border-style: none hidden dotted dashed solid double groove ridge inset outset style of a specific border or shorthand notation border-top-width, border-right-width, right border-bottom-width, border-left-width, border-width: thin medium thick width width of a specific border or shorthand notation border-top-color, border-right-color, border-bottom-color, border-left-color, border-color: color transparent inherit color of a specific border or shorthand notation CSS: shorthand notations for borders border-top, border-right, border-bottom, border-left, border: [ width ] [ style ] [ color ] in the shorthand notation "border, you can set a single value for all the borders border: medium ridge red A.Lioy - Politecnico di Torino ( ) F.7

8 CSS: link properties use the following pseudo-classes to define the style for the various states of links: :link (not visited) :visited (visited) :active (clicked) :hover (pointed with the mouse) you can also associate classes/styles with the A tag (independently by the status) a:link { color: blue } a:hover { background: aqua } a.semplice { text-decoration: none } CSS: graphic layout positioning of various containers (boxes) float: left right none mobile container horizontal positioning with respect to the parent clear: left right both none which sides of the container CANNOT be aside of the previous floating containers NOTE: several instructions, quite complex model, refer to the standard A standard template for pages with header, footer, menu and content modern and standard: uses CSS for formatting uses DIV for layout inspired to header menu footer content Template: HTML part (I) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang= en"> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="author" content="a A.Lioy Lioy"> <title>page title</title> <meta name="keywords" content="web tutorial"> <link rel="stylesheet" href="polito.css" type="text/css"> <body> <div id="header"> <h1>page title</h1> </div> Template: HTML part (II) <div id="navigation"> <h2>menu</h2> <ul> <li><a href="p1.html">first</a></li> <li><a href="p2.html">second</a></li> </ul> </div> <div id="content"> <h2>content</h2> <p>page content.</p> </div> <div id="footer"> <h2>author</h2> <p>author name and contact info.</p> </div> </body> </html> body {... } Template: CSS div { border: 1px solid Black; padding: 1ex; } h1, h2, h3, h4, h5, h6 { margin: 0; } #navigation { float: left; width: 10ex; } #navigation ul { list-style: none; margin: ; padding: ; } #content { margin-left: 12ex; } #footer { clear: both; } A.Lioy - Politecnico di Torino ( ) F.8

CSS. (Cascading Style Sheets) HTML (Hyper Text Markup Language) HTML: styles. 07/07/2011(mar'09) A.Lioy - Politecnico di Torino ( ) F.

CSS. (Cascading Style Sheets) HTML (Hyper Text Markup Language) HTML: styles. 07/07/2011(mar'09) A.Lioy - Politecnico di Torino ( ) F. CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it it > english version created by Marco D. Aime < m.aime@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup