Modern CSS Principles

1
Modern CSS Principles

• Miruna Badescu
• Finsiel Romania

2
Authoring Web pages scenario

• Result
• Programmer
• Web designer
• Conclusion both of them must know and follow
  (the same) standards from the beginning

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)

• Inline CSS
• handy, but dont abuse it because it puts
  presentation back with the content

6
Adding styles to pages (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)

• 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
Inheritance in CSS

• HTML documents are parsed into a document tree
• Example

• used when building CCS rules
• some properties (e.g. font-family) are inherited
  from parents if not specified

10
Types of selectors (1)

• universal selector (CSS2)
• applies to all elements in a page
• e.g. color red
• element type selector
• applies to all elements of that type from a page
  (standard tags)
• e.g. h2 color red
• class selector
• applies to elements defined with that class
• e.g. .sitetitle color red
• HTML ltdiv classsitetitlegt

11
Types of selectors (2)

• ID selector
• applies to the single element with that id from
  the page
• e.g. content color red
• HTML ltdiv idcontentgt
• pseudo-element selector (CSS2)
• applies to the first letter, line or child of
  the nominated element
• e.g. pfirst-letter color red
• pseudo-class selector (CSS2)
• applies to the nominated element in certain
  conditions
• e.g. ahover color red
• applies to all element in a certain language
• e.g. lang(ro) text-decoration underline
• HTML ltp xmlns"http//www.w3.org/1999/xhtml"
  xmllang"ro"gt

12
Types of selectors (3)

• descendant selector
• applies to an element that is a child of another
  element
• e.g. p strong color red
• HTML ltpgtThis ltstronggtparagraphlt/stronggt is
  long
• parent-child selector (CSS2)
• applies to an element that is a strict child of
  another element
• e.g. body gt p color red

13
Types of selectors (4)

• adjacent selector (CSS2)
• applies to an element that appears in the code
  right after another
• e.g. p span color red
• HTML ltpgtThis is a paragraph.lt/pgt
• ltspangtthis one will be redlt/spangt
• ltspangtthis one notlt/spangt
• attribute selector (CSS2)
• applies to elements that have a property
  specified or specified with a certain value
• e.g. inputtypetext color red

14
The box model
top
margin (transparent)
border
padding
left
Content
right
bottom
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

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 text text text
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
clear right style for this element
Text text text text text text text text text text
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

browser window
fixed position for this element
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

25
Validate your CSS

• http//jigsaw.w3.org/css-validator/validator.html

26
Exercises

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