Md. Ali HosssainEmail:Students.gai@gmail.comPhone:01731402303

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

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

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 }

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 }

CSS Id and Class

The id and class SelectorsIn addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

#para1{text-align:center;color:red;}

Example

The class SelectorThe 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> TagsThese 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-classesThese 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-classesLink-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 RuleIf 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

: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.

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.

Pseudo-elementsp { text-indent: 1em }p.initial { text-indent: 0 } p.initial:first-line { text-transform: uppercase }p.initial:first-letter { 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 modeltop

rightleft

bottom

Content

border

padding

margin (transparent)

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 right margin is 50px bottom margin is 75px left margin is 100px

margin:25px 50px 75px;top margin is 25px right and left margins are 50px bottom margin is 75px

margin:25px 50px;top and bottom margins are 25px right and left margins are 50px

margin:25px;all four margins are 25px

Example:Defining an unordered list style:

And writing the HTML code:

Results in:

The display propertyMost used values for specifying the

display type of an element:block – shows a separate block

e.g. default style for h1, p, form, divinline – displays inside a text fragment

e.g. default style for span, em, codelist-item – used for lists

e.g. default style for linone

can be applied to any elementdoesn’t show the element or the space it would take

if shown

Positioning (1)CSS2 provides four types of positioning schemes:

normaldefault positioning:

block boxes flow verticallyinline boxes flow horizontally

Positioning (2)relative

done 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

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

fixed position for this element

browser window

the rest of the content in the page that must be scrolled

ScalingThere 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

Positioning 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

Positioning 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