Copenhagen, 6 December 2004 Modern CSS Principles Miruna Bădescu Finsiel Romania

2 Result: Programmer Web designer Conclusion: both of them must know and follow (the same) standards from the beginning Authoring Web pages scenario ProgrammerWeb designer makes nice layout breaks it into HTML and CSS integrates layout in dynamic pages validates pages (WAI, CSS, etc.) improves HTML and CSS goes back to the designer… Your layout looks terrible! This is not my design!

3 Designing with tables Designers like it a lot allows accurate control over the layout with down to pixel-level they have tools (from Macromedia, Corel, Adobe Photoshop, etc.) that slice a picture into a Web page (HTML and CSS) End users suffer long loading time poor accessibility Programmers dont enjoy it hard to maintain longer code Search engine get confused its not semantically correct

4 Use CSS instead Standard for Web design Separates the content from its appearance Allows information to be presented differently according to: the target media (screen, printer, aural, small screens, etc.) clients settings (alternative layouts, text browsers, etc.)

5 Adding styles to pages (1) 1.Inline CSS handy, but dont abuse it because it puts presentation back with the content

6 Adding styles to pages (2) 2.Embedded CSS better, but makes code longer and less visible same style downloaded on clients machine multiple times style-sheet declaration

7 Adding styles to pages (3) 3.External CSS easier to read and modify downloaded once for all website pages separates content from presentation – the way to go sample.html sample_style.css

8 CSS rule Selector Values Properties

9 HTML documents are parsed into a document tree Example: Inheritance in CSS html head body title meta link h1 p ul li used when building CCS rules some properties (e.g. font-family) are inherited from parents if not specified

10 Types of selectors (1) 1.universal selector (CSS2) applies to: all elements in a page e.g.: * { color: red } 2.element type selector applies to: all elements of that type from a page (standard tags) e.g.: h2 { color: red } 3.class selector applies to: elements defined with that class e.g.:.sitetitle { color: red } HTML: …

11 Types of selectors (2) 4.ID selector applies to: the single element with that id from the page e.g.: #content { color: red } HTML: … 5.pseudo-element selector (CSS2) applies to: the first letter, line or child of the nominated element e.g.: p:first-letter { color: red } 6.pseudo-class selector (CSS2) applies to: the nominated element in certain conditions e.g.: a:hover { color: red } applies to: all element in a certain language e.g.: :lang(ro) { text-decoration: underline } HTML: …

12 Types of selectors (3) 7.descendant selector applies to: an element that is a child of another element e.g.: p strong { color: red } HTML: This paragraph is long… 8.parent-child selector (CSS2) applies to: an element that is a strict child of another element e.g.: body > p { color: red }

13 Types of selectors (4) 9.adjacent selector (CSS2) applies to: an element that appears in the code right after another e.g.:p + span { color: red } HTML: This is a paragraph. this one will be red this one not 10.attribute selector (CSS2) applies to: elements that have a property specified or specified with a certain value e.g.: input[type=text] { color: red }

14 The box model top right left bottom Content border padding margin (transparent)

15 Where does it apply For display purposes, every element in a document is considered to be a rectangular box which has a content are surrounded by padding, a border and margins

16 Example: Defining an unordered list style: And writing the HTML code:

17 Results in:

18 The display property Most used values for specifying the display type of an element: block – shows a separate block e.g. default style for h1, p, form, div inline – displays inside a text fragment e.g. default style for span, em, code list-item – used for lists e.g. default style for li none can be applied to any element doesnt show the element or the space it would take if shown

19 Positioning (1) CSS2 provides four types of positioning schemes: normal default positioning: block boxes flow vertically inline boxes flow horizontally

20 Positioning (2) relative done by browsers in two steps: first, the normal flow is followed the box is moved according to its offset properties (top, right, left, bottom) Notes: use z-index style property to specify their order a specific width property might cause an offset to be ignored Text text text text text text text text text text text text… Text text text text text text text text text text text text… paragraph with relative positioning, with positive top and left values

21 Positioning (3) float specify elements to shift either to the left or right surrounding content flows around the opposite side a width should be specified for a floating box Text text text text text text text text text text text text text Text text Box floating to the right

22 Positioning (4) Note: floating boxes take no space on the vertical side if a floating box is taller than the first surrounding block, it will float around the next block, too solution: clear the floating Text text text text text text Text text text text text text text text text text text Text text text text text text Text text text text text text text text text text text clear: right style for this element

23 Positioning (5) absolute the normal flow does not apply and the element is positioned according to its offset values (top, right, bottom, left) special case: fixed positioning – the containing block is the viewport of the browser window fixed position for this element browser window the rest of the content in the page that must be scrolled

24 Scaling There are two types of lengths units for fonts: relative em: computed value of the font-size ex: x-height px: pixels, relative to the viewing device absolute in: inches cm: centimeters pt: points pc: picas

Validate your CSS

Exercises Modeling a simple page with CSS Demonstrating the box model Scaling an image