Course Hero

Courses » Intro to CSS » Chapter 1 » Concept 6

Intro to CSS

Chapter

  • 1

    Chapter 1

    To begin learning CSS, we will start off with giving an understanding of Selectors. Type selectors, ID selectors, Class selectors, just to name a few. These are important for picking out what on a page we want to apply a style to.

    Estimated time: ~27 Minutes
  • 2

    Chapter 2

    In this chapter, we will look at what the Cascade in CSS stands for. This will cover topics such as inheritance and specificity. An understanding of these concepts allows a designer to more effectively create styles and write less code.

    Estimated time: ~19 Minutes
  • 3

    Chapter 3

    In this middle chapter, we will take time to introduce a good portion of the tools at a designer's disposal when styling content with CSS. We will primarily go over styling text, colors, and backgrounds.

    Estimated time: ~32 Minutes
  • 4

    Chapter 4

    In this chapter, we will exert energy to address the matter of space. Space is important stuff; Most of the universe is made up of it, and so is most of your page. In order for elements to sit on the page where you want them, you must be familiar with concepts such as margins, padding, borders, and dimensions.

    Estimated time: ~17 Minutes
  • 5

    Chapter 5

    Finally, learn how to position elements in the page, and master the crazy float property of elements.

    Estimated time: ~23 Minutes
  • Exam

    Locked

    You must complete all chapters before taking the course exam.

Concept

  • 1

    Concept 1

    In this video, websmartTV gives us a quick intro into the functional use of CSS. The value of separating content from presentation.

    Estimated time: ~1 Minutes
  • 2

    Concept 2

    In Part 1 of this video from Learn Web Code, we are shown how CSS can be used to style specific elements of a page.

    Estimated time: ~4 Minutes
  • 3

    Concept 3

    In Part 2 of this video from Learn Web Code, we explore different methods of assigning styles to key elements in your HTML page.

    Estimated time: ~4 Minutes
  • 4

    Concept 4

    In Part 3 of this video from Learn Web Code, we learn how descendant selectors give you all the control you need to define your styles for very specific elements in your page.

    Estimated time: ~3 Minutes
  • 5

    Concept 5

    This video demonstrates how you can make your style more specific without writing too much code. To accomplish this we further explore uses of descendant selectors as well as well as attribute selectors. You'll also get a brief look at psuedo-classes like :hover.

    Estimated time: ~7 Minutes
  • 6

    Concept 6

    Here is a complete reference to all the kinds of CSS selectors available. You are not expected to know all of these off the top of your head, but should you ever forget, its good to know that resources like this are available.

    Estimated time: ~5 Minutes
  • Test

    Chapter 1 Test

    Take the chapter 1 test and unlock the Selectors badge.


Concept 6: A Complete Reference to Selectors

Here is a complete reference to all the kinds of CSS selectors available. You are not expected to know all of these off the top of your head, but should you ever forget, its good to know that resources like this are available.

edit

You are making progress towards completing chapter 1 and unlocking the Selectors Badge

This badge is worth: 50 Points

Show Source
From http://www.w3.org/TR/CSS2/selector.html (open source in a new window)
Read the following concept:

















PatternMeaningDescribed in section
*Matches any element.Universal
selector
EMatches any E element (i.e., an element of type E).Type
selectors
E FMatches any F element that is a descendant of
an E element.		Descendant
selectors
E > FMatches any F element that is a child of
an element E.		Child selectors
E:first-childMatches element E when E is the first
child of its parent.
The :first-child pseudo-class
E:link
E:visited 		Matches element E if E is the source
anchor of a hyperlink of which the target is not yet visited (:link)
or already visited (:visited).
The link pseudo-classes
E:active
E:hover
E:focus 		Matches E during certain
user actions.
The dynamic pseudo-classes
E:lang(c) Matches element of type E if it is in (human) language c
(the document language specifies how language is determined).
The :lang() pseudo-class
E + FMatches any F element immediately preceded by
a sibling element E.		Adjacent selectors
E[foo]Matches any E element with the
"foo" attribute set (whatever the value).
Attribute selectors
E[foo="warning"]Matches any E element whose
"foo" attribute value is exactly equal to "warning".
Attribute selectors
E[foo~="warning"]Matches any E element whose
"foo" attribute value is a list of space-separated values, one of
which is exactly equal to "warning".
Attribute selectors
E[lang|="en"]Matches any E element whose
"lang" attribute has a hyphen-separated list of values
beginning (from the left) with "en".
Attribute selectors
DIV.warningLanguage specific. (In HTML, the same
as DIV[class~="warning"].)
Class selectors
E#myidMatches any E element with ID
equal to "myid".		ID selectors

Share:
Take Concept 6 Quiz »

Ask a Question

Send me an email when someone posts a reply

Questions & Answers

Quiz Questions

Concept 6: A Complete Reference to Selectors