CSS Basics

CSS Colors

CSS allows you to apply color to text and backgrounds using color names, HEX codes, RGB, RGBA, and HSL values.

<p style="color: red;">This is red text.</p>
<p style="color: #00bcd4;">This text is using HEX color.</p>
<p style="color: rgb(0, 128, 0);">This text is using RGB color.</p>

This is red text.

This text is using HEX color.

This text is using RGB color.

CSS Backgrounds

You can apply background color, images, position, repeat, and more using the background properties.

<div style="background-color: lightblue; padding: 20px;">
  Background Color Example
</div>
Background Color Example

CSS Borders

Use borders to outline HTML elements. You can set width, style, and color.

<div style="border: 2px solid green; padding: 10px;">
  This div has a green border.
</div>
This div has a green border.

CSS Margins and Padding

Margin is the space outside the element's border.
Padding is the space between the content and the element's border.

<div style="background-color: #eee; margin: 20px; padding: 10px;">
  This div has margin and padding.
</div>
This div has margin and padding.

CSS Width, Height, and Box Model

The box model consists of:

  • Content
  • Padding
  • Border
  • Margin
You can control an element’s dimensions using width and height.

<div style="width: 200px; height: 100px; padding: 10px; border: 2px solid #333; margin: 20px; background-color: #fafafa;">
  Box Model Example
</div>
Box Model Example

If you have any questions, feel free to ask. Thank you for reading!

Thankyou!