There's a lot to learn about CSS. But at its most basic, CSS targets HTML elements and applies styles to them. Get started with learning all about simple selectors.
- [Instructor] There are many CSS style properties and different ways to apply them. But at it's most basic, CSS is just selecting the HTML element and applying a style to it. Let's start with taking a look at type selectors. Type selectors match the HTML by using the element name. Without the angled brackets. For example, to apply styles to an h1 tag, h1 would be the selector. The styles will then be applied to all elements that match this selector pattern.
But what if you wanted to apply the style to just one or two h1 elements? When type selectors are too general there are two attributes that can be used to attach extra information. Class and ID. Remember, attributes always follow the same syntax. Attribute name equals value in quotes with no spaces. They can be added in any HTML element and always in the opening HTML tag. Class attribute values can be named anything and defined by you.
The class can be used multiple times on the same page to apply the style to any HTML element that contains the attribute. The value is then used as the selector, starting with the leading period to distinguish it from the type selector. Classes are useful for creating styles that can be reused throughout the document. Just by adding the class name to a specific element. ID attributes are similar to class because it can also be given any value and at it's any element.
However, ID's can only be used once per page and must have a unique value. ID selectors can never match more than one element in a single document. In CSS ID selectors are denoted by a leading number symbol. When choosing a class value, do not use spaces. Because theses spaces actually indicate that there are multiple classes. You can apply different styles to each class and they will be independent of each other.
Dot style refers to just the style class and dot name refers to just name. If you combine them like in this third example, with no spaces, this style will only be applied if the attribute contains both class names. Multiple ID's cannot be used in the same HTML element.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property