Lecture 4: CSS (part 2)

Ouissem Ben Fredj

[email protected]
http://lms.tu.edu.sa/
502261-3 – Web Systems

Taif University
College of Computers and Information Technology
A different emphasis
● CSS is the same for XML as it is for HTML and XHTML, but--
● XML contains no display information
● If you want your XML to be easily read by humans, you need CSS
● You need to take charge of arranging text on the page
● HTML can use tables for layout
● In XHTML you should use CSS (but tables are much easier)
● In XML you don’t have tables
● Some browsers, especially older versions of IE, don’t support
CSS very well, so:
● You should make sure everyone who views your pages uses the same
version of the same browser (this is possible in some companies), or
● You should test your pages in all the most common browsers
The display property
● Every element that is formatted by a CSS command is
considered to be in an invisible “box”
● The box containing an element can have one of three
display properties:
● display: block
● The element will start on a new line, and so will the element that
follows it (an HTML paragraph is an example)
● display: inline
● (default) The element will not start on a new line, or cause the next
element to start on a new line (bold is an HTML example)
● display: none
● The element is hidden and will not appear on the display
CSS units
● For many of the remaining CSS values, we will need to be
able to specify size measurements
● These are used to specify sizes:
● em width of the letter ‘m’
● ex height of the letter ‘x’
● px pixels (usually 72 per inch, but depends on monitor)
● % percent of inherited size
● These are also used to specify sizes, but don’t really make sense unless
you know the screen resolution:
● in inches
● cm centimeters
● mm millimeters
● pt points (72pt = 1in)
● pc picas (1pc = 12pt)
● Note: you can use decimal fractions, such as 1.5cm
Boxes
● The invisible box containing a styled element has three
special areas:

The element
padding (invisible)
border (can be colored)

margins (invisible)
Padding
● Padding is the extra space around an element, but inside
the border
● To set the padding, use any or all of:
● padding-top: size
● padding-bottom: size
● padding-left: size
● padding-right: size
● padding: size to set all four sides at once
● size is given in the units described earlier
● Example: sidebar {padding: 1em; padding-bottom: 5mm}
Borders
● You can set border attributes with any or all of: border-top:,
border-bottom:, border-left:, border-right:, and border:
(all at once)
● The attributes are:
● The thickness of the border: thin, medium (default), thick, or a specific
size (like 3px)
● The style of the border: none, dotted, dashed, solid, double, groove,
ridge, inset, or outset
● The color of the border: one of the 16 predefined color names, or a hex
value with #rrggbb or rgb(r, g, b) or rgb(r%, g%, b%)
● Example: section {border-top: thin solid blue;}
● Note: the special styles (such as groove) are not as cool as they
sound
Margins
● Margins are the extra space outside the border
● Setting margins is analogous to setting padding
● To set the margins, use any or all of:
● margin-top: size
● margin-bottom: size
● margin-left: size
● margin-right: size
● margin: size to set all four sides at once
Box and display interactions
● With display:none, contents are invisible and margin,
border, and padding settings have no effect
● With display:block, margin, border, and padding settings
work about as you would expect
● With display:inline (which is the default if you don’t
specify otherwise):
● Margin, border, and padding settings for left and right work about
as you would expect
● Margin, border, and padding settings for top and bottom do not
add extra space above and below the line containing the element
● This means that inline boxes will overlap other text
Sizing elements
● Every element has a size and a natural position in
which it would be displayed
● You can set the height and width of display:block
elements with:
● height: size
● width: size
● You cannot set the height and width of inline
elements (but you can set left and right margins)
● In HTML, you can set the height and width of
images and tables (img and table tags)
The position property
● The position property is at the heart of all CSS-based
layouts. The position property determines the reference
point for the positioning of each element box.
● There are four values for the position property:
● static: default, normal flow
● fixed: the element does not move when the page is scrolled
● relative: move the element with respect to the position in
which it would appear using normal flow
● absolute: move the element with respect to the positioning
context (the closest relative ancestor container, or the body)
position:absolute; left: 0in; top: 0in position:absolute; right: 0in; top: 0in

Setting absolute position

● To move an element to an absolute position on the page
● position: absolute (this is required!) and also one or more of
● left: size or right: size
● top: size or bottom: size
● Confusing stuff:
● size can be positive or negative
● top: size puts an element’s top size units from the page top
● bottom: size puts an element’s bottom size units from the page bottom
● left: size puts an element’s left side size units from the left edge of the page
● right: size puts an element’s right side size units from the right edge of the
page
● Changing an element’s absolute position removes it from the natural flow, so
other elements fill in the gap
● You need to be careful not to overlap other elements

position:absolute; left: 0in; bottom: 0in position:absolute; right: 0in; bottom: 0in
Setting relative position
● To move an element relative to its natural position, use
● position: relative (this is required!) and also one or more of
● left: size or right: size
● top: size or bottom: size
● Confusing stuff:
● size can be positive or negative
● to move left, make left negative or right positive
● to move right, make right negative or left positive
● to move up, make top negative or bottom positive
● to move down, make bottom negative or top positive
● Setting an element’s position does not affect the position of other
elements, so
● There will be a gap in the element’s original, natural position
● Unless you are very careful, your element will overlap other elements
Floating Elements
● float: This property lets elements float into the left or right
margins where the text wrapping arounds
● Values: none | left | right
● clear: this property specifies which sides of an element where
other floating elements are not allowed.
● Left: No floating elements allowed on the left side
● Right: No floating elements allowed on the right side
● Both: No floating elements allowed on either the left or the right side
● none: Default. Allows floating elements on both sides
● Inherit: Specifies that the value of the clear property should be inherited
from the parent element (no IE)
Pseudo-elements

● Pseudo-elements describe “elements” that are not

actually between tags in the XML document
● Syntax: element:pseudo-class {...}
● first-letter the first character in a block-level element
● first-line the first line in a block-level element (depends on the
browser’s current window size)
● Especially useful for XML (but not implemented in
Internet Explorer):
● before adds material before an element
● Example: author:before {content: "by "}
● after adds material after an element
But wait! There’s more...
● In this and the preceding lectures, I’ve covered some of
the more commonly useful parts of CSS
● (In other words, the parts I’ve been using)
● There are other features I haven’t touched on