1 Cascading style sheet TNPW1 Ing. Jiří Štěpánek

2 Design and content Web page can be divided into two parts DesignVisual 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

3 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

4 Design and content In modern way of web page creating design code and content code are in separate files Warning 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

5 Layout Visual layout of pageLayout 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

6 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

7 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

8 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

9 Using CSS on page Inline element stylingNo reusability, for all media Using element Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

10 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

11 Selector types Relation – element type (name) Relation – classXHTML: CSS: Relation – class Relation - id

text

12 CSS units Numbers Size units Percent ColorIntegers 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

13 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

14 Sources Where can I find list of properties used to format elements? Technologie pro publikování na webu 1, Ing. Jiří Štěpánek