Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

Cascading Style Sheets (CSS) is a document type and the associated scripting language that describes the presentation of HTML documents. Using the CSS language, you can control the look and feel of web pages by defining layout, text, and image properties to be applied in a wide array of contexts.

This course is a comprehensive introduction to both writing and implementing CSS. Using the document hierarchy model, you’ll learn how to tailor web styles to specific areas. With your hierarchy defined, you’ll dive deep into CSS fundamentals, adding colors, text styles, and backgrounds to your web page. After you’ve defined these elements, you’ll use CSS to define layouts around pictures and text flow and completely control your web page’s look. You’ll wrap up by exploring the essential animation functions of CSS.

By the end of this course, you’ll have functional mastery of Cascading Style Sheets and the CSS scripting language. You’ll be prepared to build professional web pages with your code.

Luka

Highly recommended! Tim covers everything & gets right to the important stuff!

Frontend dev

The Complete Beginner’s Guide to CSS

# Using attribute selectors

Elements can have attributes that provide extra details.

The following example shows an `href` attribute in an `a` (`link`) tag:

```
<a href="https://google.com">This is a link</a>
```

We use CSS attribute selectors to target such elements with their specific attributes. For example:

```
a[href="https://www.google.com"] {
  color: #FFFF00;
}
```

Here, we have an **exact match** selection that selects links with the exact `href` value of `“https://www.google.com”`.

Let’s learn how to use these very useful selectors!


# Types of attribute selectors 

There are several different types of attribute selectors. They’re classified as either **presence and value selectors** or **substring matching selectors**. The syntax for each selector begins with the particular attribute name and ends with an equal sign (`=`), followed by the attribute value(s). The selector type sits between the attribute name and the equal sign .

## Presence and value selectors

These selectors select an element based on the existence of an attribute (for example, `href`) or various matches against the attribute’s value.

The [`attr`] signifies an attribute and matches any elements with a given attribute name, such as `a[title]`.

The `[attr=”value”]` refers that the attribute has this exact `value` and matches all elements with a given attribute name (for example, `attr`) with a value that’s exactly the `value` specified (the string inside the quotes). Take `a[href="https://www.google.com"]`, for example:

Learn how to work with elements based on HTML attributes.

Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Using Attribute Selectors

Using attribute selectors

Types of attribute selectors