How does CSS differ from HTML in the context of web development?
HTML defines the structure and meaning of content on a webpage, such as headings, paragraphs, forms, and images. CSS controls the presentation of that content, including layout, colors, fonts, spacing, and responsiveness. In short, HTML is about what the content is, while CSS is about how it looks.
List the methods of including CSS in an HTML document and briefly describe each.
Describe the anatomy of a CSS rule.
A CSS rule consists of a selector that targets HTML elements and a declaration block enclosed in braces. The declaration block contains one or more declarations, each made up of a property and a value.
When might you want to use RGBA instead of RGB?
RGBA is used when transparency is needed. The additional alpha value allows control over opacity, which is useful for overlays, shadows, and layered UI elements.
How do Hex color values differ from RGB?
Hex colors and RGB represent colors using red, green, and blue components. Hex uses hexadecimal notation (e.g. `#ff0000`), while RGB uses decimal values (e.g. `rgb(255, 0, 0)`). Both define the same color information in different formats.
When might a developer prefer to use HSL over other color formats?
HSL is preferred when adjusting colors intuitively. It separates hue, saturation, and lightness, making it easier to create consistent color variations such as lighter or darker shades.
What are the primary text properties used in CSS to modify the appearance and layout of text?
Common text-related properties include `font-family`, `font-size`, `font-weight`, `line-height`, `color`, `text-align`, `text-decoration`, `letter-spacing`, `text-transform`, and `white-space`.
In what scenarios might it be beneficial to use vh or vw as a unit for font size?
Using `vh` or `vw` is helpful when text should scale relative to the viewport size, such as large hero headings or full-screen layouts that need to remain responsive across different screen sizes.
Explain the difference between em and rem units.
`em` units are relative to the font size of the parent element, which can cause values to compound when nested. `rem` units are relative to the root element’s font size, making them more predictable and consistent across a page.
If multiple font families are listed in the font-family property, how does the browser decide which one to display?
The browser checks the listed fonts from left to right and uses the first available font. If none of the specified fonts are available, it falls back to the generic font family provided at the end.