Locked lesson.
About this lesson
Understanding the basic CSS syntax.
Quick reference
CSS Syntax
CSS Syntax is made up of selectors and declarations.
When to use
Any time you write CSS code, you're write a selector followed by a declaration.
Instructions
Create a new syles.css file to write all of your CSS.
CSS syntax is pretty straight forward. It's made up of a selector, followed by a declaration (curly braces). The selector says what the thing is and the declaration says what you want to do with it.
All of your CSS will go inside of your curly braces or the declaration.
Inside the declaration we have a property and a value. Properties end in colons, values end in semi-colons.
You can have as many sets of property and values inside your declaration as you like.
Hints & tips
- CSS Syntax is made up of selectors and declarations
- Declarations are made up of properties and values
- Properties end in colons
- Values end in semi-colons
- Best practice is to put each property / value on its own line
- Adding comments in the CSS is beneficial expecially in longer CSS files
- 00:05 Okay in this video, I wanna talk about CSS syntax, what makes up a CSS tag,
- 00:10 what goes into it, what's the different terminology.
- 00:13 What are the things called, all that good stuff.
- 00:15 So we're back in our Cloud9 development environment and I'm gonna come over here
- 00:20 and I'm gonna double or I'm gonna right click on this hello world file and
- 00:24 I'm just delete it cuz we won't be using that okay.
- 00:26 Then I'm going to right click on this folder, and
- 00:29 I'm going to create a New File.
- 00:30 Let's call this style.css.
- 00:32 And all CSS files end in .css.
- 00:36 So if we open this we just have a blank file,
- 00:39 and here we can write all of our CSS.
- 00:41 So what does CSS look like?
- 00:43 Well the basic syntax of CSS, you have something called a selector and
- 00:47 then a declaration.
- 00:48 And the selector says what the thing is and
- 00:51 the declaration tells us what you want to do with it.
- 00:54 So let's just write some here.
- 00:56 We'll do the p.
- 00:59 Now all CSS tags start, this is the selector p.
- 01:04 And then we have these curly braces, an open and a closed curly brace and
- 01:09 all of your CSS will go inside of these curly braces.
- 01:12 Inside of here, this is the declaration this thing or this is our declaration.
- 01:20 And inside of it we have a property and a value, always.
- 01:24 And a property is for instance, let's say, color.
- 01:30 And then the value is let's say, red.
- 01:32 And then it ends in a semicolon.
- 01:35 So, this is the main syntax of CSS.
- 01:37 You have your selector, your declaration.
- 01:40 Inside you have a property and a value.
- 01:42 And we're gonna learn what all the different properties and
- 01:45 values you can have are but it's always gonna be this format.
- 01:49 The property on the left and that colon and then the value on the right,
- 01:54 ending in a semicolon, and every line of CSS ends in a semicolon.
- 01:57 So, you're gonna see stuff like for
- 02:00 instance, you can put more then one thing inside your declaration.
- 02:03 So for instance we might put text-align and you can
- 02:07 see as I'm typing this our development environment is guessing what we want.
- 02:12 So it's helpful to us that way.
- 02:13 And let's say, I wanna make this centered just like that.
- 02:17 Inside this declaration you can have as many lines of properties and
- 02:22 values as you want.
- 02:23 And the convention is to just put each one on its own line, right?
- 02:27 You don't have to though.
- 02:30 You can write this whole thing, Just like this,
- 02:35 and you can just in a straight line, go all the way across.
- 02:38 The problem with that is it becomes very hard to read
- 02:42 after you add a few of these on there.
- 02:44 So best practice is always is to just do it like this.
- 02:48 And so whenever I create CSS.
- 02:50 I'll just immediately open and close and then bop it down like this, so I know and
- 02:55 then as I go in, I'll just type in whatever stuff I want with a colon and
- 03:00 a semicolon, of course and go from there.
- 03:04 So that's the basic syntax of CSS.
- 03:06 Inside of these things, you may want comments,
- 03:08 seems like any kind of computer code, you're gonna want comments.
- 03:11 And comments just help us read the code,
- 03:14 help us keep track of things and a comment in CSS looks like this.
- 03:19 It's a forward slash and then a star, and this is a comment.
- 03:23 And then you close the comment with a star and then another forward slash.
- 03:28 And you can see as I did that, when this was open still,
- 03:31 all of this becomes a comment, so until you close it.
- 03:34 And then as soon as you do, boom it pops back into a color.
- 03:38 So from time to time, especially as your CSS file gets longer and longer,
- 03:43 you're going to want to comment.
- 03:45 Just to be helpful to yourself, when you come back later and try and
- 03:48 read this stuff.
- 03:48 It helps it jog your memory, this is supposed to be that,
- 03:51 that's supposed to be that and all that stuff.
- 03:53 So that's pretty much the basic context as far as selectors go.
- 03:57 There are several kinds of selectors.
- 03:59 There's an id selector and a class selector.
- 04:02 We'll see as we go along what each of those do, as we start to use them.
- 04:06 Class selectors have a period in front of them.
- 04:08 Id selectors have hashtags in front of them, number signs.
- 04:12 So we'll get into all that stuff later, but
- 04:14 just understand this is the basic structure of CSS.
- 04:16 Pretty straightforward, pretty simple.
- 04:18 Selector, declaration, property and value, colon and semicolon and that's all for
- 04:22 this video.
Lesson notes are only available for subscribers.