2. 1.
Types of selectors (1)
universal selector (CSS2)
1.
element type selector
1.
applies to: all elements in a page
e.g.:
* { color: red }
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:
<div class=“sitetitle”>…
3. 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”>…
4.
pseudo-element selector (CSS2)
4.
applies to: the first letter, line or child of the nominated element
e.g.:
p:first-letter { color: red }
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">…
4. 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…
7.
parent-child selector (CSS2)
applies to: an element that is a strict child of another
element
e.g.: body > p { color: red }
5. 9.
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:
<p>This is a paragraph.</p>
<span>this one will be red</span>
<span>this one not</span>
9.
attribute selector (CSS2)
applies to: elements that have a property specified or specified
with a certain value
e.g.: input[type=“text”] { color: red }
6. CSS Id and Class
The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to specify
your own selectors called "id" and "class".
Example
#para1
{
text-align:center;
color:red;
}
The class Selector
The class selector is used to specify a style for a group of elements. Unlike
the id selector, the class selector is most often used on several elements.
Example
.center {text-align:center;}
7. The <span> and <div> Tags
These tags are provided to allow arbitrary chunks of
HTML to be treated as elements. This is usually done in
order to apply style attributes to them, as in the preceding
example.
A <span> ... </span> element defines an “inline”
structure, i.e. it simply defines a stretch of text. Thus it
can be used within a paragraph or table element without
affecting the flow of the text.
A <div> ... </div> element defines a “block” structure.
Usually the browser will place line breaks before and
after this element, but otherwise it has no effect itself.
8. Pseudo-classes
These are like style classes, but an element
acquires a pseudo-class by user action or by a
relationship other than decadency.
In the style sheet, a pseudo-class name is
preceded by a colon.
In the HTML, the pseudo-class name is NOT
used with the affected tag, because it is implied.
9. Pseudo-classes
Link-related pseudo-classes
a:link
{ color : red }
Applies when the link has not yet been visited.
a:visited { color : green }
Applies when the link has been visited.
a:hover
{ color: yellow }
Applies when the mouse is over the link.
10. Cascading Rule
If two equally specific rules can apply to the
same element, the one that comes last in the
style sheet is used. Thus, in the example below,
a:hover must follow a:link and a:visited in order
to have effect, since a link can be both visited (or
not) and hovering. The order of the first two
doesn’t matter since they are mutually exclusive.
a:link
{ color : red }
a:visited { color : green }
a:hover
{ color : yellow }
11. Pseudo-elements
Closely related to pseudo-classes, in that they are
defined by relationships, not by explicit declarations. A
pseudo-element refers to a virtual element that is part
of an actual element, rather than a special case of a
whole element.
:first-line is a pseudo-element that consists of the first
line of text in a block-level element.
:first-letter is a pseudo-element that consists of the first
letter of the text in an element.
14. Where does it apply
Margin - Clears an area around the border. The margin does not have a
background color, it is completely transparent
Border - A border that goes around the padding and content. The border is
affected by the background color of the box
Padding - Clears an area around the content. The padding is affected by the
background color of the box
Content - The content of the box, where text and images appear
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Let's do the math:
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px
15. The margin property can have from one to four
values.
margin:25px 50px 75px 100px;
top margin is 25px
margin:25px 50px;
right margin is 50px
top and bottom margins are 25px
bottom margin is 75px
right and left margins are 50px
left margin is 100px
margin:25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
margin:25px;
all four margins are 25px
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
doesn’t show the element or the space it would take if shown
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)
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
Notes:
use z-index style property to specify their order
a specific width property might cause an offset to be ignored
21. Positioning (3)
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
22. 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
23. Positioning
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
24. Positioning
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 text text
text text text text text
clear: right
style for this
element
