Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Learning CSS syntax

From: XHTML and HTML Essential Training

Video: Learning CSS syntax

In this chapter, we are going to look at the syntax of CSS so you'll know how to read the CSS that you see and you'll be able to write your own CSS. So here we have a document that is formatted with CSS and here we have that same document in the editor and here we have the CSS style sheet. You'll see we are using an external style sheet that's called in right here and there's the style sheet there. This is the same style sheet that we are using throughout this chapter and so you see it is possible and common to use an external style sheet for multiple documents.

Learning CSS syntax

In this chapter, we are going to look at the syntax of CSS so you'll know how to read the CSS that you see and you'll be able to write your own CSS. So here we have a document that is formatted with CSS and here we have that same document in the editor and here we have the CSS style sheet. You'll see we are using an external style sheet that's called in right here and there's the style sheet there. This is the same style sheet that we are using throughout this chapter and so you see it is possible and common to use an external style sheet for multiple documents.

It makes it very easy to keep track of the styles and the formatting across different documents. Before we get into the syntax of the CSS itself, there's one subject that I'd like to cover in the XHTML on how the styles are applied. There are two special tags in XHTML and HTML called span and div. Div is a block level element and span is an inline element. So they are used like this. They don't have any properties of their own.

They are used for applying styles. So if I say div over here and I say style equals color blue and then I close that down here with the end tag for div. I'll go ahead and I'll save that. Now this section of the document will come up with blue text whereas the rest of the document will have the text that's defined in the body element in the CSS.

So I'll go ahead and I'll reload this. There you have it. This section is now blue and the rest of the document still has the color that's defined in the body element of the CSS. So that's how div works. Div is for applying style to a section of a document at the block level. In other words, these are block level elements. The

and the paragraph are block level elements. So I need a block element to wrap around them so that I can have blocks inside of that tag. Likewise, if I wanted to do the same thing but on the inline level, I would use .

So is an inline level element that has no properties of its own but is used for applying style. So here we have span and a style of color red. So the text of this word, originally, will be red, whereas the rest of this paragraph will still have the color that it's inherited from this

element that we just inserted. So I'll go ahead and I'll save that and we'll see that the word, originally, will now turn up red and there we have it. You'll notice that they inherit just as you would expect them to because the
element is outside and the element is inside.

So inherits its properties first from the paragraph, which is just outside of it and then from the

, which is outside of that. So it still follows the same hierarchy as rest of the rules for applying CSS. So let's take a look at the style sheet itself and we'll understand some of the elements of how the style sheet works and how the syntax of the style sheet works. Here we have the words body and h1 and p, and these are selectors. So the selector is the first thing that you'll see in a style in the style sheet.

There are three different kinds of selectors. This is a tag selector and this is a tag selector and this is a tag selector. So these are names of tags and you don't see any special punctuation around them. When you see a period before the name, as in the case of .first, and in the case of .highlight, those are called class selectors and those are applied using the class attribute in XHTML. So here, instead of using style, if I simply said class equals highlight, that selects the class style using the class selector.

So I'll go ahead and save that and we'll look at in CSS. So we have this highlight selector with the dot before it. That makes it a class selector. So we use the class attribute to select that. So class equals highlight and the class attribute selects that. Notice that there's no period here. We don't use the period in the name on the XHTML side. We just say the word highlight. The period is used in the CSS just to say that it's a class selector. I've saved that and I'll go ahead and reload in the browser and we see that now it has that bold font and the highlighting behind it.

In fact, if we wanted to, we could apply the class selector to any element in the HTML. We could apply it to this . We can say class equals highlight and now the anchor link will be highlighted in the HTML, see there, or we could apply it even to the entire paragraph if we wanted to. And then the entire paragraph would be highlighted like that and that's a block level, so it highlights all the way from margin to margin which is how block levels work.

So that's the class selector. Like I said, there are three different types of selectors so we've seen two of them. We've seen the tag selector and we've seen the class selector. Let's take a look at the third type, which is called the id selector. So here I've created a style and it's called whois and it uses an id selector. The id selector uses a pound sign where the class selector used the period. So that's the pound sign or the hash mark, the tic-tac-toe looking thing that's in the Shift+3 on my keyboard.

So that's the id selector. So I'll go ahead and I'll save this and we'll go into the XHTML. Take this highlight out there. It doesn't get too confusing. So you see here we have style color equals blue in div. I'm going to go ahead and I'm going to say id equals whois and this is how this is typically used. I'll save this. So now, this entire section here with the div is going to use this whois selector and that is an id selector. Now the major difference between an id selector and a class selector is that a class selector can be used over and over whereas an id selector can only be used once.

So I'm really only allowed to use this at one place in a document. If I wanted another div around this other section here, I would have to name that something else. So this is used for marking up an entire section of a document. It might have like a main article, it might have a sidebar, it might have something else and you can separate those sections of the document with id selectors and that allows you to apply a style to that whole section of the document. We'll see a number of examples of this when we look at building a website in the next chapter.

But let's just take a look at how this works for now. We've set up this id selector with the class name of whois and here it is, id whois with the id selector in the CSS. I'll go ahead and reload the document and you see that this is all blue, just like we expected because we have set it to be blue. We can make it something else just so you can see it and say 606 and it will be a sort of a purple color. We'll save that and go ahead and reload in here. So that's sort of a burgundy color there.

That's how the id selectors work. So those are the selectors and there are three different kinds. Then there's a pair of curly braces and the curly braces actually delimit the style itself. So all of this is within the style and it's within these curly braces. So that's part of the body style. Then inside of the curly braces, we have the style itself. Now the style has two parts. It has the property part, which is to the left of the colon, and to the right of the colon, it has the value. So each of these styles, there is a background-color property, a color property, font-family property and the value there is helvetica, the value here is #630, the value here is #ffc.

So we have the property and the value, property-value, property-value, and then each property-value combination is separated by a semicolon. So you have a semicolon there and a semicolon there and a semicolon there. Now, technically, the semicolon is not required on the last property-value combination, but I usually include it when I'm writing style sheets like this and the reason is that it's just hard to keep track of which is the last thing. If I omit it here and I decide I want to add a property after it and I say color equals green then it's just not going to work.

You are not going to see the color equals green. You also won't see the indent. I'll go ahead and I'll save that and I'll show that to you. This is an error. So the reason for that is that I eliminated this semicolon. I didn't use it as the last one and then I added something and I forgot to put it in there. So if I put this back in, then we'll see the color will become green and we'll have the indent again. So that's why I go ahead and I use them anyway, even though they are not required on the last element. They are technically supposed to be separators.

Most people will use them as terminators instead. In other words, they'll put them on every line and that's the reason for that because otherwise, you have to keep track of it and it's just too hard to do. So there you have it. That is the syntax of the CSS. You have the selector, you have the curly braces, you have the properties and values, you have your semicolons. I just want to cover one other thing that's easy to get wrong and I'm going to do this here. I'm going to say in this div, instead of saying id equal whois, and I'm going to go ahead and put in a style using the style attribute and I'm going to say color equals green and we are going to try and set the color here and it's not going to work because I've made a mistake.

I made a very, very common mistake. I am going to ahead and I'm going to save that and we'll load it up over here and we'll see that the color is not green. Can you see the mistake? Aha! I used an equal sign instead of a colon. The colon and the space isn't required but I like putting a space after a colon and most people do. Not everybody though. You won't always see the space. And I made this mistake because I'm so used to in HTML and in XHTML typing an equal sign. So often times, I'll set up a style in my XHTML like that and I'll use an equal sign and I won't notice and I'll save it and I'll load it up and it won't be working.

I'll say why isn't that working and sometimes it will take me a while before I notice that I use an equal sign instead of a colon. So I'm just warning you. Then you'll see that this works now. I'll go ahead and load that up and now it's green. It works with the colon; it does not work with the equal sign. So that's just something that you can be on the watch out for and it's a little gotcha that happens a lot when you are writing the CSS in the XHTML file using the style attribute like that. So there you have it. That's the syntax of CSS. That's how CSS works. We also talked about the

and the tags, which are really useful for applying style in a document.

Show transcript

This video is part of

Image for XHTML and HTML Essential Training
XHTML and HTML Essential Training

59 video lessons · 80783 viewers

Bill Weinman
Author

 
Expand all | Collapse all
  1. 5m 10s
    1. Welcome
      1m 16s
    2. Using the exercise files
      1m 23s
    3. Choosing a text editor
      2m 31s
  2. 15m 46s
    1. Introducing HTML and XHTML
      2m 53s
    2. Understanding versions of HTML and XHTML
      2m 25s
    3. Exploring a simple XHTML page
      4m 47s
    4. Understanding the structure of an XHTML document
      2m 58s
    5. Understanding document containers
      54s
    6. Creating and using templates
      1m 49s
  3. 42m 4s
    1. Understanding how empty space is formatted in XHTML
      2m 42s
    2. Using paragraph tags
      2m 42s
    3. Aligning paragraphs
      2m 49s
    4. Understanding block-level and inline tags
      1m 24s
    5. Controlling line breaks and spaces
      5m 43s
    6. Formatting text with phrase element tags
      3m 28s
    7. Formatting text with font markup elements
      3m 24s
    8. Adding document structure with headings
      3m 25s
    9. Formatting quotations and quote marks
      2m 19s
    10. Preserving pre-formatted text
      1m 30s
    11. Selecting a typeface
      4m 33s
    12. Selecting a type size
      2m 11s
    13. Using ordered and unordered lists
      5m 54s
  4. 7m 48s
    1. Using inline images
      3m 17s
    2. Flowing text around an image
      2m 4s
    3. Breaking lines around an image
      2m 27s
  5. 22m 34s
    1. Working with hyperlinks
      7m 46s
    2. Using relative URLs
      3m 5s
    3. Specifying a base URL
      2m 4s
    4. Linking within a page using fragments
      4m 28s
    5. Creating image links
      5m 11s
  6. 22m 56s
    1. Introducing tables
      4m 37s
    2. Formatting tables with CSS
      8m 50s
    3. Aligning images with tables
      5m 7s
    4. Reviewing an alternative solution using CSS
      4m 22s
  7. 14m 31s
    1. Introducing frames
      7m 56s
    2. Hiding frame borders
      3m 15s
    3. Creating inline frames using iFrame
      3m 20s
  8. 20m 50s
    1. Introducing forms: part 1
      10m 37s
    2. Introducing forms: part 2
      7m 45s
    3. Using CGI with forms
      2m 28s
  9. 25m 42s
    1. Introducing CSS
      3m 11s
    2. Understanding levels of inheritance
      6m 10s
    3. Learning CSS syntax
      11m 23s
    4. Using units of measure in CSS
      4m 58s
  10. 1h 45m
    1. Comparing table layout and CSS layout
      1m 25s
    2. Exploring the finished web site
      2m 37s
    3. Building a document header
      8m 18s
    4. Placing a banner and a contact button
      8m 13s
    5. Laying out a main menu
      6m 55s
    6. Creating a layout template: main body area
      13m 31s
    7. Creating a layout template: sidebar area
      5m 17s
    8. Creating a layout template: footer content
      4m 46s
    9. Building a main home page: main body content
      11m 24s
    10. Building a main home page: sidebar content
      8m 52s
    11. Creating a page with a menu, graphics, and formatted links
      13m 26s
    12. Creating a page containing an ordered list
      6m 44s
    13. Creating a page containing video
      10m 45s
    14. Touring the finished site
      3m 45s
  11. 53s
    1. Goodbye
      53s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed XHTML and HTML Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
  • Mark video as unwatched
  • Mark all as unwatched
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

  • new course releases
  • newsletter
  • general communications
  • special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

  • new course releases
  • newsletter
  • general communications
  • special notices

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.