Copenhagen, 6 December 2004 Modern CSS Principles Miruna Bădescu Finsiel Romania.
Post on 27-Mar-2015
212 Views
Preview:
Transcript
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 scenarioProgrammerWeb 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 don’t enjoy it hard to maintain longer code
Search engine get confused it’s not semantically correct
4
Use CSS instead
Standard for Web design
Separates the content from it’s appearance
Allows information to be presented differently according to:the target media (screen, printer, aural, small screens,
etc.)client’s settings (alternative layouts, text browsers, etc.)
5
Adding styles to pages (1)
1. Inline CSS handy, but don’t 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 client’s 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.htmlsample_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 pul
li li 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: <div class=“sitetitle”>…
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: <div id=“content”>…
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: <p xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ro">…
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: <p>This <strong>paragraph</strong> 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: <p>This is a paragraph.</p>
<span>this one will be red</span> <span>this one not</span>
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
rightleft
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 listse.g. default style for li
nonecan be applied to any elementdoesn’t show the element or the space it would take if shown
19
Positioning (1)
CSS2 provides four types of positioning schemes:
normaldefault positioning:
block boxes flow verticallyinline boxes flow horizontally
20
Positioning (2)
relativedone by browsers in two steps:
first, the normal flow is followedthe box is moved according to its offset properties (top, right, left,
bottom)
Notes:use z-index style property to specify their ordera 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)
floatspecify elements to shift either to the left or rightsurrounding content flows around the opposite sidea width should be specified for a floating box
Text text text text text text text text text text text text text text text texttext text text text text text texttext 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 sideif a floating box is taller than the first surrounding block, it will float around the next block, toosolution: clear the floating
Text text text text text text
Text text text text text texttext text text text text
Text text text text text text
Text text text text texttext text text text text
texttexttexttext
texttexttexttext
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: inchescm: centimeterspt: pointspc: picas
Validate your CSS
http://jigsaw.w3.org/css-validator/validator.html
Exercises
• Modeling a simple page with CSS• Demonstrating the box model• Scaling an image
top related