In this chapter, my goal is to introduce you to CSS, and
some of its basic concepts.
CSS is a huge topic, so there's no way that I
can teach you cascading style sheets in a single chapter.
I mean, we have dozens of courses on it.
However, I do want to go through the basics of it.
Basic syntax, how it's applied, those sorts of things.
So I want to start in this exercise by talking about Inline styles.
How they're written and then when they're appropriate to use.
So I'll be working in inline.htm which is found in the 07_02 directory.
As you can see, this is a very simple file.
We only have two elements on the page.
We have a heading one and we have a heading two.
And you can see the heading too is telling us to do something.
It's saying style me using the style attribute.
Okay, so inline styles are styles that are written directly inline in your HTML.
And they're applied usually to a single element.
So in this case, for the H2.
If I open it up and
apply a style attribute, I can now write any CSS formatting that I want.
So this is using HTML syntax, meaning its an attribute of an HTML element,
but now I'm going to pass in CSS properties and values.
So you still have to sort of understand CSS in order to write inline styles.
You have to know which properties and
which values can be applied to different elements.
In this case, I'm going to change the color of the H2.
So in between the quotation marks, I'm going to type in color and
we don't use equals when we're assigning values in CSS.
We use a colon.
So color colon, and then red.
And then, immediately after a property, we type in a semicolon to let the browser or
user-agent know that that property is now over.
So our syntax is,
property on the left hand side, a colon to indicate that we're assigning a value.
The value that we want to pass, in this case, red.
And then a semicolon to let it know that this particular line is over, right?
So if I save this and then preview that in my browser,
you can see that that heading two now comes up as red.
Now if we want,
we can pass as many properties as we'd like within this style attribute.
So after the semicolon,
if I wanted to do something else, like perhaps I didn't want this to be bold.
I could type in a font-weight and
then assign that as normal and then a semi colon.
And if I say this and go back in the browser, I can see that now
that heading is no longer bold, So that was actually fairly quick and easy, right?
So when people first see inline styles they're like well that's pretty easy
to do.
And it's immediate, it happens right away and
I can apply it directly to the element they want.
But there's a bigger problem with this.
Imagine you have a site that has say, oh I don't know couple of dozen pages.
And you wanted every h2 to look like this.
You imagined the amount you're going to need to do within your files.
You going to have to go into every page.
Find every h2 and write this attribute for it.
And then you're going to have to maintain that.
Imagine if somebody comes into your office one day and
says, hey those heading twos look great but I'd like them in green.
Now you're going to have to go through and edit all of those hundreds of rules.
So inline styles are not a very efficient way of applying styling.
And in fact, their usage is so frowned upon that at one point,
the style attribute was almost removed from the specification.
So why do we have it?
Well it is very useful in certain instances.
For example if you're going to do an HTML email, inline styles are one of
the only ways that you can apply styling for certain email clients.
So they're used widely.
When writing html emails.
The other thing that there used a good bid in is scripting.
Let's say your going to build a widget dynamically.
A lot of people will in their job script write inline styles that go in to
style their specific elements.
Since it's being built through scripting, it's a little bit easier to maintain.
So you probably won't often find yourself needing to use inline styles.
In fact, unless there's a really good reason for
you to use them, I would advise against them.
However, since there are cases where they're appropriate.
I think it's important that you understand the syntax behind inline styles, and
when they're appropriate to use.