Cascading Style Sheets CSS

Содержание

1. Cascading Style Sheets CSS
2. What is CSS?Cascading Style Sheets (CSS): is
3. Cascading Style SheetA style sheet consists of
4. Basic CSS SyntaxCSS Syntaxselector {property: value;}
5. Style Sheet Syntax Explainedselectorpropertyvaluerule
6. Three Different Scopes of CSSLocalconfined to a
7. Local Style SheetExampleInternal Style Sheet Applied to
8. Internal Style SheetHow to create?Put tag
9. Internal Style SheetExamplebody {background-color:beige;}p {color: purple;}
10. External Style SheetAn external style sheet is
11. Selector TypeTagredefines the look of a specific
12. Three properties of CSSInheritancechild elements inherit styles
13. Скачать презентанцию

What is CSS?Cascading Style Sheets (CSS): is a simple mechanism for adding style (e.g. fonts, colors, layouts) to Web documents. Styles provide powerful control over the presentation of web pages.

Слайды и текст этой презентации

Слайд 1Computation and Problem Solving
Cascading Style Sheets (CSS)

Korzhumbayev Azamat

Слайд 2What is CSS?
Cascading Style Sheets (CSS): is a simple mechanism

for adding style (e.g. fonts, colors, layouts) to Web documents.

Styles provide powerful control over the presentation of web pages.

What is CSS?Cascading Style Sheets (CSS): is a simple mechanism for adding style (e.g. fonts, colors, layouts)

Слайд 3Cascading Style Sheet
A style sheet consists of a set of

rules.
Each rule consists of one or more selectors and a

declaration block.
A declaration block consists of a list of declarations in curly braces ({}).
Each declaration consists of a property, a colon (:), a value, then a semi-colon (;).

Cascading Style SheetA style sheet consists of a set of rules.Each rule consists of one or more

Слайд 4Basic CSS Syntax
CSS Syntax
selector {property: value;}

Слайд 5Style Sheet Syntax Explained
selector
property
value

rule

Слайд 6Three Different Scopes of CSS
Local
confined to a single element (tag)
Internal
affect

elements in an entire page
External
can affect multiple pages
Precedence
Local > Internal

or External

Three Different Scopes of CSSLocalconfined to a single element (tag)Internalaffect elements in an entire pageExternalcan affect multiple

Слайд 7Local Style Sheet
Example
Internal Style Sheet Applied to

Header 1
Practice
add “text-align” property to make it centered
add “border” property

to let it have black, 1px thick, solid border at left, right, top, and bottom
Tip: use “border: ;” format for 4 sides; use “border-: xx yy zz;” for a particular side, where can be left, right, top or bottom. Can apply to other similar properties.

Слайд 8Internal Style Sheet
How to create?
Put tag between

and tags of your HTML page
Use type attribute to

indicate the style sheet type, usually type=“text/css”
Put your set of style sheet rules in between tags

Слайд 9Internal Style Sheet
Example

body {background-color:beige;}
p {color: purple;}

Слайд 10External Style Sheet
An external style sheet is simply a text-only

file with .css extension
It contains only CSS rules. No tags

inside!
How to link to external style sheet?

External Style SheetAn external style sheet is simply a text-only file with .css extensionIt contains only CSS

Слайд 11Selector Type
Tag
redefines the look of a specific tag
E.g. body {background-color:

#000000;}
Class
can apply to any tag
E.g. .indent{margin-right:5%;margin-left: 5%;}
In HTML,
Advanced
IDs,

pseudo-class selectors
E.g. #myId {color: #38608A;}

Selector TypeTagredefines the look of a specific tagE.g. body {background-color: #000000;}Classcan apply to any tagE.g. .indent{margin-right:5%;margin-left: 5%;}In

Слайд 12Three properties of CSS
Inheritance
child elements inherit styles from parent element
Specificity
calculated

by counting various components of your css and expressing them

in a form (a,b,c,d): inline, id, class, element.
Cascade
Controls all css precedence

Three properties of CSSInheritancechild elements inherit styles from parent elementSpecificitycalculated by counting various components of your css

Скачать презентацию

Разделы презентаций

Cascading Style Sheets CSS

Содержание

Слайды и текст этой презентации

Слайд 1Computation and Problem Solving
Cascading Style Sheets (CSS)

Korzhumbayev Azamat

Слайд 2What is CSS?
Cascading Style Sheets (CSS): is a simple mechanism

for adding style (e.g. fonts, colors, layouts) to Web documents.

Слайд 3Cascading Style Sheet
A style sheet consists of a set of

rules.
Each rule consists of one or more selectors and a

Слайд 4Basic CSS Syntax
CSS Syntax
selector {property: value;}

Слайд 5Style Sheet Syntax Explained
selector
property
value

rule

Слайд 6Three Different Scopes of CSS
Local
confined to a single element (tag)
Internal
affect

elements in an entire page
External
can affect multiple pages
Precedence
Local > Internal

Слайд 7Local Style Sheet
Example
Internal Style Sheet Applied to

Header 1
Practice
add “text-align” property to make it centered
add “border” property

Слайд 8Internal Style Sheet
How to create?
Put tag between

and tags of your HTML page
Use type attribute to

Слайд 9Internal Style Sheet
Example

body {background-color:beige;}
p {color: purple;}

Слайд 10External Style Sheet
An external style sheet is simply a text-only

file with .css extension
It contains only CSS rules. No tags

Слайд 11Selector Type
Tag
redefines the look of a specific tag
E.g. body {background-color:

#000000;}
Class
can apply to any tag
E.g. .indent{margin-right:5%;margin-left: 5%;}
In HTML,
Advanced
IDs,

Слайд 12Three properties of CSS
Inheritance
child elements inherit styles from parent element
Specificity
calculated

by counting various components of your css and expressing them

Обратная связь

Что такое TheSlide.ru?

Разделы презентаций

Cascading Style Sheets CSS

Содержание

Слайды и текст этой презентации

Слайд 1Computation and Problem SolvingCascading Style Sheets (CSS)Korzhumbayev Azamat

Слайд 2What is CSS?Cascading Style Sheets (CSS): is a simple mechanism

for adding style (e.g. fonts, colors, layouts) to Web documents.

Слайд 3Cascading Style SheetA style sheet consists of a set of

rules.Each rule consists of one or more selectors and a

Слайд 4Basic CSS SyntaxCSS Syntaxselector {property: value;}

Слайд 5Style Sheet Syntax Explainedselectorpropertyvaluerule

Слайд 6Three Different Scopes of CSSLocalconfined to a single element (tag)Internalaffect

elements in an entire pageExternalcan affect multiple pagesPrecedenceLocal > Internal

Слайд 7Local Style SheetExampleInternal Style Sheet Applied to

Header 1Practiceadd “text-align” property to make it centeredadd “border” property

Слайд 8Internal Style SheetHow to create?Put tag between

and tags of your HTML pageUse type attribute to

Слайд 9Internal Style SheetExamplebody {background-color:beige;}p {color: purple;}

Слайд 10External Style SheetAn external style sheet is simply a text-only

file with .css extensionIt contains only CSS rules. No tags

Слайд 11Selector TypeTagredefines the look of a specific tagE.g. body {background-color:

#000000;}Classcan apply to any tagE.g. .indent{margin-right:5%;margin-left: 5%;}In HTML, AdvancedIDs,

Слайд 12Three properties of CSSInheritancechild elements inherit styles from parent elementSpecificitycalculated

by counting various components of your css and expressing them

Похожие презентации

Обратная связь

Что такое TheSlide.ru?

Слайд 1Computation and Problem Solving
Cascading Style Sheets (CSS)

Korzhumbayev Azamat

Слайд 2What is CSS?
Cascading Style Sheets (CSS): is a simple mechanism

Слайд 3Cascading Style Sheet
A style sheet consists of a set of

rules.
Each rule consists of one or more selectors and a

Слайд 4Basic CSS Syntax
CSS Syntax
selector {property: value;}

Слайд 5Style Sheet Syntax Explained
selector
property
value

rule

Слайд 6Three Different Scopes of CSS
Local
confined to a single element (tag)
Internal
affect

elements in an entire page
External
can affect multiple pages
Precedence
Local > Internal

Слайд 7Local Style Sheet
Example
Internal Style Sheet Applied to

Header 1
Practice
add “text-align” property to make it centered
add “border” property

Слайд 8Internal Style Sheet
How to create?
Put tag between

and tags of your HTML page
Use type attribute to

Слайд 9Internal Style Sheet
Example

body {background-color:beige;}
p {color: purple;}

Слайд 10External Style Sheet
An external style sheet is simply a text-only

file with .css extension
It contains only CSS rules. No tags

Слайд 11Selector Type
Tag
redefines the look of a specific tag
E.g. body {background-color:

#000000;}
Class
can apply to any tag
E.g. .indent{margin-right:5%;margin-left: 5%;}
In HTML,
Advanced
IDs,

Слайд 12Three properties of CSS
Inheritance
child elements inherit styles from parent element
Specificity
calculated