Syllabus: Introduction to CSS Programming
Course Description:
This course provides a comprehensive introduction to Cascading Style Sheets (CSS), a
cornerstone technology for designing and styling web pages. By the end of the course, students
will be able to use CSS to enhance the visual appearance of HTML documents, create responsive
layouts, and manage web design with efficiency and creativity.
Course Objectives:
1. Understand the role of CSS in web development.
2. Learn how to apply styles to HTML elements using CSS.
3. Develop the ability to create responsive and visually appealing designs.
4. Master CSS layout techniques, selectors, and properties.
Course Outline:
Module 1: Introduction to CSS
What is CSS?
CSS vs. HTML
Types of CSS:
o Inline CSS
o Internal CSS
o External CSS
Anatomy of a CSS Rule: selector { property: value; }
Linking CSS to HTML (<link> and <style>)
Module 2: CSS Selectors and Properties
Basic Selectors:
o Type Selector (h1, p)
o Class Selector (.classname)
o ID Selector (#idname)
Group and Universal Selectors (*, grouping with commas)
Advanced Selectors:
o Attribute Selectors
o Pseudo-classes (:hover, :nth-child())
o Pseudo-elements (::before, ::after)
Module 3: CSS Colors and Typography
Color Models:
o Named Colors
o HEX, RGB, RGBA, HSL, HSLA
Typography:
o Fonts: font-family
o Sizes: font-size, rem, em, px, %
o Weight, Style, and Variant (font-weight, font-style)
o Line Spacing and Letter Spacing (line-height, letter-spacing)
Web-safe fonts and Google Fonts
Module 4: CSS Box Model
Components of the Box Model:
o Content
o Padding
o Border
o Margin
Border Properties: border-style, border-width, border-color
Box Sizing: box-sizing: border-box;
Background Properties: background-color, background-image, background-repeat,
background-position, background-size
Module 5: Layout and Positioning
Display Property: block, inline, inline-block, none
Positioning:
o Static
o Relative
o Absolute
o Fixed
o Sticky
Float and Clear
Flexbox Layout:
o Properties: display: flex;, justify-content, align-items, flex-wrap,
flex-direction
o Aligning and distributing items in a container
CSS Grid:
o Defining a grid container: display: grid;
o Grid-template-rows, columns, areas
o Placing items in the grid
Module 6: Styling Links, Lists, and Forms
Links:
o Pseudo-classes: :link, :visited, :hover, :active
o Customizing buttons with CSS
Lists:
o Styling Ordered and Unordered Lists
o Custom List Markers
Forms:
o Styling input fields, buttons, checkboxes, and dropdowns
o Adding focus and validation effects with :focus and :valid
Module 7: Responsive Design and Media Queries
What is Responsive Design?
Using Relative Units (%, em, rem, vh, vw)
Introduction to Media Queries:
o Syntax: @media
o Breakpoints for devices (mobile, tablet, desktop)
Fluid Grids and Flexible Images
Module 8: CSS Effects and Animations
Transitions:
o Syntax: transition-property, transition-duration, transition-timing-
function
o Hover effects
Transformations:
o Scaling, Rotating, Skewing, Translating
Animations:
o @keyframes syntax
o animation-name, animation-duration, animation-iteration-count
o Chaining animations
Module 9: CSS Best Practices
Organizing CSS files
Writing clean and maintainable CSS
Avoiding redundancy
CSS debugging techniques
Module 10: Final Project
Build a responsive, multi-page website using CSS and HTML.
o Apply CSS for layout, typography, colors, and responsive design.
o Include animations, media queries, and a cohesive design theme.
Assessment:
1. Quizzes: Weekly quizzes on CSS concepts (30%)
2. Assignments: Hands-on exercises for each module (30%)
3. Final Project: Comprehensive website design (40%)
References:
1. Mozilla Developer Network (MDN) Web Docs
2. W3Schools CSS Tutorials
3. Recommended Textbook: CSS: The Missing Manual by David Sawyer McFarland
Schedule:
Duration: 8 Weeks
Weekly Sessions: 2 hours/session (Lecture + Hands-on Practice)
Final Project Presentation: Week 9
This syllabus is designed to ensure students gain both theoretical knowledge and practical skills
to master CSS.
