Chevron Up IconLearn CSS: Course OverviewCourse Overview
Chevron Right IconLearn CSS: The Box Model

Learn CSS: Selectors and Visual Rules

In this course, you will learn how to style individual and groups of elements using various visual CSS rules.

Start[missing "en.views.course_landing_page.learn-css.course_illustration" translation]

Key Concepts

Review core concepts you need to learn to master this subject

Inline styles

Purpose of CSS

Writing CSS code in HTML file

Writing CSS code in separate files

Separating HTML code from CSS code

The link element

CSS Selector chaining

CSS type selectors

See more

Inline styles

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

CSS styles can be directly added to HTML elements by using the style attribute in the element's opening tag. Each style declaration is ended with a semicolon. Styles added in this manner are known as 'inline styles'.

Purpose of CSS

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can define styles and change the layout and design of a sheet.

Writing CSS code in HTML file

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

CSS code can be written in an HTML file by enclosing the code in <style> tags. Code surrounded by <style> tags will be interpreted as CSS syntax. In the example, CSS code of foreground color for h1 element has been defined inside an HTML block.

Writing CSS code in separate files

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

CSS code can be written in its own files to keep it separate from the HTML code. The extension for CSS files is .css. These can be linked to an HTML file using a <link> tag in the <head> section.

Separating HTML code from CSS code

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

It is common practice to separate content code in HTML files from styling code in CSS files. This can help make the code easier to maintain, by keeping the syntax for each file separate, and any changes to the content or styling can be made in their respective files.

The link element

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The <link> element is used to link HTML documents to external resources like CSS files. <link> commonly uses the href attribute to specify the URL to the external resource, rel to specify the relationship of the linked document to the current document, and type to define the type of content being linked.

CSS Selector chaining

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

CSS selectors define the set of elements to which a CSS rule set applies. For instance, to select all <p> elements, the p selector can be used to create style rules.

CSS type selectors

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

CSS type selectors are used to match all elements of a given type or tag name. Unlike for HTML syntax, we do not include the angle brackets when using type selectors for tag names. When using type selectors, elements are matched regardless of their nesting level in the HTML.

CSS class selectors

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The CSS class selector matches elements based on the contents of their class attribute. For selecting elements having calendar-cell as the value of the class attribute, a . needs to be prepended.

HTML attributes with multiple values

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

Some HTML attributes can have multiple attribute values. Multiple attribute values are space separated.

CSS ID selectors

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The CSS ID selector matches elements based on the contents of their id attribute. The values of id attribute should be unique in the entire DOM. For selecting the element having job-title as the value of the id attribute, a # needs to be prepended.

CSS class and ID selectors

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

CSS classes can be reusable and applied to many elements. Class selectors are denoted with a period . followed by the class name. CSS ID selectors should be unique and used to style only a single element. ID selectors are denoted with a hash sign # followed by the id name.

CSS Selector Specificity

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

Specificity is a ranking system that is used when there are multiple conflicting property values that point to the same element. When determining which rule to apply, the selector with the highest specificity wins out. The most specific selector type is the ID selector, followed by class selectors, followed by type selectors. In this example, only ‘color: blue’ will be implemented as it has an ID selector whereas ‘color: red’ has a type selector.

Selector Specificity

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

Specificity is a ranking system that is used when there are multiple conflicting property values that point to the same element. When determining which rule to apply, the selector with the highest specificity wins out. The most specific selector type is the ID selector, followed by class selectors, followed by type selectors. In this example, only color: blue will be implemented as it has an ID selector whereas color: red has a type selector.

Chaining Selectors

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

CSS selectors can be chained so that rule sets apply only to elements that match all criteria. For instance, to select <h3> elements that also have the section-heading class, the selector h3.section-heading can be used.

CSS descendant selector

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The CSS descendant selector combinator is used to match elements that are descended from another matched selector. They are denoted by a single space between each selector and the descended selector. All matching elements are selected regardless of the nesting level in the HTML.

CSS !important rule

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The CSS !important rule is used on declarations to override any other declarations for a property and ignore selector specificity. !important rules will ensure that a specific declaration always applies to the matched elements. However, generally it is good to avoid using !important as bad practice.

Groups of CSS Selectors

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

Match multiple selectors to the same CSS rule, using a comma-separated list. In this example, the text for both h1 and h2 is set to red.

CSS declarations

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

In CSS, a declaration is the key-value pair of a CSS property and its value. CSS declarations are used to set style properties and construct rules to apply to individual or groups of elements. The property name and value are separated by a colon, and the entire declaration must be terminated by a semi-colon.

CSS Rule Sets

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

A CSS rule set contains one or more selectors and one or more declarations. The selector(s), which in this example is h1, points to an HTML element. The declaration(s), which in this example are color: blue and text-align: center style the element with a property and value. The rule set is the main building block of a CSS sheet.

CSS font families

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The font-family CSS property is used to specify the typeface in a rule set. Fonts must be available to the browser to display correctly, either on the computer or linked as a web font. If a font value is not available, browsers will display their default font. When using a multi-word font name, it is best practice to wrap them in quotes.

CSS font size

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The font-size CSS property is used to set text sizes. Font size values can be many different units or types such as pixels.

CSS font weight

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The font-weight CSS property can be used to set the weight (boldness) of text. The provided value can be a keyword such as bold or normal.

Setting alignment of inline content

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The text-align property can be used to set alignment of inline contents. This property can be set to these values : left, right, or center . For instance, to right-align the text inside a <p> tag, text-align: right is added to the rule set.

Setting foreground text color in CSS

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

Using the color property, foreground text color of an element can be set in CSS. The value can be a valid color name supported in CSS like green or blue. Also, 3 digit or 6 digit color code like #22f or #2a2aff can be used to set the color.

CSS color name keywords

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

Color name keywords can be used to set color property values for elements in CSS.

Background colors

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The CSS background-color property controls the background color of elements.

Controlling opacity in CSS

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The opacity property can be used to control the transparency of an HTML element . The value of this property ranges from 0 to 1 . An element having the value 0 for the opacity property will be fully transparent . Conversely , the value 1 means it is fully opaque . In the example , the value .5 indicates any HTML element having hint-text class will be semi transparent .

Setting background image in CSS

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

The background-image CSS property sets the background image of an element. An image url should be provided in this syntax - url("blue-bg.jpg") as the value of the property.

CSS resource URLs

<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

In CSS, the url() function is used to wrap resource URLs. These can be applied to several properties such as the background-image.

Chevron Left Icon
CSS Setup and Selectors
Lesson 1 of 2
Chevron Right Icon
  1. 1

    The basic structure of every web page, HTML, is very plain on its own. The beautiful websites that you see across the internet are styled with a variety of tools, including CSS. CSS, or Cascad...

  2. 2

    Although CSS is a different language than HTML, it's possible to write CSS code directly within HTML code using inline styles. To style an HTML element, you can add the [...] attribute direct...

  3. 3

    Inline styles are a fast way of styling HTML, but they also have limitations. If you wanted to style, for example, multiple [...] elements, you would have to add inline styling to each element ma...

  4. 4

    Developers avoid mixing code by storing HTML and CSS code in separate files (HTML files contain only HTML code, and CSS files contain only CSS code). You can create a CSS file by using the **.css...

  5. 5

    Perfect! We successfully separated structure (HTML) from styling (CSS), but the web page still looks bland. Why? When HTML and CSS code are in separate files, the files must be linked. Otherwise,...

  6. 6

    CSS can select HTML elements by using an element's tag name. A tag name is the word (or character) between HTML angle brackets. For example, in HTML, the tag for a paragraph element is [...] . Th...

  7. 7

    CSS is not limited to selecting elements by tag name. HTML elements can have more than just a tag name; they can also have attributes. One common attribute is the [...] attribute. It's also pos...

  8. 8

    We can use CSS to select an HTML element's [...] attribute by name. So far, we've selected elements using only one class name per element. If every HTML element had a single class, all the styl...

  9. 9

    If an HTML element needs to be styled uniquely (no matter what classes are applied to the element), we can add an ID to the element. To add an ID to an element, the element needs an [...] attribu...

  10. 10

    CSS can select HTML elements by their tag, class, and ID. CSS classes and IDs have different purposes, which can affect which one you use to style HTML elements. CSS classes are meant to be reused...

  11. 11

    Specificity is the order by which the browser decides which CSS styles will be displayed. A best practice in CSS is to style elements while using the lowest degree of specificity, so that if an ele...

  12. 12

    When writing CSS rules, it's possible to require an HTML element to have two or more CSS selectors at the same time. This is done by combining multiple selectors, which we will refer to as chaini...

  13. 13

    In addition to chaining selectors to select elements, CSS also supports selecting elements that are nested within other HTML elements. For instance, consider the following HTML: [...] The nes...

  14. 14

    In the last exercise, instead of selecting all [...] elements, you selected only the [...] elements nested inside the [...] elements. This CSS selector was more specific than writing only [....

  15. 15

    There is one thing that is even more specific than IDs: [...] . [...] can be applied to specific attributes instead of full rules. It will override any style no matter how specific it is. As a...

  16. 16

    In order to make CSS more concise, it's possible to add CSS styles to multiple CSS selectors all at once. This prevents writing repetitive code. For instance, the following code has repetitive st...

  17. 17

    Throughout this lesson, you learned how to select HTML elements with CSS and apply styles to them. Let's review what you learned: - CSS can change the look of HTML elements. In order to do this, ...

  1. 1

    In this lesson, you'll learn the basic structure and syntax of CSS so that you can start styling web page elements.

  2. 2

    To style an HTML element using CSS, you need to write a CSS declaration inside the body of a CSS selector. [...] The example above selects the [...] element. Inside of the selector's body, we...

  3. 3

    If you've ever used a formatted word processor, chances are that you probably also used a feature that allowed you change the font you were typing in. Font refers to the technical term typeface , ...

  4. 4

    Changing the typeface isn't the only way to customize text. Often times, different sections of a web page are highlighted by modifying the font size. To change the size of text on your web page...

  5. 5

    In CSS, the [...] property controls how bold or thin text appears. [...] In the example above, all paragraphs on the web page would appear bolded. The [...] property has a another value...

  6. 6

    No matter how much styling is applied to text (typeface, size, weight, etc.), text always appears on the left side of the browser. To align text we can use the [...] property. The [...] prope...

  7. 7

    Before discussing the specifics of color, it's important to make two distinctions about color. Color can affect the following design aspects: - Foreground color - Background color Foreground co...

  8. 8

    Opacity is the measure of how transparent an element is. It's measured from 0 to 1, with 1 representing 100%, or fully visible and opaque, and 0 representing 0%, or fully invisible. Opacity can b...

  9. 9

    CSS has the ability to change the background of an element. One option is to make the background of an element an image. This is done through the CSS property [...] . Its syntax looks like this: ...

  10. 10

    Incredible work! You used CSS to alter text and images throughout a website. Throughout this lesson, you learned concepts including: - CSS declarations are structured into property and value pair...

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo

Learn CSS: Selectors and Visual Rules

Start[missing "en.views.course_landing_page.learn-css.course_illustration" translation]