Cascading style sheet TNPW1 Ing. Jiří Štěpánek
Design and content Web page can be divided into two parts Design Visual design of page Graphics design is based on creative work (layout design, images, fonts etc..) Content Data on page (texts, paragraphs, data in table) Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Design and content The main purpose of web page is to present information The type of design depends on: Page type Range of presented information Development technologies Client requirements Modern trends Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Design and content In modern way of web page creating design code and content code are in separate files <font color="red" face="Arial">Warning</font> In this case are font color and font face defined in attribute font. This way of coding makes impossible to re-use this design code. When change of design needed, all font elements must be rewritten. In modern way is design code and content code separated. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Layout Visual layout of page Layout creation is separated from page programming Layout can be understood as a page template consisting of HTML elements, cascading style sheets, images etc. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Table layout The whole page is based on HTML table element, in some cases with nested tables. Advantages Easy to understand Functional even if style sheet not available, compatible in all browsers Disadvantages Arcane code Changing the design means many changes in source code – redesigning whole table Problems with adaptability – i.e. in mobile devices Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Layout based on CSS Page is set of areas (divisions) and elements. The design is defined in separate file. Advantages Source code is easily sustainable Separating design code and content code Variability, efficiency, adaptability Disadvantages Not so easy to understood There can be browser compatibility problems – need to check page in different browsers Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Cascading style sheets (CSS) Visual formatting rules for (X)HTML elements mostly defined in separate file. This concept allows and supports: Reusability of defined styles Separating design code and content code Design change can be done by simple substitution of CSS files Target formatting rules for different devices (printer, mobile etc.) Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Using CSS on page Inline element styling No reusability, for all media Using element <style> (in <head>) Reusability within the page, media can be defined Declaring styles in external file The best practice, css file can be linked in other HTML files <p style="color:black; font-weight:bold;">Text</p> <style type="text/css" media="screen"> p {color: black; font-family: Tahoma;} </style> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
CSS styles - rule Example – styling paragraphs p { Selector p { font-family: Verdana; font-size: 12px; color: red; } List of definitions Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Selector types Relation – element type (name) Relation – class XHTML: CSS: Relation – class Relation - id <p>text</p> p {font-family: Verdana;} <p class=“myparagraph">text</p> .myparagraph {font-family: Verdana;} <p id=“myuniqueparagraph">text</p> #myuniqueparagraph {font-family: Verdana;} Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
CSS units Numbers Size units Percent Color Integers with or without sign (14;-5;+9) Real numbers (0.5) Size units em – relative unit– size „M“ of current font ex – same as em but „x“ (approx. ½ em) px – pixel cm – centimeter in – inch Percent Rel. unit, with or without sign (25%; -5%; 50,5%) Color Keywords (black, blue, silver, red…) Numeric rgb(80, 50,255), rgb(10%,20%,30%). Range is 0-255 In hexadecimal (#RRGGBB) - #0000FF (pure blue) Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Comments Commenting your CSS code Between /* and */ No functional purpose, browser ignores them Technologie pro publikování na webu 1, Ing. Jiří Štěpánek
Sources Where can I find list of properties used to format elements? http://www.w3schools.com/css/default.asp Technologie pro publikování na webu 1, Ing. Jiří Štěpánek