Cascading Style Sheets CSS

Сентябрь 2, 2022

Главная
Алгебра
Cascading Style Sheets CSS

Содержание

2. What is CSS? Cascading Style Sheets (CSS): is a simple mechanism for adding style (e.g. fonts,
3. Cascading Style Sheet A style sheet consists of a set of rules. Each rule consists of
4. Basic CSS Syntax CSS Syntax selector {property: value;}
5. Style Sheet Syntax Explained selector property value rule
6. Three Different Scopes of CSS Local confined to a single element (tag) Internal affect elements in
7. Local Style Sheet Example Internal Style Sheet Applied to Header 1 Practice add “text-align” property to
8. Internal Style Sheet How to create? Put tag between and tags of your HTML page Use
9. Internal Style Sheet Example body {background-color:beige;} p {color: purple;}
10. External Style Sheet An external style sheet is simply a text-only file with .css extension It
11. Selector Type Tag redefines the look of a specific tag E.g. body {background-color: #000000;} Class can
13. Скачать презентацию

Слайд 2

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.

Слайд 3

Cascading 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 (;).

Слайд 4

Basic CSS Syntax
CSS Syntax
selector {property: value;}

Слайд 5

Style Sheet Syntax Explained
selector
property
value
rule

Слайд 6

Three 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

Слайд 7

Local 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.

Слайд 8