Skip to main content
Advertisement

CSS3 Basics and Styling

CSS (Cascading Style Sheets) is a language used to apply design to HTML elements.

1. Ways to Apply CSS​

  1. Inline Style: Written directly within a tag (not recommended).

    <h1 style="color: blue;">Header</h1>

  2. Internal Style Sheet: Using <style> tags inside the <head>.

  3. External Style Sheet: A separate .css file (recommended).

    <link rel="stylesheet" href="style.css">

2. Selectors​

Used to select specific elements and apply styles to them.

  • Universal Selector: * { ... }
  • Tag Selector: h1 { ... }
  • Class Selector: .className { ... }
  • ID Selector: #idName { ... }

3. Box Model​

Every HTML element is considered a rectangular box.

  • Content: The actual area containing text or images.
  • Padding: The inner space between the border and the content.
  • Border: The border itself.
  • Margin: The outer space outside the border.
.box {
    width: 300px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
}

4. Color and Text Styles​

  • color: Text color.
  • background-color: Background color.
  • font-size: Text size.
  • font-weight: Text weight (boldness).
  • text-align: Text alignment (left, center, right).

In the next section, we'll learn about layout techniques to position elements where you want them.

Advertisement
Advertisement