- [Instructor] If an element has inline styles
meaning there are CSS declarations in the element itself
that inline CSS is stored
in the style property of the elements,
and we can access it as a regular property
in the exercise files for this movie
I've added an inline style to the site title.
You see it here.
We have a div class site title style, color black.
I can now lift out that style information
using the style property on that element.
Now, what I get in return here is a CSS style declaration
which is a list of
all the available possible style properties
that could be applied.
And then a specification of which ones are actually applied.
So here you can see color property applied.
And if I scroll way down on this list here let's see
all the way down here.
You see color is at the black.
So this is not the most useful list possible
but it does indicate what we can use this for.
Because what you're seeing here is
the CSS style declaration object
contains every possible property.
That means I can call up any of these properties
specifically because it is just a property of an object
and then set that property directly.
So right now, when I called for a style dot color
using dot notation I get the result black.
If I, again called style dot color
and set it to something else like Rebecca Purple
watch what happens.
The color now changes to purple
because we're just setting the property.
And what also happened is inside a style declaration here
in the element, the color declaration changed
this year, targeting the individual style properties
is the recommended way of handling inline styles
because it allows us to modify
just that property and nothing else.
I say this because you can technically assign a new value
to the style property directly
if I go and request just a style property again
and we take another look at this CSS style declaration
you'll notice way down here there is.
Let's see here there's a property called CSS text,
and this is the actual text
that sits inside the style property.
So if I now to find a different style, in addition
you'll see it gets upended here.
So if we collapse this, let's see here
and then clean this up and then say,
we want to set style background color equal pink
and hit return.
Now we have two style declarations both color
and background color.
And if I then go and call in just style again
and scroll way down here we have CSS text
and it literally spells out
what is in the text of the style property up here.
So technically if I have one too,
I can also just set this property CSS text
and put in all the style declarations in one go.
But like I said, the recommended approach here
is to set each individual CSS property individually,
because then you have one way control.
One more note here.
If you look closely at the CSS properties listed
in this CSS style declaration property,
you'll notice that there are no hyphens.
I remember way back when we talked about property names
and I said, you can't have hyphens.
It applies here.
So instead of hyphens, all the CSS properties have
been camel cased.
So background color is not background dash color instead
it's background and then a capitalized C color.
And you can see here the list
of all the available properties and what they are.
So if you want to set a CSS property
and you wonder what is the correct property name,
all you have to do
is go through the elements in question
and just call
the style property.
You get the full CSS style declaration list,
and then you can scroll down
and find the property name you're looking for
and use that to target that particular property.