Topic 3 – Stylesheet Language
Introduction to CSS
– CSS Syntax
– CSS Structure
– Selectors and CSS3
What is CSS?
Where did it come from?
2

What Is CSS?
Cascading Style Sheets (CSS)
• CSS is a W3C recommendation (standard) for describing the appearance of HTML elements
• With CSS, we can assign font properties, colors, sizes, borders, background images, and even position elements on the page
• CSS can be added directly to any HTML element (via the style attribute), within the element, or, most commonly, in a separate text file that contains only CSS.
3
CSS Syntax
4

CSS Syntax
Overview
• A CSS document consists of one or more style rules
• A rule consists of a selector that identifies the HTML element or elements that will be affected, followed by a series of property:value pairs (each pair is also called a declaration)
• The series of declarations is also called the declaration block .
5
CSS Syntax
Overview
declaration
selector { property: value; property2: value2; } rule
syntax
examples
declaration block
selector
em { color: red; }
property value
p{
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
6

CSS Syntax
Selectors
• Every CSS rule begins with a selector .
• The selector identifies which element or elements in the HTML document will be affected by the declarations in the rule
• Many ways to write selectors (stay tuned…)
7
CSS Syntax
Properties
Property Type Property
Fonts font font-family
font-size font-style font-weight @font-face
Text letter-spacing line-height
text-align text-decoration text-indent
Color and Background
background background-color background-image background-position background-repeat box-shadow
color opacity
Borders
border
border-color border-width border-style
border-top, border-left, … border-image border-radius
8

CSS Syntax
Properties
Property Type Property
Spacing padding
padding-bottom, padding-left, …
margin
margin-bottom, margin-left, …
Sizing
height max-height max-width min-height min-width width
Layout
bottom, left, right, top clear
display
float
overflow position visibility z-index
Lists list-style list-style-image
list-style-type
Effects animation filter
perspective transform transition
9
CSS Syntax
Values
• The unit of any given value is dependent upon the property.
• Some property values are from a predefined list of keywords. Others are values such as length measurements, percentages, numbers without units, color values, and URLs.
10

CSS Syntax
Colors
• Name
• RGB
• Hexadecimal • RGBa
• HSL
11
CSS Syntax
Relative and absolute Units
• Relative • px
• em •%
• vw,vh
• Absolute • In
• cm • Pt
12

Location of Styles
13
Location of Styles
Inline Styles
Inline styles are style rules placed within an HTML element via the style attribute

Share Your Travels

Description

…

Reviews

Using inline styles is generally discouraged Handy for quickly testing out a style change
14

Location of Styles
Embedded Style Sheet
Embedded style sheets (also called internal styles) are style rules placed within the

...
font-size: 18pt;
font-weight: bold;
15
Location of Styles
External Style Sheet
External style sheets are style rules placed within a external text file with the .css extension.



16

Selectors
17
Selectors
Remember the DOM tree from HTML

Reviews

.first {
font-style: italic; color: red;
}
21
Selectors
Id Selectors
An id selector allows you to target a specific element by its id attribute regardless of its type or position
22

Selectors
Id Selectors

Reviews

By Susan on 2016-11-18

#latestComment { font-style: italic; color: red;
}
23
Selectors
Attribute Selectors
An attribute selector provides a way to select HTML elements either by the presence of an element attribute or by the value of an attribute
[title] { ... }
24

Selectors
Attribute Selectors