Scribd
Upload
40 views

Welcome To The: Web Design Class !

This document outlines a class on CSS fonts and pseudo-classes. It discusses CSS font properties like font, font-family, line-height, font-size, and font-weight. It also covers various CSS pseudo-classes like :link, :visited, :hover, :active, :checked, :disabled, :enabled and how they can be used to style elements in different states. The instructor reviews the previous class, checks homework, discusses problems and assigns new homework on these CSS topics.

Uploaded by

Sakebul Islam
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
40 views

Welcome To The: Web Design Class !

This document outlines a class on CSS fonts and pseudo-classes. It discusses CSS font properties like font, font-family, line-height, font-size, and font-weight. It also covers various CSS pseudo-classes like :link, :visited, :hover, :active, :checked, :disabled, :enabled and how they can be used to style elements in different states. The instructor reviews the previous class, checks homework, discusses problems and assigns new homework on these CSS topics.

Uploaded by

Sakebul Islam
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 45

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

You might also like