Lesson 2 : CCS

Lesson 2 : CCS
VIDEO 1

1.Welcome back. In this lesson,.you're going to learn the basics of a very colorful part of the web.
2. It's called CSS or Cascading Style Sheets.
3.It's how webpages get all their decoration, all the colors,.Fonts and layout that you see on the web are
provided by CSS.
4.Using CSS, you'll be able to greatly improve the look of your HTML pages.
5.That can be anything from changing the color of Your text to completely changing the layout.
6.While you're learning about jazzing up your webpage,you'll also be stretching your knowledge of
computer language syntax.
7.You'll get a better understanding of how computer languages are put together and that will serve you well
throughout your introduction to programming.

VIDEO 2
1.There's something special built right into your web browser that will be an incredibly huge help for
learning more about HTML and CSS.

2.It's called the "Developer tools," and it's something that every web developer spends a lot of time with.

3.When you get started with it,it can seem a little overwhelming but it's also really valuable.

4.Every browser has a developer tools window built in,but it'll look a bit different from one browser to
another.

5.I'm demonstrating this using Google Chrome,but you can use whatever browser you're already using.

6.They have pretty similar abilities,although some of their names for things might be a little bit different.

7.Here, I've got the webpage for the World Wide Web Consortium,and if I right-click or control-click on this
page there's this option inspect,this is one way to get at the developer tools.

8.Well, what are we inspecting?

9.This lets me look at the HTML elements for everything on this page,starting out with what I clicked on.So,
like I said, there's a lot going on here.

10..Each of these tabs lets you peek into a different aspect of what the browser is doing.

11.For now, we'll stick to this elements tab which shows you some HTML elements.

12.This looks a lot like the HTML source code for this page.

13.As I mouse over these HTML elements,it highlights the parts of the page that correspond to them.

14.This element's view and the rendered page over on the left are two different views of the same
underlying data.

15.But since we're doing CSS,.it's this part down here which is actually really interesting.
 Lesson 2 : CCS

16.If I click on one of these elements down,here I can see a bunch of information about the style of that
element. Check it out.

17. It tells you about the background,and the border, and the padding,and the font, and color,a whole bunch
of things that have to do with a style and appearance of the page.

18.There's a pretty useful trick with this style pane over here.

19.Each of these pieces of style information has a little checkbox next to it.

20.Clicking them can turn that style on or off and that means that we can use THIS a tool to find out what
the style settings do by looking at the effects on the rendered page,like check it out.

21. Turning this padding setting on or off changes the padding on the page.

22.This is something we should do a lot when we have a new tool.

23.Find out how we can use it to investigate the world and see what we can discover about what we can
change with it.

VIDEO 3

1.When you load up a webpage, somehow the browser takes a piece of HTML text and it creates the two-
dimensional image that appears in your browser window.

2.But what our HTML and the image on the screen made of? Well, this HTML over here is just a piece of
text.It's made of letters, and numbers,and punctuation marks, and spaces.

3.Some of that text spells out HTML tags,Other texts makes up the content of the page,like the word Apple,
here.

4.But this browser window,that's a visual image,a two-dimensional picture made of pixels on your screen,it
could have text in it,or images, video, or other things.

4.There are things in HTML source code that don't show up on the screen,like the literal text of these tags.

5.There are things that show up on the screen that don't literally appear in the HTML,like the number two,
here.

6.It turns out that this is a little easier to understand if we look at this intermediate step.

7.The browser reads the HTML and it turns it into something here,and then it turns that something into the
view that we see on the screen.

8.When we make a style change to the page,that doesn't change the structure of the HTML source code,but
it does change the appearance.

9.That means the style is getting mixed in with this thing here.

10.This something is a data structure.

 Lesson 2 : CCS

11.It's an organized map of what's going to end up on the page.It's also what developer tools let's us look at.

12.When the browser reads the HTML source,

13.it builds up a map in the computer's memory of what all the elements are that it will need to put on the
screen.

14.This map shows which elements are nested inside which other elements.

15.Doing this step first makes it much more practical to lay out the elements on the screen.

16.It's like making an outline of the page.

17.This kind of structure is called a tree structure,because each element can have branches coming out of it
to other elements.

18.For each element, there will be branches going to that elements that are nested inside of it,like these LI
or list items inside the OL or ordered list,all the way down to the individual pieces of text that occur inside
the list.

19.The particular tree structure that the browser builds out of HTML,is called the DOM or Document Object
Model.

20.The DOM has a tree structure for each HTML element,and for each piece of text, and image,and other
object inside the webpage.

VIDEO 4

1.Tree structures are something that's going to show up a lot in your code.
2.They're really common in computer science and in how programmers talk about the way computer
languages work.
3.So, it's useful to learn a bit about the terminology of tree structures.
4.A tree is made up of parts called the nodes or elements of the tree that have connections between them
called branches.
5.The HTML elements that you've seen are an example of this,

6.but here's a different example. It's a tree that I made to list some things that are in my apartment.

7.The nodes are the words in boxes.The branches are the arrows.This is saying that in my apartment,there's
a kitchen, and a bathroom,
and a bedroom, and in each of those rooms,there are some pieces of furniture.

8.Like a refrigerator in the kitchen and a bed in the bedroom.In the refrigerator, there's a cucumber and
some yogurt and in the bed, there are pillows.

9.Nodes of a tree have relationships between them.

10.Here, I'm drawing those with arrows and they mean this is inside that.Like the pillows are in the bed
which is in the bedroom, which is in my apartment.

11.A tree always has a root,which is the top or start of the tree.
 Lesson 2 : CCS

12.In the case of an HTML document,the HTML element is the root of the tree.

13.The nodes that descend from any particular node are called its children. So, the HTML element has the
head and the body as its children.

14.The head node has the title as a child and the body has a P element and so on.

15.We can also flip that around and say that this P element has a parent node which is body,and this would
still be the case if we had several paragraphs in this document.

16.Each of those is a separate P node and they all have the body as their parent.

17.But a tree isn't a kind of diagram with boxes and arrows.

18.It doesn't have to be written with the root at the top.It doesn't have to be written at all.

19.A tree is a data structure. It's the way that information can be organized.

20. How we write or draw that data structure is kind of secondary.

21.Anytime you've ever written an outline,like for a paper in school,or made a presentation using bullet
points inside slides,

or classified things into categories that have subcategories,you were using a tree structure even if you didn't
know it.

22.Of course, every time you've written html,you're writing a tree structure too.

23.So, there are a few rules that are always true for tree structures.

First, a tree structure from one node that is the root.

Second, each node including the root,can have references or branches that point to other nodes.Those
other nodes are that node's children.

Third, each node has exactly one parent except for the root node which has no parent.

24.Though each node can have any number of branches going out,it only has one branch coming in.

25. A new branch can never point to a node that's already in the tree.

26.Another way of saying this is that each node other than the root,has only one parent,and that's just
about all the rules there are for trees.
As you go on in computing,you'll find there are tree structures everywhere.

27.The DOM or document object model,the tree structure of HTML is just one of them.

28.This is what you're actually looking at when you look in the elements tab on developer tools.

29.Not the original HTML source code,.but a version that's been reconstituted from the DOM tree.

30. That's why it looks different from the original.

 Lesson 2 : CCS

VIDEO 5

1.So, you've seen now how the browser turns HTML text into the tree structure of the DOM.

2Let's take a look at how it can turn that tree structure into a picture that we can see on the screen.

3.I'm going to load up one of our sample HTML pages,and check it out using developer tools to see what I
can find.

4.I have a sense of how the HTML of the page has a tree structure,but how does that relate to what is on the
page?

5.So, it looks like this OL element gets rendered as a large box,and each of these LI elements shows up as a
smaller box inside it.

6.The large box fills up the whole width of the page,while the smaller ones,each look like they take up about
a fifth of the page.

7.Over here, in the Style pane of the developer tools,we can see this same sort of box diagram.

8.Here, it's got some parts labeled margin,and border, and padding.

9.This margin here might have something to do with the CSS code here that says, margin 20px.

10.So, we saw earlier that the browser reads the text of the HTML document,and turns it into a tree
structure.

11.We had the question of how it gets from there into the two dimensional layout of a web page on the
screen.

12.Well, these boxes are pretty much the answer to that.Every element that appears on the page gets laid
out into a box,and these boxes land inside of other boxes.

13.The layout of these boxes, well,it's controlled by the tree structure with a little help from the CSS.

14.So, for instance, the HTML code for this list will always get translated into the same tree structure,and
that tree structure will always be turned into boxes.One big box containing three smaller boxes.

15.But then, whether those boxes get laid out like this, vertically,or like this, horizontally,and pink, is
something that you can control with the CSS.

VIDEO 6

1.One way that we can apply style to a webpage is to visit each node of the tree and add the style we want.

2.There's a style attribute that we can put on html opening tags to do just that.

3.For instance, if we'd like to turn all of these list items green, we could do that.

4.We can add the style attribute,style equals color, colon,green, to each of the li elements.
 Lesson 2 : CCS

5.The problem with doing it this way is that it's incredibly repetitious.

6.Also, if we mess up in one place,it'll be hard to catch.

7.Generally in computing, if it's possible to avoid repeating yourself it's nice to do so,not only does it save on
typing but it also makes for fewer places things can go wrong.

8.So, what CSS lets us do is to pull all of the style information out,and say we want to apply this style to
every li in the document instead of just one at a time.

9.One way we can do that is by putting a CSS rule set into the document's head element by creating a special
element called style.

10.The style information that we put here will be applied throughout the document.

11.As the browser builds up the picture on screen from the dom tree,it'll use these style rules to
color,shape, and layout the page.

VIDEO 7

1. A CSS rule-set is made up of two parts, a selector and a declaration block.

2.The selector is the part that says which html element or elements the rule is going to work on.

3.The declaration block says how the rule will modify those elements.

4.Here's that example from before,a rule-set that turns all of the list items green.

5.The selector here is li,and there's one entry in the declaration block; color, colon, green.

6.CSS rules are always written like this,the selector comes first,and then there are these curly braces around
the declaration block.

7.Here are a couple of examples.

In this example here, the selector is p. This means that it will apply to all paragraph elements in the
document.

In this second one, the selector is.weird.This means that it will apply to any element with the class attribute
equal to weird.

8.We'll see more about the class attribute just ahead.The part inside the curly braces is called the
declaration block,and it consists of one or more declarations, also called rules.

9.Each declaration tells the browser to make one specific change to the style of the selected elements.

10.Like, here's a declaration, width: 50%.This block has two declarations in it; color, colon,purple, and font
dash size colon larger.

11. You've probably noticed by now that each of these entries has a descriptive name,like width, or color, or
font size.
 Lesson 2 : CCS

12. That's called the property that the rule is affecting.Then it has a colon,and then, the value that's giving
that property.

13.Then at the end of the rule there is always a semicolon.

14. For instance, in this rule here,color is the property,and purple is the value that's being given to that
property.
So, the rule ends up being color, colon, purple, semicolon.

15.So, the syntax of CSS doesn't look anything like the syntax of html itself.

But, that makes sense because they're really trying to accomplish different things.

16.A piece of html describes a tree structure made out of elements.

17.A CSS declaration says,here's a particular kind of element,and here's some styles to apply to it.

VIDEO 8

1.So, a CSS selector tells the browser which elements the rule will affect.

2.There are a few different kinds of selectors that you can use.

3.Actually, there are a whole lot of them,but we're just going to look at a few of them for now.

4.The simplest one is a type selector,it's just the name of one type of HTML element such as p or em.

5.It can even be body,which would make the rule apply to the whole body of the HTML document.

6.For an example, here's a rule-set that will change the font for the entire document.

7.Type selectors are particularly useful when you want to apply a style really widely across the web page.

For instance, if you're writing an article that uses a lot of section headings with the headline elements h1 h2
and so on, a single CSS selector will apply to all of the elements of a particular type, but you still have to
write one CSS rule for each headline element type.

8.This one targets every h1 element on the page and applies these styles.

9.This one targets every h2 element and applies these styles and so on.

VIDEO 9

1. You don't always want to style all elements of the same type in exactly the same way though.
For instance, if your document is an article with a sidebar,you might want to apply a different style to
paragraph elements in the article versus in the sidebar.

2. One way you can do this is by putting a special attribute on the HTML tags, the class attribute.
 Lesson 2 : CCS

3. In computer languages, class is a really common word for a group of things with the same characteristics.

4. As you go on in computing, you'll see lots of other examples of classes in different languages.

5. But for now here, a class in html is just a special attribute that we can use to say that,for instance, some
paragraphs need to have different style than other paragraphs.

6. So, how do you create a class?

All you have to do is make up a name for that class and start using it.You add the class attribute to some
html elements and create a CSS rule set with the same name, and the way you apply a CSS rule set to a class
is to write a selector that starts with the dot.

7. Classes are what you should use when there can be several elements on the page that you want to apply
a rule to.
8. If you know there will be only one element to apply it to, you can make this clearer by using the id
attribute instead of class.

9. The difference between id and class is that id is meant to be unique..There can only be one element with
a particular id on the page.

11.In contrast, there can be any number of elements with the same class.Id values come from the same
place that class values do, you just make them up.

12.But to apply a style to elements by id instead of a dot in the selector, you put a hash mark,or a number
sign, or one of these things anyway.

VIDEO 10

1.CSS also lets you combine selectors.

For instance, you might want to say ''Make emphasized text red,but only if it's part of a list item.''
● 1.Here's how you would do that,in the selector part of the rule, you write the selector for the parent
element Li, and then for the child element em.
● 2.Together, this selector means 'Select every em element that's a child of an Li element.
● 3.With that style applied,this html will look like this.The em element in the list item, turns red, but the
other em doesn't, because it's not part of an Li.

This kind of selector that uses a space to create a combined selector, Li space em, is called the descendant
selector.

4.There are actually a whole bunch of other kinds of selectors in CSS.I'm going to suggest you take a look at
the Mozilla CSS documentation for selectors if you'd like to see more of them though.

VIDEO 11

1.Okay. So, you've seen a bunch of things that you can do with CSS,

2.but here's a question we haven't answered yet,what's so cascading about cascading style sheets?
Well, cascading has to do with how each node in the dom tree gets its styles defined.
 Lesson 2 : CCS

3.Basically, any style property defined on a node will apply as a default to all that nodes descendants.

4.Let's say that we have a document whose body looks like this,and we have CSS rules like this.

5.What we want to know is what color will each of these text nodes become when it's displayed in the
browser.

6.To find out, we'll walk through the dom tree visiting each node starting at the top.

7.If there's a CSS rule for that node, we'll apply that style to it,but each node will also inherit style from its
parent node.

8.We start with the body node.There's a rule for that.

This rule says to make this white text on a black background.

Then we'll go down the left branch to h1,we don't have a rule for h1 so it gets the same style as its parent.

Then we go to the text node "All about."That gets the same style as its parent the h1.

Over to the em node here,we have two different rules that might give this node its color.

9. We've got a rule for EM and another rule for h1 em.

10.In this case, the most specific selector applies.

11. Here, that's the h1 em rule.So this gets to be orange not red,but the h1 em rule doesn't define the
background color,so, that'll be inherited from above.

12.This text node that says CSS,that'll also inherit the orange on black style from its parent.

13. Over to the right side of the tree, the p node matches the CSS rule for p, so, it gets pink,p for pink
paragraph.

14. Still inheriting the black background from the body though, and those will cascade down to this text
node but over here, we've got an em node that will be painted red, and that'll cascade down to the text
node below. Awesome.

15.So, that's what so cascading about cascading style sheets.

16.Each style property that's defined on a node will cascade or spill down the tree to that node's children
and descendants.

17.The black background color in this example cascaded to every node on the tree, but each of these text
colors only cascaded within a particular sub-tree.