1

Introducing CSS
 Content 2

1 The CSS benefits and power 4 Attaching Styles to HTML Doc

2 How HTML Creates DOM 5 Big Concepts

3 CSS Rules
 CSS Intro 3

• CSS is a separate language with its own syntax.

• Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of
documents written in HTML, and in fact, any XML language.

• Presentation refers to the way the document is delivered to the user, whether shown on
a computer screen, displayed on a cell phone, printed on paper, or read aloud by a
screen reader.
 CSS Benefits 4

Here is a quick rundown of the benefits of using style sheets:

• Precise type and layout controls: You can achieve print-like precision using CSS.
There is even a set of properties aimed specifically at the printed page.

• Less work: You can change the appearance of an entire site by editing one style
sheet. This also ensures consistency of formatting throughout the site.

• More accessible sites: When all matters of presentation are handled by CSS, you
can mark up your content meaningfully, making it more accessible for non-visual or
mobile devices
 CSS Power 5

• When used to its full potential, CSS is a robust and powerful design tool.

• It is proof of the power in keeping CSS separate from HTML, and presentation
separate from structure.
CSS Rule 6
 CSS Implementation 7

• There are three ways to apply CSS:

• External style sheets: An external style sheet is a separate, text-only document that
contains a number of style rules. It must be named with the .css suffix. The .css
document is then linked to (via the link element) or imported (via an @import rule in a
style sheet) into one or more HTML documents. In this way, all the files in a website
may share the same style sheet.

• Embedded style sheets: It is placed in a document via the style element, and its
rules apply only to that document. The style element must be placed in the head of the
document.

• Inline styles: You can apply properties and values to a single element by using the
style attribute in the element itself
 CSS Implementation… 8

• There are three ways to apply CSS:

• External style sheets: An external style sheet is a separate, text-only document that
contains a number of style rules. It must be named with the .css suffix. The .css
document is then linked to (via the link element) or imported (via an @import rule in a
style sheet) into one or more HTML documents. In this way, all the files in a website
may share the same style sheet.

• Embedded style sheets: It is placed in a document via the style element, and its
rules apply only to that document. The style element must be placed in the head of the
document.

• Inline styles: You can apply properties and values to a single element by using the
style attribute in the element itself
 CSS Big Concepts 9

• There are a few big ideas that you need to get your head around to be comfortable
with how Cascading Style Sheets behave.

Inheritance
• Styled HTML elements pass down certain style properties to the elements they
contain.
 CSS Big Concepts… 10

• There are a few big ideas that you need to get your head around to be comfortable
with how Cascading Style Sheets behave.

Document Structure
• HTML documents have an implicit structure, or hierarchy. For example, the sample
article we’ve been playing with has an html root element that contains a head and a
body, and the body contains heading and paragraph elements.
 CSS Big Concepts… 11

• There are a few big ideas that you need to get your head around to be comfortable
with how Cascading Style Sheets behave.

Parents and Childern

• All the elements contained within a given element are said to be its descendants.

• An element that is directly contained within another element is said to be the child of
that element. Conversely, the containing element is the parent.
 CSS Big Concepts… 12

• There are a few big ideas that you need to get your head around to be comfortable
with how Cascading Style Sheets behave.

CSS Priority
• Style information can come from various origins, listed here from highest priority to
lowest. In other words, items higher in the list override items below.
• If you don’t apply any style information to a web page, it renders according to the
browser’s internal style sheet. We’ve been calling this the default rendering; the
W3C calls it the user agent style sheet.
• Individual users can apply their own styles as well (the user style sheet, also called the
reader style sheet), which override the default styles in their browser. However, if the
author of the web page has attached a style sheet (the author style sheet), that
overrides both the user and the user agent styles.
• The only exception is if the user has identified a style as “important,” in which case that
style will override all competing styles
 CSS Big Concepts… 13

• There are a few big ideas that you need to get your head around to be comfortable
with how Cascading Style Sheets behave.

Specificity
• It is possible for conflicts to arise in which an element is getting style instructions from
more than one rule.
• When two rules in a style sheet conflict, the type of selector is used to determine the
winner. The more specific the selector, the more weight it is given to override
conflicting declarations.
 CSS Big Concepts… 14

• There are a few big ideas that you need to get your head around to be comfortable
with how Cascading Style Sheets behave.

Assigning importance
• If you want a rule not to be overridden by a subsequent conflicting rule, include the
!important indicator just after the property value and before the semicolon for that
rule.
 CSS Big Concepts… 15

• There are a few big ideas that you need to get your head around to be comfortable
with how Cascading Style Sheets behave.

Rule Order
• After all the style sheet sources have been sorted by priority, and after all the linked
and imported style sheets have been shuffled into place, there are likely to be conflicts
in rules with equal weights. When that is the case, the order in which the rules appear
is important. The cascade follows a “last one wins” rule.
 CSS Big Concepts… 16

• There are a few big ideas that you need to get your head around to be comfortable
with how Cascading Style Sheets behave.

The Box Model

• The easiest way to think of the box model is that browsers see every element on the
page (both block and inline) as being contained in a little rectangular box.

• You can apply properties such as borders, margins, padding, and backgrounds to
these boxes, and even reposition them on the page.
 CSS Big Concepts… 17

• There are a few big ideas that you need to get your head around to be comfortable
with how Cascading Style Sheets behave.

Grouped Selector
• If you ever need to apply the same style property to a number of elements, you can
group the selectors into one rule by separating them with commas.
 CSS Units of Measurement 18

• There are 2 types of CSS Units:

1) Absolute Units: Absolute units have predefined meanings or real-world equivalents.
They are always the same size, regardless of the context in which they appear. such
as px, pt, pc, in, mm, and cm.

2) Relative Units: Relative units are based on the size of something else, such as the
default text size or the size of the parent element. Relative units are the way to go for
most web measurements, and there are a few options: rem, em, and vw/vh.
CSS Units of Measurement … 19
 Browsers’ Developer Tools 20

Because of the cascade, a single

page element may have styles
applied from a number of
sources. This can make it tricky
to debug a page when styles
aren’t displaying the way you
think they should. Fortunately,
every major browser comes with
developer tools that can help you
sort things out.
Thank you