WIXLIB

HTML5 and CSS3 – The Future of theWeb ProgrammingCSSSergio Luján Mora1

HTML5 & CSS3Content IntroductionLinking HTML and CSSRules, selectors, and propertiesText propertiesBackgroundLinksBox modelLayoutHTML5 & CSS3Introduction CSS (Cascading Style Sheets):– A style sheet is a set of instructions each ofwhich tells a browser how to draw aparticular element on a page– HTML documents are a collection ofelements arranged in a hierarchy2

HTML5 & CSS3HTML5 & CSS33

HTML5 & CSS3Introduction Hierarchy inheritance:– If you apply style to an element (parent)which contains other elements (children)then this will be inherited by the elementsinsideHTML5 & CSS3Introduction Rules have two parts: a selector and adeclaration– The selector tells a browser which elementsin a page will be affected by the rule. Thereare a number of different types of selector.– The declaration tells the browser which setof properties to apply. There are manydifferent properties.4

HTML5 & CSS3Introduction html head title CSS example /title /head body h1 University of Alicante /h1 p img src "logo.png" / a href "http://www.ua.es/" University ofAlicante /a /p div h1 Department of Software and ComputingSystems /h1 HTML5 & CSS3Introduction p The Deparment of Software and Computing Systemsteaches the following courses: em Programming, Object-Oriented Programming, WebProgramming, and Databases and SoftwareEngineering /em . /p h2 Teaching Staff /h2 /div /body /html 5

HTML5 & CSS3Introduction style type "text/css" h1 {color: blue;}h2 {color: red;}p {font-size: 1.4em;} /style HTML5 & CSS36

HTML5 & CSS3Exercise Give color green for the paragraphHTML5 & CSS3Exercise - Solution One solution:p {font-size: 1.4em;}p {color: green;}Also (better):p {font-size: 1.4em; color: green;}7

HTML5 & CSS3Introduction Some examples:body {background: white; color: black; fontsize: 15px;}h1 {background: blue; font-size: 30px;}p {background: yellow;}strong {background: red;}em {background: red; color: yellow;} If the value has two or more words:p {font-family: "Times New Roman", serif}HTML5 & CSS3Introduction Comments (1 or more lines):/* */ Example:/* Paragraph */p {text-align: center;color: black;font-family: Arial;}/* Center *//* Black *//* Font face */8

HTML5 & CSS3Introduction Different versions:– CSS1: CSS level 1. 1996. http://www.w3.org/TR/REC-CSS1– CSS2: CSS level 2. 1998. http://www.w3.org/TR/REC-CSS2/– CSS2 revision 1. 2003.– CSS3: CSS level 3. (Working draft) Problem: incompatibilities between browsersHTML5 & CSS3Introduction More information:– W3C: http://www.w3.org/– W3 Schools: http://www.w3schools.com/9

HTML5 & CSS3HTML5 & CSS310

HTML5 & CSS3HTML5 & CSS3Linking HTML and CSS Three ways of making a style sheet affect theappearance of an HTML document:– External (linking): head link rel "stylesheet" href "style.css"type "text/css" media "screen" / /head – Internal (embedded): head style type "text/css" media "screen" p {text-indent: 10pt} /style /head – Inline: p style "text-indent: 10pt" indented paragraph /p 11

HTML5 & CSS3Exercise Change the previous example: link the webpage to an external style sheetHTML5 & CSS3Linking HTML and CSS External:– Many pages can be linked to a single style sheet– Making changes to this style sheet can then changethe appearance of all the web pages linked to it Internal:– When the style sheet is used for only one webpage Inline:– When the style is used for only one HTML element12

HTML5 & CSS3Linking HTML and CSS The most popular method is the external style sheet: link rel "stylesheet" href "style.css"type "text/css" media "screen" / href:– Tells the browser where to locate the style sheet, with eithera relative or absolute URL rel:– Tells the browser what to expect stylesheet alternate stylesheetHTML5 & CSS3Linking HTML and CSS If you define different alternative stylesheets, you have to assign a title to eachstyle sheet link rel "alternate stylesheet"href "style.css" type "text/css"media "screen" title "Style 1" / Example: webpage of Spanish SocialSystem (Seguridad Social)13

HTML5 & CSS3HTML5 & CSS3Linking HTML and CSS link rel "stylesheet"href "/ireach/internet/css/estilos B.css"media "screen" type "text/css" link rel "alternate stylesheet"href "/ireach/internet/css/estilosHC B.css"media "screen" type "text/css" title "2.AltoContraste" link rel "alternate stylesheet"href "/ireach/internet/css/estilosHT B.css"media "screen" type "text/css" title "3.TextoGrande" link rel "stylesheet"href "/ireach/internet/css/estilosP B.css"media "print" type "text/css" 14

HTML5 & CSS3HTML5 & CSS315

HTML5 & CSS3Linking HTML and CSS type:– Tells the browser the type of document linked– Common values: text/css text/javascriptHTML5 & CSS3Linking HTML and CSS media:–––––––––Tells the browser the type of device the style sheet is for:screen: Computer displayprint: Printerprojection: Projectoraural: Speech synthesizerbraille: Braille linetty: Console (text) displaytv: Televisionall: All devices (default value)16

HTML5 & CSS3Rules, selectors, and properties Rules: the selector, followed by the setof properties, which are surrounded bycurly braces (that is { and })SelectorDeclarationh1 {color: #FF0000; background: lueHTML5 & CSS3Rules, selectors, and properties Selector:– Type: select every instance of the specifiedtype of HTML element (tag)– Class: class name preceded by “.”– ID: identifier name preceded by “#”– Pseudo-classes: name of the pseudo-class17

HTML5 & CSS3Rules, selectors, and properties Property and value: the property namefollowed by a colon, a space (optional) andthen the value (if necessary, with its unit,though no space before the unit!) The last property/value pair doesn’t need theseparator semi-colon (;)HTML5 & CSS3Rules, selectors, and properties Advices:– Make sure you get the property name exactlyright: it's got to be color, not colour or collor– All CSS properties can only take a specified rangeof values: get used to consulting the specification– Don't get the punctuation wrong (don’t forget thesemi-colon between properties)18

HTML5 & CSS3Exercise Write a new webpage Give a background color (light gray) and acolor (dark blue) to the whole page– Selector: html or body– Property: background-color Value: #999999– Property: color Value: #0000AAHTML5 & CSS3Exercise - Solutionhtml {background-color: #999999;color: #0000AA;} Tips:– The style sheet is easier to read if you put each property on anew line– it's very easy to forget semi-colons (;). Always put that extraone on the last property in a statement. You won't forget todo it when you add a new property later on19

HTML5 & CSS3HTML5 & CSS3Rules, selectors, and properties Class: is an attribute we can add to HTML elements sothat we can identify them from the style sheet, using aclass selector, and give them their own style p class "footer" The form of a class selector is very simple, and itwould select the specified element with the classattribute class-namep.footer {color: blue;}20

HTML5 & CSS3Rules, selectors, and properties If you don’t specify an element, the class name appliesto all the elements:.important {color: red;} p class "important" Bla, bla, bla. /p ul class "important" li Bla, bla. /li li Bla, bla. /li /ul HTML5 & CSS3Exercise Write a new webpage with three paragraphs Define three classes for the three paragraphs:– p class "normal" Color dark blue– p class "important" Color red,background color yellow– p class "extra" Color green,background color gold21

HTML5 & CSS3Exercise - Solution html head title Three paragraphs /title style type "text/css" .normal {color: #0000AA;}.important {color: red; background-color: yellow;}.veryimportant {color: yellow; background-color: red;} /style body p class "normal" This is the first paragraph. Bla, bla, bla, bla. /p p class "important" This is the second paragraph. Bla, bla, bla, bla. /p p class "veryimportant" This is the third paragraph. Bla, bla, bla, bla. /p /body /html HTML5 & CSS322

HTML5 & CSS3Rules, selectors, and properties ID: is an attribute we can add to HTML elements sothat we can uniquely identify them from the stylesheet, using an ID selector, and give them their ownstyle p id "paragraph-1" The form of an ID selector is very simple, and it wouldselect the specified element with the ID attributevaluep#paragraph-1 {color: blue;}HTML5 & CSS3Exercise Write a new webpage with three titles andfour paragraphs23

HTML5 & CSS3h1h2First paragraph of first chapterImportant paragraphh2Important paragraphHTML5 & CSS3Exercise The main title (h1) is color white on blackThe chapter titles (h2) are blue on yellowThe default color of paragraphs is greenThe first paragraph of the first chapter is blackAn important paragraph is yellow on red24

HTML5 & CSS3Exercise - Solution html head title Three paragraphs /title style type "text/css" p {color: green;}#title {color: white; background-color: black;}#first-chapter-par {color: black;}.chapter-title {color: blue; background-color: yellow;}.important {color: yellow; background-color: red;} /style HTML5 & CSS3Exercise - Solution body h1 id "title" The title of the book /h1 h2 class "chapter-title" The first chapter /h2 p id "first-chapter-par" This is the first paragraph. Bla, bla, bla, bla. /p p class "important" This is the second paragraph. Bla, bla, bla, bla. /p h2 class "chapter-title" The second chapter /h2 p This is the third paragraph. Bla, bla, bla, bla. /p p class "important" This is the third paragraph. Bla, bla, bla, bla. /p /body /html 25

HTML5 & CSS3HTML5 & CSS3Text properties background-color: backgroundcolor of element color: color of text26

HTML5 & CSS3Text properties Colors:–––––Name of color redrgb(x,x,x) rgb(255,0,0)rgb(y%, y%, y%) rgb(100%,0%,0%)#rrggbb #ff0000#rgb #rrggbb #f00 #ff0000HTML5 & CSS3Text properties font-family: specifies a list of one or more fonts using thefamily name of each– The font names are separated by commas– A browser then uses the first font in the list that is installed on itssystem– At the end of that list you should always put one of five generic fontnames: serif (e.g. Times)sans-serif (e.g. Helvetica)cursive (e.g. Zapf-Chancery)fantasy (e.g. Western)monospace (e.g. Courier)– If you want to use a font with more than a single word name makesure you put it between quote marks, like this: "Times New Roman"27

HTML5 & CSS3Text properties font-size: can take what is referredto in CSS as length valuesHTML5 & CSS3Text properties Units:–––––––––%: percentagein: inchescm: centimetersmm: millimetersem: equal to the current size of textex: equal to letter “x” heightpt: point (1 pt 1/72 inches)pc: pica (1 pc 12 points)px: pixels28

HTML5 & CSS3Text properties Units:– Keywords: xx-small, x-small, small, medium, large, x-large, xx-large smaller, larger– Absolute: in, cm, mm, pt, pc, px– Relative: %, em, exHTML5 & CSS3Text properties Best unit: em– If you set the font-size using em units, they willalways remain relative to the main text on thepage, whatever that might be– For example, if you set h1 to 2em, it will betwice as big as the rest of the text on the page29

HTML5 & CSS3Text properties font-style: sets the style of the font– normal: default, normal font– italic: an italic font– oblique: an oblique font font-variant: displays text innormal or small-caps font– normal– small-capsHTML5 & CSS3Text properties font-weight: controls the boldnessof text– normal– bold– bolder– lighter– 100, 200, ., 90030

HTML5 & CSS3Text properties text-align: controls the justificationof text– left– right– center– justifyHTML5 & CSS3Text properties text-decoration: for underliningand striking through text– none– underline– overline– line-through– blink31