كورس css كامل في فيديو واحد | احترف و تعلم كل شئ عن css

Main ideas & lessons

1. Purpose of CSS

   • CSS is introduced as the language that formats the HTML structure.
   • HTML builds the structure (elements/placement), while CSS controls presentation, such as:
     • colors
     • shapes/sizes
     • layout organization and planning
   • Example concept: removing CSS leaves “structure only”; adding CSS restores styling and layout.

2. Course structure & learning approach

   • The course is presented as complete and comprehensive (God willing).
   • CSS is broken into topics, with each topic covered in detail through lessons.
   • After each lesson, students are encouraged to:
     • take a test (via a link in the description)
     • check understanding and share results for motivation.

3. Setting up the coding environment

   • Create a website folder on your computer.
   • Open that folder in a code editor (Visual Studio Code is mentioned, but any editor is allowed).
   • Create at least:
     • an index.html (HTML file)
     • later, CSS files such as style.css.

4. Where CSS can be written (3 methods)

   • The video explicitly lists three ways to apply CSS:

A) Internal CSS

  - Put CSS **inside the HTML file** within:
      - `<head>`
      - `<style> ... </style>`
  - CSS syntax concept emphasized:
      - **selector** (e.g., `h2`, `p`)
      - **properties** in curly braces `{ }`
      - **property-value pairs** with `:` (colon)
      - semicolon `;` to separate properties

B) External CSS

  - Put CSS in a **separate file**, e.g.:
      - `style.css`
  - Link it from HTML using:
      - `<link ...>` in the `<head>`
  - Key idea: correct **file path** matters (same folder vs subfolder requires different paths).

C) Inline CSS (called “online CSS” in the subtitles)

  - Write CSS directly inside an element using the `style` attribute.
  - Example idea: target a specific tag and set color/font-size directly in that tag.

1. CSS selectors (foundation of targeting elements)
   • The course focuses first on basic selectors, later mentioning a more advanced selector section.

Selector types explained conceptually

  - **Tag selector (element selector)**: `h2 { ... }` applies to all `h2` elements.
  - **Group selectors**: use comma `,` to apply the same styles to multiple tag types.
  - **Class selector**
      - class attribute identifies specific elements
      - syntax uses a leading dot: `.className { ... }`
      - applies to any element with that class
  - **ID selector**
      - syntax uses `#idName { ... }`
      - targets the specific element with that ID
  - **Universal selector `*`**
      - applies styles to **all elements**

1. Combinators & hierarchy (“descendants / lineage”)

   • Uses the concept of HTML structure:
     • ancestor (parent) → descendant (child within it) → deeper descendants
   • Explains matching:
     • descendant (space in selector)
     • direct child (using > combinator)
   • Demonstrates that selectors can target:
     • “any level inside” vs “only immediate child”.

2. Box Model (core CSS model)

   • Every HTML element is treated as a box composed of:
     • content
     • padding (internal spacing between content and border)
     • border (outline/thickness)
     • margin (external spacing separating elements)
   • Teaches border and spacing basics:
     • border-style (e.g., solid, dashed, dotted, double)
     • border-width (thickness, e.g., pixels)
     • border-color
     • shorthand border: border: width style color;

3. Width/height & spacing

   • Demonstrates controlling:
     • width
     • height
   • Introduces padding shorthand and direction-specific forms:
     • padding-top, padding-right, padding-bottom, padding-left
   • Shorthand rules:
     • 1 value → all sides
     • 2 values → vertical | horizontal
     • 4 values → top | right | bottom | left (clockwise)
   • Similar shorthand logic applies for margin.

4. Centering with margin: auto

   • Explains:
     • margin-left: auto; margin-right: auto; can center horizontally.
   • Important limitation mentioned:
     • auto centering primarily works for horizontal centering, not vertical.
   • Conceptual reason:
     • the browser distributes remaining space so left and right become equal.

5. Why percentage behaves differently for width vs height

   • Key rule:
     • width % depends on parent width (browser/container)
     • height % is often not meaningful unless the parent has an explicit height, because height may depend on content (effectively “auto/auto-sized”).

6. Min/max constraints

   • Teaches differences between:
     • width / min-width / max-width
     • height / min-height / max-height
   • Concepts:
     • min = lowest allowed
     • max = highest allowed
     • responsive shrinking/growing depends on viewport and constraints.

7. Border-radius

   • Teaches rounding corners using:
     • one value (all corners)
     • two values (top-left & bottom-right share one radius; top-right & bottom-left share the other)
     • four values (each corner separately, in order)
   • Notes:
     • circles are possible when width ≈ height and radius relates to that.

8. Block vs inline elements

   • Fundamental rule:
     • block elements: typically take full available width (100% of parent)
     • inline elements: take only content width; do not start on new lines by default
   • How to identify:
     • browser “Inspect” / devtools and the computed display behavior.

9. Text alignment and direction

   • text-align aligns text within a block container.
   • Inline elements don’t necessarily show alignment behavior unless layout changes (emphasized in the video).
   • direction property:
     • default LTR
     • can set RTL for right-to-left languages.

10. TextTransform / spacing / decoration

    • text-transform: uppercase/lowercase/capitalize behavior.
    • Text spacing properties:
      • letter-spacing
      • word-spacing
      • line-height
    • text-decoration:
      • underline, overline, line-through
      • color and style variants (solid/dashed/dotted)
      • none removes decoration
    • text-shadow:
      • multiple values: horizontal offset, vertical offset, blur radius, color
      • supports multiple shadows separated by commas.

11. Box-shadow

    • Similar to text-shadow but for elements (e.g., div boxes).
    • Values described:
      • horizontal offset
      • vertical offset
      • blur
      • spread (mentioned as additional control)
      • color
    • Mentions inset concept (shadow inside vs outside).

12. Text wrapping and whitespace (start of a new section)

    • Why text breaks into multiple lines:
      • browser wraps based on container width.
    • Introduces white-space control:
      • normal wrapping (default)
      • no-wrap (prevents wrapping)
    • Special note:
      • extremely long single words may still overflow unless using word-breaking strategy.
    • Introduces word-break (subtitle mentions “Word rap”).

13. Whitespace handling modes

    • Discusses white-space values conceptually, such as:
      • how spaces/newlines are shown vs collapsed
      • preserving newlines with some modes
    • Use cases:
      • pre-wrap-like behavior vs pre-line-like behavior
      • newline rendering differs by value.

14. Font basics: font-family, font-size, font-style, font-weight

    • font-family
      • system fonts vs fallback fonts
      • “web-safe fonts” vs backup fonts
      • using Google Fonts via <link> or @import (two methods)
      • quotation marks in font-family when names contain spaces
    • font-size
      • default for normal text often described as 16px
      • uses units (px, em, %, etc.)
    • font-style
      • normal vs italic/oblique-like slant
    • font-weight
      • numeric values (100–900) and keywords (normal, bold, bolder/lighter)
      • briefly mentions inheritance: children inherit some font settings from parents unless overridden.

15. Shorthand: font property

    • font is a shorthand for multiple font-related properties.
    • Subtitle describes parts included in one line:
      • font-style, font-variant (small-caps), font-weight, font-size, line-height, font-family
    • Shorthand reduces many lines into one.

16. Backgrounds

    • Background as a major visual feature.
    • Background color:
      • named colors, RGB/hex, etc.
    • Background image:
      • background-image: url(...)
      • repeats by default if the image is smaller than the element
    • Background repeat options:
      • repeat, no-repeat
      • repeat-x, repeat-y

17. Background attachment & positioning & sizing

    • background-attachment
      • scroll behavior vs fixed behavior (image stays fixed while scrolling)
    • background-position
      • numeric offsets (x/y) and keywords (top-right, center, etc.)
    • background-size
      • percentages and pixel dimensions
      • cover vs contain
        • cover: fills container (may crop)
        • contain: fits inside without cropping (may leave empty space)

18. background-origin

    • Connects background start point to box model areas:
      • content-box vs padding-box vs border-box
    • Explains that padding/border affect where the background is drawn.

19. Gradients

    • Linear gradients:
      • defined using direction and multiple color stops with percentages/lengths
      • stop order and direction determine gradient flow
    • Radial gradients:
      • oval shape by default
      • circle makes it circular
      • supports size adjustments (e.g., 200px+) and positioning with keywords

20. Float section (intro concept)

    • Defines float as making elements “float” left or right.
    • Demonstrates:
      • multiple boxes can align horizontally via float
      • floats are removed from normal document flow (parent may collapse / following content can wrap around them)
    • Introduces clearing:
      • clear property on an element (clear both/left/right) to prevent overlap with floated elements.

21. Overflow (beginning)

    • Introduces:
      • when content exceeds the set width/height of a box, overflow occurs.
    • Notes:
      • overflow is a “real problem” affecting layout.
    • (Subtitle cuts off before listing overflow options, but the topic is identified.)

---

Speakers / sources featured

• Narrator/Instructor: an unnamed teacher (referred to repeatedly as “teacher/Abdul Rahman” in the subtitles; likely the instructor’s name is Abdul Rahman).
• W3Schools: referenced for CSS behavior (e.g., margin:auto explanation).
• Google Fonts: referenced for font integration (link method and import method).