Css class-02

Md. Ali Hosssain
Email:Students.gai@gmail.com
Phone:01731402303

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”>…

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">…

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 }

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>
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 }

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;}

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.

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.

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.

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 }

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.

Pseudo-elements
p
p.initial
p.initial:first-line
uppercase }
p.initial:first-letter

{ text-indent: 1em }
{ text-indent: 0 }
{ text-transform:
{ font-size: 24pt }

This indents all normal paragraphs. A paragraph that is
declared with class="initial" is not indented, and its first
line appears in all capital letters, with an extra-large first letter.

The box model
top
margin (transparent)
border
padding

left

Content

bottom

right

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

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

Example:
Defining an unordered list style:

And writing the HTML code:

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

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

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

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

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

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

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

Css class-02

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Css class-02 (20)

More from Md Ali Hossain (20)

Recently uploaded (20)

Css class-02