CSS Fundamentals

Study Notes

CSS (Cascading Style Sheets) is not a programming language, but a styling language used for modifying the appearance of web page content.
CSS syntax includes a selector, opening and closing curly brackets, and property-value pairs.
Selectors include element, class, and id selectors. Element selectors target HTML elements, class selectors target elements based on their class attribute, and id selectors target unique HTML elements.
Selectors can be combined to create more specific rules. Multiple selectors can be combined without spacing to target elements with specific combinations of classes or IDs. Ancestor selectors can be used to target elements based on their relationship to an ancestor element.
CSS styles can be loaded into an HTML page using inline styles, the style tag, or external CSS files. Inline styles are the least optimal method as they mix presentation and content in HTML and may slow down page loading. External CSS files are the best way to separate presentation and content, allow for reusable styles, and improve page loading times.
CSS properties define various visual aspects of HTML elements such as color, font size, and width.
The ability to apply styles in multiple ways is a reason why some people love and others hate CSS.
CSS is used in conjunction with HTML to create visually appealing web pages.- CSS in the styles.css file is used to change the color of an h1 tag to green.
The h1 tag has a default color of blue due to the last defined style.
CSS applies styles based on the specificity of the selector, with id selectors having the highest priority.
The h1 tag has an id, a class, and an element selector.
The class selector "blue" with a color property of blue has a lower specificity than the h1 selector.
The h1 tag's color changes to blue because the h1 selector is defined below the import of the styles.css file.
The h1 tag's color changes to red when the h1 selector is moved above the "blue" class selector in the styles.css file.
CSS uses the cascading property to combine and overwrite styles.
CSS uses hexadecimal colors to specify more specific shades of colors.
Hexadecimal colors consist of three sets of two digits that represent red, green, and blue.
RGB is another way to define colors in CSS.
RGB colors consist of three sets of values that represent red, green, and blue.
RGB colors can be made partially transparent by using the rgba format.
HSL is another way to define colors in CSS.
HSL stands for hue, saturation, and lightness.
HSL colors consist of three sets of values that represent hue, saturation, and lightness.
HSL colors can be made partially transparent by using the hsla format.
The box model in CSS includes the content, padding, border, and margin.
The padding is the space between the content and the border.
The margin is the space outside of the border.
The box model helps to space out elements and add spacing around them.

Description

Test your knowledge on cascading style sheets (CSS) which is used to style web page content. Learn about CSS selectors, properties, specificity, and the box model. Explore how CSS can be used to change colors, define shades, and create visually appealing web pages.