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

# CSS vendor prefixes

CSS **vendor prefixes** (or **browser prefixes**) are a way for browsers to provide access to new CSS features that aren’t yet considered to be stable.

We can use these newer CSS features with the browsers that support them by using prefixes instead of waiting for all browsers to catch up.

For example, before CSS transitions were fully supported, prefixes were still needed, as shown in the code snippet below:


```css
.element {
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
```

The commonly used prefixes are:

- `-webkit-` (Chrome, Safari, and Android)
- `-moz-` (Firefox)
- `-ms-` (Edge and Internet Explorer)
- `-o-` (Opera)

Writing prefixes manually has traditionally been a hassle. Because of this, projects like [Autoprefixer](https://github.com/postcss/autoprefixer) were designed to expedite the process by automatically adding any required prefixes. This tool generates prefixes based on the information provided from [canIuse](https://caniuse.com/).

Many modern frameworks (for example, create-react-app, the Vue cli, and postcss frameworks) use Autoprefixer out of the box, so remembering to add prefixes has become a thing of the past!

# Is prefixing still necessary?

Prefixing is a rapidly declining issue because browsers are getting better at supporting new features. Now, the rise of experimental CSS is encouraging client-side testing of new features via local browser settings instead of on production websites.

If you’re not using build tools on a project that needs to function on older browsers, it’s worth running CSS through Autoprefixer. Check out the documentation
 [https://autoprefixer.github.io/](https://autoprefixer.github.io/). Otherwise, you can rest assured that your CSS will be supported!


Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Vendor Prefixing

CSS vendor prefixes