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.
Share Your Travels -- New York - Central
Park
16
Selectors
17
Selectors
Remember the DOM tree from HTML
Selectors
Element Selectors
declaration
selector { property: value; property2: value2; } rule
Element selectors select all instances of a given HTML
syntax
examples
element.
selector
em { color: red; }
property value
declaration block
p{
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
19
Selectors
Class Selectors
A class selector allows you to simultaneously target different HTML elements regardless of their position in the document tree using the same class attribute value.
20
Selectors
Class Selectors
Share Your Travels
Reviews
By Ricardo on 2016-05-23
Easy on the HDR buddy.
By Susan on 2016-11-18
I love Central Park.
.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
Share Your Travels
Reviews
By Ricardo on 2016-05-23
Easy on the HDR buddy.
I love Central Park.
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
25
Selectors
Attribute Selectors
Selector Matches
[] A specific attribute.
[=] A specific attribute with a specific value.
[~=] A specific attribute whose value matches
at least one of the words in a space delimited
list of words.
[^=] A specific attribute whose value begins with a specified value.
[*=] A specific attribute whose value contains a substring.
[$=] A specific attribute whose value ends with a specified value.
26
Selectors
Pseudo-Element and Pseudo-Class Selectors
A pseudo-element selector is a way to select something that does not exist explicitly as an element in the HTML document tree but which is still a recognizable selectable object.
A pseudo-class selector does apply to an HTML element, but targets either a particular state or, in CSS3, a variety of family relationships.
27
Selectors
Pseudo-Class Selectors
• Elements
• Links
28
Selectors
Pseudo-Element Selectors
29
Selectors
Pseudo-Element and Pseudo-Class Selectors
30
Selectors
Contextual Selectors
Selector Matches Example
Descendant A specified element that is contained somewhere within another specified
element.
div p
Selects a
element that is contained somewhere within a
element.
Child A specified element that is a direct div>h2
child of the specified element. Selects an
element that is a
child of a
element.
Adjacent Sibling A specified element that is the next h3+p
sibling (i.e., comes directly after) of Selects the first
after any
.
the specified element
General Sibling A specified element that shares the same parent as the specified
element.
h3~p
Selects all the
elements that share the same
parent as the
.
31
Selectors
Contextual Selectors
Comments as of 2016-12-25
By Ricardo on 2016-05-23
Easy on the HDR buddy.
By Susan on 2016-11-18
I love Central Park.
ul a:link { color: blue; }
#main time { color: red; }
#main>time { color: purple; }
#main div p:first-child { color: green;
}
32