Lecture 4

Agenda Fr CSS
• Tree structures. It's not immediately obvious, but the HTML code for your web page
has a branching hierarchy or tree structure. Understanding this structure will help you
apply style to your page more effectively and efficiently.
• Using CSS and HTML together. HTML and CSS are different languages, but we'll learn
how to use them together. We'll actually learn three different ways to integrate CSS
with the HTML of your web page.
• But also separating them. Although they work closely together, we'll also learn how to
separate our CSS, which defines the style of the page, from the HTML, which defines
the structure. This separation of concerns will make our web development far more
efficient.
• A whole lot of style properties. We'll learn how improve the look of our HTML pages
with CSS style properties—from changing the color of your text to completely
changing the layout.
 A language for describing the
Cascading visual appearance of

Style Sheets
(CSS) language.
web pages, including
properties such as their layout,
colors, and fonts.
Developer Tools

• https://en.wikipedia.org/wiki/CSS
Text to Trees
• It's not a diagram it's a data
structure a way that
information can be organized
Styling HTML Directly
Why?
What's better?
Practice two ways
Text Align
Practice: Multiple Styles
 Practice

• Paragraph in different way style

• 1-color
• 2-text-align
• 3-It looks like they are trying to do something like this:
CSS ruleset
• A CSS ruleset is made up of a selector and a declaration block
• Selectors
• Selectors indicate which HTML elements the ruleset will apply to. For
example, consider this ruleset:
• Declaration Blocks
• A declaration block describes how the ruleset will modify the
elements. In the above example, the declaration block is saying that
all li elements will be modified by changing their font colors to
green.
CSS Syntax
Selectors: Type