Up next in 10
CSS Tutorial For Beginners 04 - Basic CSS Syntax
8K views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers are introduced to the basic syntax of Cascading Style Sheets (CSS), a fundamental aspect of web development. The video likely covers the structure of CSS rules, including selectors, properties, and values. Viewers can expect to learn how to target HTML elements using different types of selectors and apply styles to them using CSS properties and values. This tutorial serves as an essential starting point for beginners looking to understand the foundational building blocks of CSS and how to apply them to style their web pages effectively.
View Video Transcript
0:00
Yo ninjas, what the hell is up
0:09
My name's Sean from the Nerd Ninja and this is CSS for Beginners Lesson 4, CSS Syntax
0:17
So CSS is just a collection of rules, that's all it is
0:20
Really simple, just a collection of rules. And each of these rules can target a specific tag or element in your HTML document
0:28
And then when we've targeted that tag, we can give it visual properties so that it looks
0:32
how you want it to in the browser. So for example, we could have a rule which targets all p tags, that's all paragraph tags
0:38
on a page. And we could say, look, we want all p tags to be given a font size of 12 pixels
0:44
So that's how the text is going to look on your webpage. Or we could have a rule which targets all tags within a specific ID and we say we want
0:51
this positioned in a certain way on the page, or this to be a different background colour
0:58
Or we could have a rule which targets all a tags, that's all links in the nav ID and
1:02
we want to give all these a tags a colour of blue and we want them all to be underlined
1:06
so that everyone knows they are links. So that's what we can do with CSS rules, we can target content and then apply visual properties
1:15
to them. Now we know that CSS is a collection of rules and each one of these rules has two parts
1:23
to it. The first one on the left here is the selector and the one on the right is the declaration
1:29
Now the selector kind of speaks for itself, this is what we use to select the tag or the
1:33
element that we want to apply changes to. In this example I've gone for the ID of page header
1:40
Now that hash sign or that pound sign, whatever you want to call it, at the start of page
1:44
header signifies that this is an ID. And we'll get more in depth about this later on
1:50
Just for now, realise that the thing on the left is the selector. That's what we use to select the element that we want to style
1:58
And on the right is the declaration, this is where we apply visual properties to it
2:02
In this case I've said I want the font size to be 10 pixels. So everything within the page header div is going to have a font size of 10 pixels
2:13
Now selectors can target a multitude of things, tag names, IDs, classes and many other things
2:19
I don't want to get too bogged down by that now because we're going to go into that in
2:22
more depth later on in different videos. For now we just want you to understand the basic syntax of how we format rules
2:30
So the selector is on the left. I've given just a few examples here to get you into the swing of things
2:35
So we'll go through these. The first one is the header ID and then the P. So I'm saying here I want all P tags within
2:41
the header ID and then we're going to style those in this declaration
2:46
The second example I've got a period or a full stop depending on where you're from in
2:49
the world and then comment. And that says I want the comment classes
2:54
A period or full stop signifies in CSS a class and then within those classes I want to grab
3:00
all the div elements and I'm going to style those in a particular way in the CSS in the declaration
3:05
And the final one is the LI tag and I'm saying here that I want all LI tags in the HTML document
3:11
to be styled this way in the declaration. Now the declarations contains properties and values
3:20
So we've got our selector on the left and the declaration on the right with all the properties and value pairs
3:25
And every declaration always starts with an opening curly brace and always ends with a
3:29
closing curly brace. And between those we've got the values and the properties
3:33
Now the property is always on the left side in this first example. That's the font size
3:38
It ends with a colon and then the value is always on the right hand side
3:42
That's 10 pixels in this case and it ends with a semicolon. Okay that's really important
3:46
You always put your colon at the end of the property name and the semicolon at the end
3:50
of the value name. And again there's loads of values and loads of property names
3:54
Don't get bogged down about that now. We're going to go into those later on
3:58
Just understand now that the declaration is on the right. It's contained within these curly braces and you've got your properties and your values
4:05
In the bottom example I've got two properties and two values and they're stacked one on
4:08
top of the other. Now you don't have to stack them like this. You can have them side by side if you wish
4:13
So have it however you want. I prefer it this way because I can see each property and each value really clearly on
4:19
each line. Okay so your preference. I prefer this way. Now the first example, sorry the first property is font size
4:28
Same as the first example and the second property is the color and I'm saying I want this text
4:32
to be color red. Okay. So what we're going to do now that we've got this basic understanding of how a rule is
4:38
formed is we're going to look at a simple HTML document and we're going to apply a few
4:42
different CSS rules to that document. Alright here I am inside brackets and I've got a simple HTML document here
4:51
By the way brackets is a completely free awesome text editor. You can get it from brackets.io so I suggest you do that right now and then join me back
5:00
here where we're going to apply some styles to this document. Alright so I've already created this HTML document called index.html and I've created
5:10
a little folder here called CSS and within that folder a file called syntax.css
5:16
And all CSS files are given this .css thing at the end
5:20
That's what signifies that it's a CSS file. Alright and remember you can create new files and new folders in brackets by right clicking
5:27
this pane here and then go to new file or new folder. So that's what I've done
5:31
And before I start I'm going to go to view here and then go to vertical split and that's
5:36
going to let me see the HTML on the left and the syntax.css on the right
5:41
I just need to open this up, put it to the right and then we'll put the index to the
5:45
left and we've got both files here now. So what I'm going to do is just about three or four different rules here
5:53
And the first one I want to do is kind of select this header ID, this div here and we're
5:58
going to style that. Okay so remember all IDs are targeted by using the hash prefix
6:07
So we've got hash and then the ID name which is header and then the declaration starts
6:12
with the opening curly braces and ends with the closing curly braces. And then we'll do our first property which is going to be position absolute and don't
6:21
pay too much attention to which properties I'm using here, we're going to cover these later like I said before
6:26
Then the next one is top zero so it's going to be right at the top and left zero so it's
6:31
flush to the left. The next thing we want to do is target this H1 so I'm going to say header because it's
6:37
within the header ID div and then H1. So that targets the H1 within the header and I'm going to give this a font size of 32 pixels
6:49
Make it nice and big. And the final thing I want to do is target all the P tags
6:53
Now there's two in this document, there's one here within the header and there's one outside of the header within the body tag
6:59
Now if I was to do this again, header P, then this would only target this P tag here
7:05
I don't want to do that. I want to target this P tag as well on all the P tags
7:09
So I'm going to take off this header here and when it's just P, prefix with nothing
7:14
it's saying to the CSS file go in the HTML and find every P tag in that document and
7:19
I want to style every P tag. And we're going to give this a font size of 12 pixels
7:28
So that's about it for this video. I hope you've got a better understanding of how CSS rules are now formed
7:34
Selector on the left, declaration on the right. If you have any questions whatsoever, don't forget to comment below
7:40
Subscribe if you like these videos and I'll see you guys in the next movie