CSS Selector Specificity and Inheritance Quiz

Introduction to CSS3

• CSS (Cascading Style Sheets) is a language for styling HTML elements.
• It controls how elements are displayed (styling, layout, design, animation, changing fonts, grid system).
• CSS description: http://www.w3.org/Style
• CSS controls fonts, text, colors, backgrounds, sizes, borders, spacing, positioning, and visual effects for tables and lists.
• CSS code validator: http://jigsaw.w3.org/css-validator

CSS Advantages

• Better control over typography and page layout (text, colors, size, positioning, line/letter spacing, indents, page layout)
• Styles can be separated from structure.
• Can be associated with multiple web pages.
• Documents potentially smaller.
• Easier site maintenance.
• CSS3 features supported by many browsers: http://caniuse.com/#search=css3, https://www.quirksmode.org/css/contents.html

Incorporating CSS

• CSS can be included inline (coded in HTML tag's style attribute), internally (embedded within a style block in the head section of an HTML page), or externally (coded in a separate file linked through an HTML link element).
• Imported styles can also import CSS into embedded styles or external style sheets using @import directive.

Inline Style

• Styles are contained within the start tag of an HTML element.
• Used to style individual elements.
• Use sparingly to keep styles separate from HTML content.
• Example: <h1 style="color:blue;">Header</h1>

Internal Style Sheet

• Styles are contained within a <style> tag in the header section of an HTML document.
• For simple web pages with unique styles.
• Example:

<style>
h1 {color:red;}
#firstHeader {color:blue;}
</style>

External Style Sheet

• Separate CSS file linked at the beginning of the HTML document.
• Simplifies maintaining styles across multiple web pages.
• Example: <link rel="stylesheet" type="text/css" href="style.css">

Selectors and Properties

• Selectors grab and manipulate HTML nodes.
• Methods for selecting elements (e.g., element type, ID, class).
• CSS selector examples:

p { property: value; property: value; } // Applies to all <p> elements.
#firstHeader { property: value; property: value; } // Applies to element with id="firstHeader".
.first { property: value; property: value; } // Applies to elements with class="first"

• All elements with the specified type, ID, or class will have the defined property values.

Colouring and Formatting

• CSS syntax allows various color configuration methods.
• Color names, hexadecimal values, hexadecimal shorthand values, decimal values (RGB triplet), HSL—Hue Saturation Lightness.
• Resources for configuring colors: http://www.w3.org/TR/css3-color/#hsl-color and https://meyerweb.com/eric/css/colors/ for different notations, https://color.adobe.com/create.

Text Manipulation & Fonts

• CSS Text Properties:
  • font-family: Sets the typeface.
  • font-size: Sets the font size.
  • font-weight: Controls boldness.
  • font-style: Configures italics.
  • line-height: Modifies line height.
  • text-align: Controls text alignment.
  • text-decoration: Adds decorations (underline, overline, etc.).
  • text-indent: Controls first-line indentation.
  • letter-spacing: Sets the space between characters.
  • word-spacing: Sets space between words.
  • text-shadow: Adds shadows.
  • text-transform: Capitalization (capitalize, uppercase, lower case).

CSS | Font-family Property

• configures the font typeface
• Browser uses installed fonts, substituting if missing.
• Create a list of multiple fonts in your CSS for a default fallback.
• Example: p { font-family: Arial, Helvetica, sans-serif; }

CSS | Font-size

• Relative (e.g., em, percentage-based).
• Absolute (e.g., pt, px).
• font-size: 100% and font-size: 1em are the same.

CSS3 | Text-shadow Property

• Adds depth/dimension to text.
• horizontal offset, vertical offset, and blur radius are configurable using pixel values, and positive numbers typically add shadow to the right/below. -Example:

text-shadow: 3px 2px 5px #666;

Specificity and When to Use Selectors

• Style rules' precedence order determined by declaration location and specificity.
• Importance, selector specificity, cascading, and inheritance.
• Defining selectors for different elements using IDs, classes, tags, and attributes to ensure proper targeted effect.

CSS | Cascade, Specificity, and Inheritance

• Inheritance: Styles from parent elements flow down to children (unless overridden by a child).
• Specificity: Selector complexity determines a selector's power to overwrite others. Components a, b, c, and d are calculated. Component "a" is the most distinguishing.
• Cascade: Defines the order of selectors. Later selectors typically overwrite earlier ones with similar specificity.

Advanced Selectors

• General selector (*), attribute selectors ([attribute="value"]), child node selectors (>), descendant selectors (space), general sibling selectors (~), and more specific selectors for controlling element styles.

Pseudoselectors

• Define selections based on specific states or positions (e.g., :hover, :first-child, :nth-child, :only-child—for controlling elements according to their position (first, last, middle, and others) relative to each other on the HTML structure).

Web Page Layout

• Box Model: A fundamental approach for designing web page elements (width, height, padding, border, and margin).
• Fluid and Fixed Layouts, and methods for positioning elements on a page as well as resizing and adjusting them on the page as well as creating symmetrical and asymmetrical page design (top, right, bottom, left, z-index, and position).
• CSS Positioning.

CSS3 Flexible Box Layout

• Flexbox: A layout system used for controlling the alignment, sizing, and order of elements using properties.
• Configure and adjust flex container/items (images, links) using flex properties such as display, flex-direction, flex-wrap, justify-content, and align-items.

CSS3 Flexible Box Layout (2)

• Define flex items based on modifying properties such as order positioning, flex-basis controlling the dimensions to customize the size of each flex item, flex-grow and flex-shrink controlling the growth and shrinking of flex items/containers based on the free available space.
• Align individual items properly using the align-self property.

CSS3 Grid Layout

• Grid Layout: A 2D system for arranging elements in rows and columns in the web page. Using properties like grid-template-rows, grid-template-columns, justify-content, align-content, and grid-gap to control columns, rows, and spacing between them.
• Changing grid item sizes (row:x/y, column: a/b, and or grid-row, and grid-column elements).

Flex Box vs. GRID

• Flexbox mainly focuses on width, while Grid controls both width and height.
• Grid provides more layout tools.

Working with Variables in CSS

• :root selector defines CSS variables accessible throughout the document.
• Use var(--variable, default_value) to access these variables.

Test your knowledge on CSS selector specificity, the impact of the '!important' rule, and the concept of inheritance in styles. This quiz delves into various aspects of CSS including fluid layouts and pseudo-classes, helping you strengthen your understanding of styling web elements.