CSS

  • CSS Curriculum: From Basics to Advanced Concepts (4 Weeks)
  • This CSS curriculum is designed to guide students from the fundamentals of CSS to more advanced techniques within four weeks. It combines theoretical knowledge with practical examples, assignments, and assessments to reinforce learning. Each module builds upon the previous one, ensuring a progressive understanding of CSS.
  • Week 1: Introduction to CSS & Basic Concepts
  • Module 1: Introduction to CSS
  • Objectives: Understand the role and structure of CSS in web development.
  • Topics Covered:
    1. What is CSS?
    2. CSS Syntax and Selectors
    3. Inline, Internal, and External CSS
    4. Applying CSS to HTML
  • Practical Example:
    Create an HTML file and apply CSS using inline, internal, and external methods to style the text.
  • Assignment:
    Create a basic webpage with a header, paragraph, and list, and style them using CSS.
  • Q&A Example:
    • Q1: What is the difference between inline and external CSS?
    • A1: Inline CSS is written directly in the HTML element using the style attribute, while external CSS is placed in a separate .css file linked to the HTML.
  • Module 2: CSS Selectors & Units
  • Objectives: Learn to use various selectors and units for precise styling.
  • Topics Covered:
    1. Basic Selectors (type, class, ID)
    2. Grouping and Universal Selectors
    3. Descendant, Child, and Sibling Selectors
    4. CSS Units (px, em, rem, %, vh, vw)
  • Practical Example:
    Style elements using different selectors and experiment with various units for dimensions and fonts.
  • Assignment:
    Create a navigation bar and use descendant selectors to style nested list items.
  • Q&A Example:
    • Q2: What is the difference between em and rem units?
    • A2: em is relative to the font size of the parent element, while rem is relative to the root element’s font size.
  • Week 2: Intermediate Styling Techniques
  • Module 3: Styling Text and Fonts
  • Objectives: Understand how to control text appearance and typography.
  • Topics Covered:
    1. Font Properties (font-family, font-size, font-weight, font-style)
    2. Text Properties (color, alignment, decoration, line-height, letter-spacing)
    3. Google Fonts & Web Safe Fonts
  • Practical Example:
    Style a block of text using custom fonts from Google Fonts and experiment with various text properties.
  • Assignment:
    Create a blog post layout and style the headings, paragraphs, and links.
  • Q&A Example:
    • Q3: How do you import Google Fonts into a CSS file?
    • A3: You can import Google Fonts by using an @import statement in your CSS or linking the font in the HTML <head>.