Html css review 02 css

written in the Cascading Style Sheets CSS language.. Types of Style Sheets... @import urlurl; Ex: @import urlcompany.css; @import urlsupport.css;... Exploring Style Rules3.1.. Setting th

CSS

Review

Content

1 Introducing CSS

how it should be displayed

written in the Cascading Style Sheets (CSS) language

Web Consortium (W3C) that defines the standards for HTML

CSS Version 3

2 Types of Style Sheets

External Styles

website

<link href=" url " rel=" stylesheet " type=" text/css " media=" device " />

@import url(url);

Ex: @import url(company.css);

@import url(support.css);

Embedded Styles

only apply to the HTML document in which they are created and are not accessible to other documents in the website

Inline Styles

HTML file

<element style="property1: value1; property2: value2;">

3 Exploring Style Rules

3.1 Style Rules

3.2 Browser Extensions

3.3 Style Specificity & Precedence

3.1 Style Rules

3.2 Browser Extensions

3.3 Style Specificity & Precedence

 Style Precedence

body { color : black;}

header { color : red;}

header { color : blue;}

 Defining Important Styles

property: value !important;

Ex: h1 { color : orange !important ;}

4 Style Comments

< span style=" color : red ">Red color</ span >

< span style=" color : #f00 ">Red color</ span >

< span style=" color : rgb ( 255 , 0 , 0 ) ">Red color</ span >

< span style=" color : hsl ( 0 , 100% , 50% ) ">Red color</ span >

< span style=" color : rgba ( 255 , 0 , 0 , 0.5 ) "> Semi-Opaque red</ span >

< span style=" color : hsla ( 0 , 100% , 50% , 0.5 ) "> Semi-Opaque red</ span >

5 Colors

6 Selector Patterns

6.1 Contextual Selectors

6.2 Attribute Selectors

6.1 Contextual Selectors

Contextual selector patterns

6.2 Attribute Selectors

7 Texts & Fonts

7.1 Font Family

7.2 Setting the Font Size

7.3 Spacing, Indentation & Style

7.4 Aligning Horizontally & Vertically7.5 Combining All Text Formatting

7.1 Font Family

 Web font format

7.2 Setting the Font Size

 Using font-size property

body { font-size : 12pt; }

 Units

– Absolute Units: mm (millimeters), cm (centimeters), in (inches), pt

(points), and pc (picas)

– Relative Units: px (pixel)

– Scaling Fonts: % (percentage), em (ephemeral unit, M), rem (root

7.3 Spacing, Indentation & Style

lighter, 100  900

overline, line-through

uppercase, lowercase, none

small-caps

7.4 Aligning Horizontally & Vertically

center, justify

7.5 Combining All Text Formatting

font: style variant weight size/height family

8 Spacings, Borders & Shadows

8.1 Spacings (margin, padding)

8.2 Borders

8.3 Rounded Corners

8.4 Shadows

8.1 Spacings (margin, padding)

 padding : size

 padding : top right bottom left

 padding : top left-right bottom

 padding : top-bottom left-right

 padding-top , padding-right , padding-bottom , padding-left

8.2 Borders

border-<side>: width style color; border: width style color;

8.3 Rounded Corners

 border-radius: top-left top-right bottom-right bottom-left;

 border-radius: radius

 border-corner-radius: radius;

where corner is either top-left , top-right , bottom-right , or bottom-left

8.4 Shadows

text-shadow: color offsetX offsetY blur;

 Box Shadow

box-shadow: color offsetX offsetY blur;

9 Pseudo Classes & Elements

9.1 Pseudo Classes

9.2 Pseudo Elements

9.1 Pseudo Classes

 Dynamic pseudo class

9.2 Pseudo Elements

 Generating Content with CSS

THE END