Welcome back.
So this video is going to be a high level overview of how the assess works and what it does.
So we want to actually be writing any code until the next lesson and pretty much every lesson from there
on out covering SEUS us.
But what we are going to do is three important things we're going to define success and talk about the
role that it plays why you use it what it does.
We're going to view some websites that have the.
We're going to take the C S C S away and see how they change.
And then we're going to define this general rule that will follow for every CSSA line that we write
.
So let's go ahead and talk about what's the stance for cascading style sheets.
So the cascading part we're actually going to come back to in a later video.
But the style sheets is pretty self-explanatory.
Remember that C Ss is often considered the adjectives or the skin where H M L would be the nouns.
So Jim Ellis the structure we want in heading here and a bullet point here.
We used to say make the headings purple and font size 50 pixels and move this down to the bottom and
give it a border.
So we use it to describe how things should look so style sheets.
The other part is the sheets part of it and what that means is that we're going to be writing these
separately from each team.
They are not inside HMO.
They are separate documents that we then include in our HMO.
So let's start by taking a look at some examples.
There's a site that I really really like called CSX Zen garden
and the whole point of this site is to show you the variety of things you can accomplish with Jesse
s s.
So if you take a look here we have some markup.
Let's look at the HDMI file.
We can go ahead and open that up.
So this is the core file that every single page NCEA says.
Zen garden uses.
So you can see it's pretty basic.
We've got some headings.
We've got some paragraphs some links some bullet points at the bottom and then the whole idea of this
site is that contributors take this to email and write their own CSSA without changing the aged him
out at all.
So you only change to see assess the structure is the same and you end up with different results.
So here's one.
And on the right side you can check out a few others and there's there's a bunch of them on the site
and actually you can contribute your own if you want it to.
Well let's take a look.
So this one is radically different total different lay out different color schemes fonts images.
This one is also very different.
It has this nice loading animation all done Roscius us.
You can scroll down and we have this effect where our content scrolls but the background image is static
.
We have this one which is radically different as well.
And we could spend all day on here and we just find one more which is my favorite which is a robot named
Jimmy.
We get this little robot that pops up in this spinning a starburst in the back.
Also another scrolling effect so I'm showing this to you so that you can see how powerful CSSA is.
It basically is the skin doctor.
The additives for your structure it can change.
You know aside from looking like this and it can change it to look like this.
So hopefully that's enough to get you excited about learning C S s r h d m l side so far have been pretty
bland.
We haven't had any style besides the default black and white styles.
So next up I want to talk about a general rule that every line of CSSA that we've write will follow
.
So this pattern here it looks like this.
We select something.
So we're going to talk a lot about what actually goes there but we'll select something like All h ones
or every anchor tag inside of an ally.
So we do something where we're selecting h tim l elements are referencing existing h t m l and then
inside the curly braces we apply some styles and they follow this key value pair format where we have
a property colon and then a corresponding value and then a semi-colon.
So we can have one thing in here we can have 100 different properties that we're changing but they always
follow this syntax property Colan value.
So here's two examples.
This first section is going to select all h ones.
So again we're going to come back to you how these selectors work.
But it's going to select all each ones on a page and then it's going to give them color of purple and
font size of 56 and then this next one down here is going to select all image tags and give them border
color red and border with of three pixels.
So you know we're not always going to select all the ones in all image tags.
We're going to have multiple videos on actually the nuances of selecting things sometimes we want to
select tons of things sometimes we're doing one small element at a time.
So there's a lot of options there but it always follows this format.
We select something curly braces and then inside the curly braces we have key value pairs that are actually
just properties that we're changing