Welcome to the
Web Design Class !
Develop of Universal Software & Research Association http://dusrasoft.com
Css Course Outline
Develop of Universal Software & Research Association http://dusrasoft.com
CSS
Class-4
Develop of Universal Software & Research Association http://dusrasoft.com
Follow Note
Discuses previous Class
Show home task
Show problem
Fix the problem
Start running class
Note: Every home work will be check
either home work punishment will be
accept
Develop of Universal Software & Research Association http://dusrasoft.com
Chapter #8: CSS Font
CSS Font properties:
font
font-family
line-height
font-size
font-variant
font-weight
Develop of Universal Software & Research Association http://dusrasoft.com
font
font: font-style font-variant font-weight font-size/line-height font-family|caption|
icon|menu|message-box|small-caption|status-bar|initial|inherit;
Develop of Universal Software & Research Association http://dusrasoft.com
font-family
font-family: family-name|generic-family|initial|inherit;
Note: Insert font offline and online(google fonts)
Develop of Universal Software & Research Association http://dusrasoft.com
line-height
line-height: normal|number|length|initial|inherit;
Develop of Universal Software & Research Association http://dusrasoft.com
font-size
font-size:medium|xx-small|x-small|small|large|x-large|xx-
large|smaller|larger|length|initial|inherit;
Develop of Universal Software & Research Association http://dusrasoft.com
font-variant
font-variant: normal|small-caps|initial|inherit;
Develop of Universal Software & Research Association http://dusrasoft.com
font-weight
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
Develop of Universal Software & Research Association http://dusrasoft.com
Chapter #9: CSS Pseudo Classes
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mousse over it
Style visited and unvisited links differently
Style an element when it gets focus
Develop of Universal Software & Research Association http://dusrasoft.com
CSS Pseudo Classes
selector:pseudo-class {
property:value;
}
Develop of Universal Software & Research Association http://dusrasoft.com
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
anchor pseudo-classes }
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS Pseudo Classes List
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :active Selector
:active {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :checked Selector
:checked {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :disabled Selector
:disabled {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :enabled Selector
:enabled {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :empty Selector
:empty {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :first-child Selector
:first-child {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :first-of-type Selector
:first-of-type {
css declarations;
}
Note: This is the same of nth-of-type(1)
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :hover
:hover {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :in-range
:in-range {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :invalid
:invalid {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :valid
:valid {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :lang
:lang(languagecode) {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :last-child
:last-child {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :last-of-type
:last-of-type {
css declarations;
}
Note: This is the same of nth-last-of-type(1)
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :link Selector
:link {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :not selector
:not(selector) {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :nth-child()
:nth-child(number) {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :nth-last-child()
:nth-last-child(number) {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :nth-child()
:nth-child(number) {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :nth-of-type
:nth-of-type(number) {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :nth-last-of-type
:nth-last-of-type(number) {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :only-of-type
:only-of-type {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :only-child
:only-child {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :required
:reuired {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :root
:root {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :target
:target {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
CSS :visited
:visited {
css declarations;
}
Develop of Universal Software & Research Association http://dusrasoft.com
Overview the class
Develop of Universal Software & Research Association http://dusrasoft.com
Give the home task
Develop of Universal Software & Research Association http://dusrasoft.com
See Will Next Chapter
Develop of Universal Software & Research Association http://dusrasoft.com
