HTML and CSS Reference
In-Depth Information
Figure 1.5
CSS syntax outline including a selector, properties, and values
Knowing a few common terms and the general syntax of CSS is a great start, but we have a
few more items to learn before jumping in too deep. Specifically, we need to take a closer
look at how selectors work within CSS.
Working with Selectors
Selectors, as previously mentioned, indicate which HTML elements are being styled. It is
important to fully understand how to use selectors and how they can be leveraged. The first
step is to become familiar with the different types of selectors. We'll start with the most
common selectors:
type
,
class
, and
ID
selectors.
Type Selectors
Type
selectors target elements by their element type. For example, should we wish to target
all division elements,
<div>
, we would use a type selector of
div
. The following code
shows a type selector for division elements as well as the corresponding HTML it selects.
CSS
1.
div
{ ... }
HTML
1.
<
div
>...</div>
2.
<
div
>...</div>
Class Selectors
Class
selectors allow us to select an element based on the element's
class
attribute value.
Class selectors are a little more specific than type selectors, as they select a particular group
of elements rather than all elements of one type.
Class selectors allow us to apply the same styles to different elements at once by using the
same
class
attribute value across multiple elements.
Search WWH ::
Custom Search