CSS Vocabulary

Activity Instructions

Estimated Time: 30 minutes

Just like with HTML, CSS also has some important vocabulary that you should be familiar with as we move forward.

1. Vocabulary list

   Let's learn the CSS vocabulary you will need to succeed in this course.

   CSS has some very specific vocabulary that comes with it. It is important that we become familiar with it. Spend a few minutes familiarizing yourself with the following list. You will have a hard time making sense of the instruction given in this course if you don't understand these terms.

   Selector

   How you specify to the browser which HTML element(s) should be changed. We will focus primarily on 3 kinds of selectors in this class:

   1. element
   2. .class
   3. #id

   For example, if we have the following HTML:

   <p>No class or id on this paragraph</p>
   <p class="green">This paragraph has a class</p>
   <p class="green" id="paragraph3">This paragraph has a class and an id </p>

   We could select all of the paragraphs by using the element selector: p (Notice that there is no preface...we simply use the tag name)

   We could select just the second and third paragraphs by using the class attribute on them as a selector like this: .green (Notice that we preface the class name with a period)

   ...and we could select just the last paragraph by using its ID as a selector like this: #paragraph3 (Notice that we preface the ID with a hashtag)

   p /* element selector: all paragraphs */
   .green /* class selector: all paragraphs with an attribute class="green" */
   #paragraph3 /* id selector: the paragraph with the attribute id="paragraph3" */

   Property

   What we want to change about the element(s) selected by our selector. ie

   background-color

   Value

   How we want to change a property

   green

   Declaration

   A combination of a property and value with a colon. Declarations must end with a semi-colon (;)

   background-color: green;

   Declaration Block

   One or more declarations will be combined into a block using curly braces: {}

   {
       background-color: green;
       margin: 5px;    
   }

   Rule (or Rule-set)

   A rule is the combination of a selector and declaration block. The example below would select all elements with a class="green" and turn their background green!

   .green {
       background-color: green;
       margin: 5px;    
   }

   Units

   Many properties require a value with units. Some units are absolute meaning that they are always the same size. Other units are relative meaning that their size changes based on something else (like the size of the text or the width or the browser or an element). Common CSS units are: px (absolute), em (relative, based off of font size), and % (relative, based off of width)

2. Look deeper

   Watch for mention of the terms above as you review the following tutorials.

   Make sure to tap on the "Try It Yourself" buttons in the tutorials to experiment!

   • Introduction to CSS
   • CSS Syntax
   • CSS Units
   • CSS Selectors Look over this list, pay particular attention to the element, class, and id selectors. (we won't use all of these types in this class!)
   • CSS Properties Look over this list and click on a few that look interesting.

   Note!

   Just like with the HTML, I do not expect you to memorize all of the properties, etc in these links at this point. The goal is to familiarize yourself with the concepts and learn to recognize instances of the terms above. The site that these link to is also a great resource for learning/reviewing HTML and CSS concepts in general.

3. Review

   Visit this site: CSS Vocabulary and see how many instances of the terms you learned above you can find. After looking on your own, select each term from our list one at a time on the right and see if you found all the instances. This list has more vocabulary on it than I asked you to learn. Don't let this overwhelm or distract you. Focus on the list above.

4. Take the Quiz

   Just like with the HTML quiz you must pass this quiz before you can move on to the next week. You can take this quiz as many times as you need.