Why CSS Matters
CSS (Cascading Style Sheets) separates presentation from structure, making HTML documents more maintainable and flexible. It improves user experience with visually appealing designs and layouts, and enhances accessibility with consistent styling and typography.
Ways of Integrating CSS
- Inline styles (within HTML tags): quick and easy to apply, and they override other styles, but they mix presentation with structure and are difficult to maintain.
- Internal styles (within the
<style>tag): separate presentation from structure and are easy to maintain, but have limited scope and can be overridden by external styles. - External styles (in a separate CSS file): separate presentation from structure, are easy to maintain and reusable, but require an additional file and can be overridden by internal styles.
Styling HTML Content
CSS rules style HTML elements using three parts:
- Selectors (e.g.,
p,.class,#id) target specific HTML elements. - Properties (e.g.,
color,font-size,background) define the styles to apply. - Values (e.g.,
red,18px,#f2f2f2) specify the property values.
Types of CSS Selectors
- Element selectors (e.g.,
p,h1,img) - Class selectors (e.g.,
.header,.footer) - ID selectors (e.g.,
#logo,#nav) - Attribute selectors (e.g.,
[hreflang],[type="submit"]) - Pseudo-class selectors (e.g.,
:hover,:active,:focus) - Pseudo-element selectors (e.g.,
::before,::after,::first-line)
Common CSS Properties
- Colour properties:
color(text colour),background-color,border-color. - Typography properties:
font-size,font-family,font-style,font-weight. - Layout properties:
width,height,margin,padding,border,display.
CSS Values
- Colour values: hexadecimal (e.g.,
#ff0000), RGB (e.g.,rgb(255, 0, 0)), and HSL (e.g.,hsl(0, 100%, 50%)). - Length values: pixels (e.g.,
10px), percentages (e.g.,10%), em and rem units (e.g.,1em,1rem). - Other values: keywords (e.g.,
auto,none,inherit) and functions (e.g.,calc(),url()).
