Introduction to CSS

CASCADING STYLE SHEETS (CSS)
CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a web page written in HTML. CSS controls the layout, colors, fonts, spacing, and overall visual appearance of websites.

LEARNING OUTCOMES

  • • Improves website appearance
  • • Saves time by styling multiple pages at once
  • • Separates content from design
  • • Makes websites responsive and user-friendly

    • CSS Syntax

    CSS consists of selectors and declaration blocks. A selector is used to select the HTML element that you want to style. The declaration block contains one or more declarations written
    inside curly braces {}.
    Each declaration includes a property and a value, separated by a colon. Properties define what aspect of the element is being styled, such as color or font size. Values specify how the property should appear, like red for color or 16px for font size.

    TYPE OF CSS

  • • INLINE CSS – Applied directly inside HTML elements
  • • INTERNAL CSS – Written inside style tag in the HTML section
  • • EXTERNAL CSS– Written in a seperate css file and linked to HTML

    • CSS DOCUMENT STRUCTURE

    A CSS document is usually saved with a .css file extension and contains rules that define how HTML elements should look. The structure of a CSS document is made up of selectors, declaration blocks, properties, and values. Each CSS rule starts with a selector, which targets the HTML element to be styled. The selector is followed by a declaration block enclosed in curly braces { }. Inside the declaration block are property–value pairs, each ending with a semicolon. A single CSS file can contain multiple rules to style different elements on a webpage.

    CORE STRUCTURE COMPONENTS

  • • Selector
  • • Decleration Block
  • • Property
  • • Value
  • • Decleration

    • Unit 3: Text and Content Elements

    Text and content CSS elements are used to control the appearance and readability of text on a web page. They help define how text looks, how it is aligned, and how content is displayed inside elements. These properties improve the visual structure and user experience of a website.

    COMMON TEXT ELEMENTS

  • • Color
  • • Font size
  • • Font family
  • • Font weight
  • • Text align
  • • Text decoration
  • • Text transform
  • • Line height
  • • Letter spacing
  • • Word spacing

    • hover any card → interactive glow, shift, and icons respond

    interactive ✦