learn-co-students/fe-css-fundamentals-london-web-071519

CSS Fundamentals

Overview

In this lesson we will learn about the fundamentals of CSS including syntax, formatting, selecting HTML elements to style, as well as font and color properties.

What's Covered in This Lesson

1. Explain the purpose of CSS
2. List and use various CSS syntax
3. Use various formats of CSS
4. Use CSS Selectors
5. Use font & color properties

Styling The Front-End

<iframe width="640" height="480" src="//www.youtube.com/embed/-k-1TU8qq0Q?rel=0" frameborder="0" allowfullscreen></iframe>

Note: Slides for this lecture video are provided in the resources at the bottom of this lesson.

Summary

• CSS allows us to style our HTML pages.
• CSS has three distinct formats, although external CSS is considered the best option for styling websites.
• CSS provides a wide range of selectors to select different elements. Get to know them all.
• The more specific a selector, the more authority it has.
• Some properties are inherited from a parent element and others are not.
• Colors can be specified using color names, hex, rgb, rgba, hsl, or hsla.
• There are a wide range of font properties to adjust your text.
• We can load web fonts that might not be available on the site visitor's computer by telling our CSS to load them from our server instead.
• Comments in CSS are written like /* this */.

Resources

• MDN - CSS Tutorials for Beginners
• MDN - CSS Property Reference
• MDN - CSS Inheritance
• Tuts Plus - 30 CSS selectors to Memorize
• Learn More Pseudo Selectors
• CSS3.info - Using Web Fonts
• Web Font Generator
• CSS Authority, Specificity
• CSS Performance & Organization, Best Practices
• CSS Validator
• CSS Diner Online Game
• Adobe - Color Scheme Tool
• CSS Tricks - HSLA

View CSS Fundamentals on Learn.co and start learning to code for free.