CSS | Notion

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:
- Introduction to CSS properties that define the visual appearance of elements (e.g., color, background-color, font-size, width).
Units:
- Explanation of different CSS 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:
- Fundamental concept in CSS describing the rectangular boxes that are generated for elements in the document tree.
- Components: content, padding, border, margin. (Diagram: Visual representation of the CSS Box Model).
Specificity:
- Rules that determine which CSS rule applies to an element when multiple rules target the same element.
- Specificity hierarchy: Inline styles > IDs > Classes/Attribute Selectors/Pseudo-classes > Element Selectors/Pseudo-elements.
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:
- HEX: Six-digit hexadecimal representation of colors (e.g., #FF0000 for red).
- RGB: Red, Green, Blue values (0-255) (e.g., rgb(255, 0, 0) for red).
- RGBA: Red, Green, Blue, Alpha (opacity) values (e.g., rgba(255, 0, 0, 0.5) for semi-transparent red).
- HSL: Hue (0-360), Saturation (0-100%), Lightness (0-100%) (e.g., hsl(0, 100%, 50%) for red).
- HSLA: Hue, Saturation, Lightness, Alpha values.
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:
- Common fonts that are generally available across most operating systems (e.g., Arial, Times New Roman, Courier New).
Margin:
- Space around the outside of an element.
Padding:
- Space inside the element, between the content and the border.
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.