CSS Selectors: What Is Selector?
CSS Selectors: What Is Selector?
CSS Selectors: What Is Selector?
Selectors
What is Selector?
A CSS selector is a pattern to match the elements on a web page. The style
rules associated with that selector will be applied to the elements that
match the selector pattern.
Selectors are one of the most important aspects of CSS as they allow you
to target specific elements on your web page in various ways so that they
can be styled.
Several types of selectors are available in CSS, let's take a closer look at
them:
Universal Selector
The universal selector, denoted by an asterisk (*), matches every single
element on the page.
Let's try out the following example to understand how it basically works:
Element Type Selectors
An element type selector matches all instance of the element in the
document with the corresponding element type name. Let's try out an
example to see how it actually works:
Id Selectors
The id selector is used to define style rules for a single or unique element.
The class selector is defined with a period sign (.) immediately followed by
the class value.
Descendant Selectors
You can use these selectors when you need to select an element that is the
descendant of another element, for example, if you want to target only
those anchors that are contained within an unordered list, rather than
targeting all anchor elements. Let's see how it works:
Child Selectors
A child selector is used to select only those elements that are the direct
children of some element.
The selector h1 ∼ p in the example below will select all the <p> elements
that preceded by the <h1> element, where all the elements share the same
parent in the document tree.
Grouping Selectors
Often several selectors in a style sheet share the same style rules
declarations. You can group them into a comma-separated list to minimize
the code in your style sheet. It also prevents you from repeating the same
style rules over and over again. Let's take a look:
________________________________________________________________________________
As you can see in the above example, the same style rule font-weight:
normal; is shared by the selectors h1, h2 and h3, so it can be grouped in a
comma-separated list, like this:
CSS Color
In this tutorial you will learn the different methods of defining color values
in CSS.
Example
Try this code »
body {
color: #ff5722;
}
For now, let's stick to the basic methods of defining the color values:
Color Keywords
CSS defines the few color keywords which lets you specify color values in
an easy way.
These basic color keywords are: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color
names are case-insensitive.
Example
Try this code »
h1 {
color: red;
}
p {
color: purple;
}
Modern web browsers however practically support many more color names
than what are defined in the CSS standard, but to be on the safer side you
should use hex color values instead.
See the reference on CSS color names, for a complete list of possible color
names.
The value of each component can vary from 00 (no color) and FF (full color)
in hexadecimal notation, or 0 and 255 in decimal equivalent notation.
Thus #ffffff represents white color and #000000 represents black color. Let's
take a look the following example:
Example
Try this code »
h1 {
color: #ffa500;
}
p {
color: #00ff00;
}
Tip: If hexadecimal code of a color has value pairs, it can also be written in
shorthand notation to avoid extra typing, for example, the hex color value
#ffffff can be also be written as #fff, #000000 as #000, #00ff00 as #0f0,
#ffcc00 as #fc0, and so on.
Example
Try this code »
h1 {
color: rgb(255, 165, 0);
}
p {
color: rgb(0, 255, 0);
}
Tip: If R, G, and B are all set to 255, i.e. rgb(255, 255, 255), the color would
be white. Likewise, if all channels are set to 0, i.e. rgb(0, 0, 0), the color
would be black. Play with the RGB values in the following demonstration to
understand how it actually works.
Background Color
The background-color property is used to set the background color of an
element.
The following example demonstrates how to set the background color of
the whole page.
Example
Try this code »
body {
background-color: #f0e68c;
}
Color values in CSS are most often specified in the following formats:
Please check out the tutorial on CSS color to learn more about specifying
color values.
Background Image
The background-image property set an image as a background of an HTML
element.
Let's check out the following example which sets the background image for
the whole page.
Example
Try this code »
body {
background-image: url("images/tile.png");
}
Background Repeat
The background-repeat property allows you to control how a background
image is repeated or tiled in the background of an element. You can set a
background image to repeat vertically (y-axis), horizontally (x-axis), in both
directions, or in neither direction.
Let's try out the following example which demonstrates how to set the
gradient background for a web page by repeating the sliced image
horizontally along the x-axis.
Example
Try this code »
body {
background-image: url("images/gradient.png");
background-repeat: repeat-x;
}
Similarly, you can use the value repeat-y to repeat the background image
vertically along the y-axis, or the value no-repeat to prevent the repetition
altogether.
Example
Try this code »
body {
background-image: url("images/texture.png");
background-repeat: no-repeat;
}
Example
Try this code »
body {
background-image: url("images/robot.png");
background-repeat: no-repeat;
}
Example
Try this code »
body {
background-image: url("images/robot.png");
background-repeat: no-repeat;
background-position: right top;
}
Besides keywords, you can also use percentage or length values, such
as px or em for this property.
Let's try out the following example to understand how it basically works:
Example
Try this code »
body {
background-image: url("images/bell.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
Example
Try this code »
body {
background-color: #f0e68c;
background-image: url("images/smiley.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 250px 25px;
}
Using the shorthand notation the above example can be written as:
Example
Try this code »
body {
background: #f0e68c url("images/smiley.png") no-repeat
fixed 250px 25px;
}
background: color image repeat attachment position;
CSS Fonts
In this tutorial you will learn how to style fonts on a web page using CSS.
CSS provide several properties for styling the font of the text, including
changing their face, controlling their size and boldness, managing variant,
and so on.
The font properties are: font-family, font-style, font-weight, font-size,
and font-variant.
Let's discuss each of these font properties one by one in more detail.
Font Family
The font-family property is used to specify the font to be used to render
the text.
Hence, list the font that you want first, then any fonts that might fill in for
the first if it is not available. You should end the list with a generic font
family which are five — serif, sans-serif, monospace, cursive and fantasy. A
typical font family declaration might look like this:
Example
Try this code »
body {
font-family: Arial, Helvetica, sans-serif;
}
Note: If the name of a font family contains more than one word, it must be
placed inside quotation marks, like "Times New Roman", "Courier New", "Segoe
UI", etc.
To learn about commonly used font combinations, please check out the
reference on web safe fonts.
Font Style
The font-style property is used to set the font face style for the text content
of an element.
Let's try out the following example to understand how it basically works:
Example
Try this code »
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Note: At first glance both oblique and italic font styles appear the same
thing, but there is a difference. The italic style uses an italic version of the
font while oblique style on the other hand is simply a slanted or sloped
version of the normal font.
Font Size
The font-size property is used to set the size of font for the text content of
an element.
There are several ways to specify the font size values e.g. with keywords,
percentage, pixels, ems, etc.
Let's try out the following example to understand how it basically works:
Example
Try this code »
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}
Defining the font sizes in pixel is not considered very accessible, because
the user cannot change the font size from the browser settings. For
instance, users with limited or low vision may wish to set the font size
much larger than the size specified by you.
Therefore, you should avoid using the pixels values and use the values that
are relative to the user's default font size instead if you want to create an
inclusive design.
Tip: The text can also be resized in all browsers using the zoom feature.
However, this feature resizes the entire page, not just the text.
The W3C recommends using the em or percentage (%) values in order to
create more robust and scalable layouts.
However, if you haven't set the font size anywhere on the page, then it is
the browser default, which is normally 16px. Therefore, by default 1em =
16px, and 2em = 32px.
Example
Try this code »
h1 {
font-size: 2em; /* 32px/16px=2em */
}
p {
font-size: 0.875em; /* 14px/16px=0.875em */
}
Now you can set the font-size for any elements using em units, with an
easy-to-remember conversion, by dividing the px value by 10. This
way 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em, and so on. Let's take a
look at the following example:
Example
Try this code »
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.4em; /* 1.4em = 14px */
}
p span {
font-size: 2em; /* 2em = 28px */
}
Example
Try this code »
html {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.4rem; /* 1.4rem = 14px */
}
p span {
font-size: 2rem; /* 2rem = 20px (not 28px) */
}
Example
Try this code »
body {
font-size: large;
}
h1 {
font-size: larger;
}
p {
font-size: smaller;
}
Tip: By setting a font size on the body element, you can set the relative
font sizing everywhere else on the page, giving you the ability to easily
scale the font size up or down accordingly.
Try out the following example by resizing the browser window and see how
it works:
Example
Try this code »
body {
font-size: 1vw;
}
h1 {
font-size: 3vw;
}
However, there is a problem with the viewport units. On small screens fonts
become so small that they are hardly readable. To prevent this you can
utilize CSS calc() function, like this:
Example
Try this code »
html {
font-size: calc(1em + 1vw);
}
h1 {
font-size: 3rem;
}
In this example, even if the viewport width becomes 0, the font-size would
be at least 1em or 16px.
You further utilize CSS media queries to create better responsive and fluid
typography.
Font Weight
The font-weight property specifies the weight or boldness of the font.
Let's try out an example to understand how this property basically works:
Example
Try this code »
p {
font-weight: bold;
}
Font Variant
The font-variant property allows the text to be displayed in a special small-
caps variation.
Try out the following example to understand how this property actually
works:
Example
Try this code »
p {
font-variant: small-caps;
}
CSS Text
Formatting Text with CSS
CSS provides several properties that allows you to define various text styles
such as color, alignment, spacing, decoration, transformation, etc. very
easily and effectively.
Let's see how to set these text properties for an element in more detail.
Text Color
The color of the text is defined by the CSS color property.
The style rule in the following example will define the default text color for
the page
Example
Try this code »
body {
color: #434343;
}
Although, the color property seems like it would be a part of the CSS text,
but it is actually a standalone property in CSS. See the tutorial on CSS
color to learn more about the color property.
Text Alignment
The text-align property is used to set the horizontal alignment of the text.
Text can be aligned in four ways: to the left, right, centre or justified
(straight left and right margins).
Text Decoration
The text-decoration property is used to set or remove decorations from text.
Let's try out the following example to understand how it basically works:
Example
Try this code »
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Example
Try this code »
a {
text-decoration: none;
border-bottom: 1px dotted;
}
Text Transformation
The text-transform property is used to set the cases for a text.
Text are often written in mixed case. However, in certain situations you may
want to display your text in entirely different case. Using this property you
can change an element's text content into uppercase or lowercase letters,
or capitalize the first letter of each word without modifying the original
text.
Let's try out the following example to understand how it basically works:
Example
Try this code »
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}
h3 {
text-transform: lowercase;
}
Text Indentation
The text-indent property is used to set the indentation of the first line of
text within a block of text. It is typically done by inserting the empty space
before the first line of text.
The size of the indentation can be specified using percentage (%), length
values in pixels, ems, etc.
The following style rule will indent the first line of the paragraphs by 100
pixels.
Example
Try this code »
p {
text-indent: 100px;
}
Note: Whether the text is indented from the left or from the right depends
on the direction of text inside the element, defined by the
CSS direction property.
Letter Spacing
The letter-spacing property is used to set extra spacing between the
characters of text.
This property can take a length value in pixels, ems, etc. It may also accept
negative values. When setting letter spacing, a length value indicates
spacing in addition to the default inter-character space.
Let's check out the following example to understand how it really works:
Example
Try this code »
h1 {
letter-spacing: -3px;
}
p {
letter-spacing: 10px;
}
Word Spacing
The word-spacing property is used to specify additional spacing between the
words.
This property can accept a length value in pixels, ems, etc. Negative values
are also allowed.
Let's try out the following example to understand how this property works:
Example
Try this code »
p.normal {
word-spacing: 20px;
}
p.justified {
word-spacing: 20px;
text-align: justify;
}
p.preformatted {
word-spacing: 20px;
white-space: pre;
}
Line Height
The line-height property is used to set the height of the text line.
Example
Try this code »
p {
line-height: 1.2;
}
When the value is a number, the line height is calculated by multiplying the
element's font size by the number. While, percentage values are relative to
the element's font size.
Note: Negative values for the line-height property are not allowed. This
property is also a component of the CSS font shorthand property.
Example
Try this code »
p {
font-size: 14px;
line-height: 20px;
background-color: #f0e68c;
}
See the tutorial on CSS3 text overflow in the advanced section to learn how
to handle overflowed text. Also see the CSS3 text shadow section to learn
how to apply shadow effect on text.