Md. Ali HosssainEmail:[email protected]: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
Top Related