RSS
CSS Videos
By Ashton Sanders

CSS Properties

CSS Syntax

StupidMehOkayGreatAwesome!
(122 votes, avg: 3.84/5)
Loading ... Loading ...

Video Transcript:

Hi this is Ashton Sanders with CSS Videos.com, and we are going to be talking about CSS Syntax.

My favorite thing about CSS is that it has a very simple syntax; making it super easy to learn.

In Cascading Style Sheets, you are writing a series of rules to apply to your HTML document.  Every rule has these things:

 

CSS Syntax

  • Selector: is the hook used to choose what part(s) of your HTML to apply the CSS to. Following the selector is the…
  • Declaration Block: Everything within the curly brackets,  “{” and “}”, is called the declaration block
  • Declaration: Inside a declaration block you can have as many declarations as you want and each declaration is a combination of a CSS Property and a value.
  • Property: is one of the CSS Properties used to tell what part of the selector will be changed (or styled).
  • Value: assigns a value to the property.

(Note that the Property is always followed by a colon, and each declaration is separated with a semicolon

Here are some quick sample:

Let’s Say that title at the top of this video screen is an H1 element. The HTML code for that would look like this:

<h1>CSS Syntax</h1>

Now lets use CSS to make it red.

h1 { color: red }

This bit of code tells the h1 to have the color of red. Boo yea, we got some red in there and we are good to go.

Let’s add another declaration to the declaration block to make the background color black:

h1 { color: red; background: black; }

You now know the basics of the CSS Syntax.

My next video will go into further detail about the CSS Selector, and some things you should know about it.

Thanks for Watching!

Ashton Sanders
CSSVideos.com

This entry was posted by Ashton Sanders on Wednesday, May 6th, 2009 at 11:15 am and is filed under CSS Basics. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

22 Responses to “CSS Syntax”

  1. Mike Hedge says:

    great video!

  2. Ian Merwin says:

    Nice – can’t wait for the next vid!

  3. CSS Selectors Part 1 | CSS Video Tutorials says:

    […] CSS Syntax […]

  4. bryan says:

    work of an eagle scout

  5. Alicia says:

    Ashton.

    Do you need to know HTML to create CSS? I’m following along but I don’t have any experience with HTML besides the basic ‘b’ and ‘/b’ commands etc.

    On that note, is CSS created in a program or do you just imput it manually?

    • Ashton Sanders says:

      Hi Alicia,

      I responded via email, but to summarize: Yes, you should know the foundations of HTML since CSS is used to style the HTML of your webpage.

  6. Jean says:

    Hi,
    Very easy to understand explanation of
    css syntax. Thanks
    Jean

  7. Rie Aleksandra says:

    Hi, good videos, but the sound settings almost blew my eardrums!! Check out the sound levels on your first video and the one above, and CHANGE it.

    Damn, my head’s hurting…. (I wore earplugs)

    • Ashton Sanders says:

      Haha, really? Yea, the sound on the first one is way too quite, so I’ve increased them. I’ll try to fix that first one.

      Talk soon,
      Ashton

  8. Irina says:

    Excellent videos!
    Thanks for sharing.
    Irina

  9. soufiane says:

    THxxx for the mimportants vidéoooss !!

  10. Jose says:

    Great videos. Can I know what video software you used to record the videos?

    Thank You

  11. Bordz says:

    You Rock Ashton!

  12. David says:

    Thanks for the vid tut

  13. Jude Laudenslager says:

    Great post, My bookmarked your own weblog so we could the a lot more upon, Take care

  14. aerone says:

    Hi ashton. Excellent tutorials! Now I can complete my PHP website. Few more days to go and I can now post my site. Tnx much dude!

  15. aerone says:

    Excellent tutorials! Now I can complete my PHP website. Few more days to go and I can now post my site. Tnx much dude!

  16. Robert Kennedy says:

    Great little vid on the basics of css. Once you got the basics then you can get styling

  17. priya says:

    am not getting proper o/p if i use this css syntax

  18. Thuan says:

    Great video on the basics of css. I cant ask more than this. well done mate.

  19. mazin says:

    thanx man for this video i love css ..

  20. 25+ Best CSS Video Tutorials | Submit Links says:

    […] View Tutorial […]

Leave a Reply

 
 
.love { css: awesome }