🎨

Beginner's Guide to CSS Basics

Oct 10, 2024

CSS Crash Course

Introduction

  • This crash course is designed for absolute beginners.
  • Continuation from HTML crash course (Link available in the description).
  • CSS is more artistic than HTML with multiple ways to achieve the same result.
  • Not covering advanced topics like Flexbox or animations.
  • Essential parts of CSS will be covered.

Basics of CSS

  • CSS stands for Cascading Style Sheets.
  • Not a programming language, but a style sheet language.
  • Used for website layout and design, often alongside HTML.
  • CSS can be extended with technologies like SASS and LESS (allows use of variables and conditionals).

Setup

  • Requires a text editor and a browser.
  • Recommended editors: Sublime Text, Atom, Visual Studio Code, Notepad++, Text Mate.

Methods of Using CSS

  1. Inline CSS

    • Adding a style attribute to the HTML tag.
    • Bad practice as it mixes presentation with styling.

  2. Internal CSS

    • Using <style> tags within the <head> of the HTML document.
    • Better separation than inline, but styles are limited to that file.

  3. External CSS

    • Recommended method.
    • Use a separate .css file linked to HTML.
    • Allows reuse of styles across different HTML files.

CSS Syntax

  • CSS selectors are followed by declarations in curly braces.
  • Declarations have properties and values (e.g., background-color: yellow;).

Colors in CSS

  • Color Names: e.g., red, blue.
  • Hexadecimal: e.g., #FFFFFF for white.
  • RGB Values: rgb(0,0,255) for blue.

Fonts

  • Web safe fonts: Arial, Verdana, Tahoma, etc.
  • font-family, font-size, font-weight, etc.

Margin and Padding

  • Part of the CSS Box Model.
  • Margin: Space outside the element's border.
  • Padding: Space inside the element's border.

Borders

  • Can specify size, color, and style (e.g., 1px solid red).
  • Shorthand: border: 1px solid red;.

Text Formatting

  • Properties include font-style, text-decoration, text-transform.

Lists and Links

  • Customizing list styles with list-style-type.
  • Link states: normal, hover, active, visited.

Forms

  • Styling form inputs and control appearance.
  • Use of classes for consistent button styling.

Floating and Alignment

  • Using float to arrange elements horizontally.
  • Clearing floats with a clear class.

Positioning

  • CSS position properties: static, relative, absolute, fixed.

Backgrounds

  • Using images as backgrounds.
  • Properties like background-position and background-repeat.

Pseudo Classes

  • Targeting specific items like the first or last child.
  • Using nth-child for targeting specific indexed elements.

Responsive Design

  • Using media queries for responsive behavior.

Conclusion

  • Overview of essential CSS knowledge.
  • Encouragement to experiment further with CSS and explore advanced topics like Flexbox.

Full transcript