Welcome back, everyone, to this lecture, we're going to discuss just basic styling of CSIS.
How do we actually style something any CSI sheet and then connect it to our HTML?
Let's head to our code editor.
All right.
Here I am inside our Visual Studio code editor.
I'm going to create the documents.
So remember, I mentioned that the head of this HTML documentation code.
This is actually going to be where we can add in media information, and it's where we can link files
outside of HTML to connect to the HTML document.
And then we have the body of the document.
Inside the body is where we actually type in the code or elements that will appear on the web page.
For example, I can say heading one and say heading here.
OK, so what I'm going to do is actually view this in our little live preview.
Open that up and I can see heading here.
Now what I'm also going to do is show you how we could style something inside of the temple, but then
show you how to connect X-File to it.
So we already know that if I wanted to change the color of heading here, I would come to this one element
and say style.
And what's excellent, grab the one there.
I would say style and then I would say is equal to.
And then in quotes, we'd have color noticed that code editor actually, or Visual Studio helps us with
different types of style attributes, let's start with color, have color in them and then we could
say color colon.
And then we have a bunch of options here.
So not every single color word is actually built into CSI, but many of the common ones are.
You can see Visual Studio Code has a lot of really helpful tools.
So I'm going to say, let's just say blue.
OK, so that was able to change heading here into blue text.
Now let's say I have another heading one and I say.
Heading to notice this is not blue.
If I wanted to make it blue just within the HTML, I would have to again grab this style and then put
it in the H1 tag.
Clearly, this is not going to be scalable if I have to do this over and over again.
So what I'm going to do is I'm going to create a new file with eight CSS, so we're going to create
a new file here, and I'm going to call it Master CC.
You can technically call the file whatever you want.
I'm calling it master just to indicate that it's the master file for all the HTML on this website.
So say Master CSS and then what I'm going to do here is type in very similar code to what I have here
in heading one.
So I'm going to delete this.
And notice now we don't have any styling, and then I'm going to go into the CSIS file and show you
how to connect the element to a style, then add properties.
So the format for this is you choose your selected element tag.
So, for example, each one.
And then after you choose your selected element tag, you have open and close curly braces.
And then here is where you can begin to list the property and the value assigned to it.
So I would say something like a property like color.
Again, notice visual studio code really helps us out here.
If the variety of properties that have color in them, then you say colon and then an appropriate value.
For example, blue is an OK value here.
Notice I don't need to use quotes anymore inside of the CSV file and then I can use a semicolon essentially
to indicate that it's done for this line.
So I've assigned each one and color should be blue.
Now know that this is going to apply a selection for all the H1 in the HTML.
However, you notice nothing's changed so far because I haven't connected this HTML file.
I haven't linked to the CSS yet.
So how do I do that?
Well, I come back to the HTML and then inside the head of the documents is, where are you going to
create a link tag?
So we're going to say Link.
And note that the relationship by default is going to be stylesheet and we're actually going to keep
it that way.
This just tells the HTML, by the way, what I'm linking you to is going to be a style sheet.
So you should be inheriting style properties from it.
And then the ref is just the reference location of where the style sheet is right now since they're
in the same folder.
I can just type out master the CSS and note that once you actually have this link, suddenly the HTML
is going to be able to apply that styling.
So again, let's kind of do an overview of what we have here in the CSS.
I select some sort of element tag like each one.
Then I have curly braces and here I can begin to list the property I'm interested in.
And then the value I want to assign that property.
Now you may have noticed that I have this little square box.
Again, that's blue.
If you just hover over it, you don't need to click.
You just hover.
Then you'll actually get this red green blue ed, which allows you to manually kind of visually explore.
It also has this transparency.
This is known as alpha.
So how transparent do you actually want this to be?
If you're just putting this on a white background, maybe doesn't make too much sense, but if you have
elements on top of each other, maybe you want some transparency here.
So all the way up to the top, that's fully opaque all the way at the bottom, that's completely transparent
and will disappear.
So just keep that in mind, and then you can also have this little color bar so you can put in your
own custom codes transparency.
So essentially your red, green, blue and alpha levels and kind of messing around with this so you
can get any custom color you want.
OK.
So that's how coloring works.
Again, you select the color property.
You can use an RGV code if you want.
You can also just use a built in color code.
The really common color.
So therefore you like red.
You can also you notice that red has its own hex code, so you can add that in as well if you want it
to.
So maybe you're familiar with picking color codes that way you can use that as well.
You can just say color or something like hashtag FSF and then zero zero zero zero zero, I believe,
is a.
There we go.
That was red.
OK, four zeros.
So you get the idea there's many different ways to define color, but you can also do is if you Google
Hex color picker, that will also allow you to pick colors.
So if you just bring in to Google something that says Hex Color Picker, Google also has the ability
to kind of show you the same thing pick a color, and it shows you the rugby codes, see him white codes
and then tax code here.
So lots of different options on how to pick colors.
It's really up to you.
Now, the other question you may have is what if I have different elements on the page that I still
want to actually color?
So, for example, let's change heading two into an actual heading to elements you notice.
Now it's both a little smaller, but it's also no longer the same color.
So if I wanted to edit the color for heading two, I would just come back to my CC.
Call heading to tag.
And then what I'm going to do.
Curly braces.
And then choose the property I want to edit like color and then change it into some other color like
Brown.
You can see here.
In fact, let's make it really obvious by choosing something like blue.
OK.
And so then we have blue.
If I want to edit multiple properties, I simply say semicolon and then choose another property, another
property that I can edit is the actual background, the background color, so you can set the background
color of an element.
So I can say background color.
I can choose something like, let's make it really obvious, like this lime green or chartreuse.
You can see here now edited the background color, and I'm just using semicolons to separate out.
OK, here's this value or property combination.
Here's this property, and here's that value for it and so on and so on.
So that's it for this lecture.
Again, the very basic idea is you have your HTML, you have elements within the HTML.
You're going to be able to link your HTML to have a stylesheet relationship to another file somewhere
in your computer.
Like that CSS?
If this is located somewhere else, you could use something like C.
Cetera.
Users provide the full file path, but it's usually just better to have them in the same location.
And then you come to see us, you choose the tag or element.
You want to change curly braces and then start listing the properties.
So as we continue, we're going to discover more and more properties that are common to edit.
But if you want to explore just different properties, you can do a Google search for CSS style properties,
and that will essentially give you a full reference so that W3 school is actually pretty good.
You can just Google search again if I go back here, CSS style properties, and then click here for
a full reference on all the different stylings.
So this is why we're not going to go through every single one of these in this course, because that
would just take forever.
But you get the idea that you can begin to search for things like How do I edit this actual style property?
And then you have the references.
There's also one of the development docs here on Mozilla, and then there's CSS properties here.
So if you want it to, for example, change the font size, you would just click here, check out font
size and check out the properties how they work, which we actually will cover later on in the section.
All right.
That's it for this lecture.
I'll see it the next one.