Module 1: CSS Basics - The Foundation of Styling
Selectors:
Explanation of CSS selectors to target HTML elements.
Element Selectors: Targeting elements by their tag name (e.g., p, h1, div).
CSS
p { color: #333; }
Class Selectors: Targeting elements with a specific class attribute (e.g., .container, .button).
CSS
.container { width: 960px; margin: 0 auto; }
ID Selectors: Targeting elements with a specific ID attribute (e.g., #header, #main-nav). Use sparingly due to high specificity.
CSS
#header { background-color: #f0f0f0; }
Attribute Selectors: Targeting elements based on their attributes (e.g., [type="text"], a[href*="example"]).
CSS
input[type="text"] { border: 1px solid #ccc; }
Pseudo-classes: Targeting elements based on their state (e.g., :hover, :focus, :active).
CSS
button:hover { background-color: #007bff; cursor: pointer; }
Pseudo-elements: Styling specific parts of an element (e.g., ::before, ::after, ::first-letter).
CSS
p::first-letter { font-size: 1.5em; font-weight: bold; }
Combinators: Combining selectors to target specific elements within the DOM (e.g., descendant, child, sibling). CSS
.container p { /* Descendant selector */ line-height: 1.5; }
Properties:
color, background-color, font-size, width).Units:
px (pixels): Absolute unit, often used for borders and fine-tuning.% (percentage): Relative to the parent element's size.em: Relative to the font-size of the element. Useful for component-level scaling.rem (root em): Relative to the font-size of the root (html) element. Useful for overall layout scaling.Inline, Internal, External Stylesheets:
Inline Styles: Applying styles directly to HTML elements using the style attribute (generally discouraged for maintainability).
HTML
<p style="color: green;">This text is green.</p>
Internal Stylesheets: Embedding CSS within the <style> tags in the <head> of the HTML document (suitable for small projects or specific page styles).
HTML
<!DOCTYPE html> <html> <head> <style> /* CSS rules here */ </style> </head> <body> </body> </html>
External Stylesheets: Linking to separate .css files using the <link> tag in the <head> (best practice for larger projects and maintainability).
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> </body> </html>
Box Model:
content, padding, border, margin. (Diagram: Visual representation of the CSS Box Model).Specificity:
Challenge: Create a simple HTML page with headings, paragraphs, and links. Style these elements using each of the three stylesheet methods. Experiment with different selectors to target specific elements.
Module 2: Colors, Fonts & Layout Basics - Visual Foundation
Color Formats:
#FF0000 for red).rgb(255, 0, 0) for red).rgba(255, 0, 0, 0.5) for semi-transparent red).hsl(0, 100%, 50%) for red).Font-family:
Specifying the font to be used for text. Use a fallback font stack for better compatibility. CSS
body { font-family: 'Arial', sans-serif; }
Google Fonts:
How to import and use fonts from the Google Fonts library by linking to them in the <head> of your HTML.
HTMLCSS
<link rel="preconnect" href="<https://fonts.googleapis.com>"> <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin> <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
body { font-family: 'Roboto', sans-serif; }
Web-Safe Fonts:
Margin:
Padding:
Border:
Line around the element's content and padding. CSS
.box { margin: 10px; padding: 20px; border: 2px solid blue; }
Width and Height:
Setting the width and height of an element. Understand the difference between content-box (default) and border-box (often preferred for easier layout).
CSS
`.image { width: 300px; height: auto; /* Maintain aspect ratio */ }
.card { width: 50%; /* Relative to parent / box-sizing: border-box; / Include padding and border in width/height */ }`
Challenge: Style a simple webpage with a header, main content area, and footer. Experiment with different color combinations using HEX, RGB, and HSL. Use Google Fonts for your typography. Apply margins, paddings, and borders to different elements to control spacing and visual separation.
Module 3: Display & Positioning - Controlling Element Flow
display Property:
block: Element takes up the full width available and starts on a new line (e.g., div, p, h1).inline: Element only takes up as much width as necessary and does not force line breaks (e.g., span, a, img).inline-block: Element flows like inline but respects block-level properties like width and height.none: Element is completely removed from the document flow and not displayed.