Basics of CSS

Home | Blog | Computer Programming | Basics of CSS

Published:

—

by

Philip

CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML or XML. It controls the visual appearance of web pages, such as layouts, colors, fonts, and spacing. Understanding CSS basics is essential for web design and development. Let’s go over the key concepts:

1. CSS Syntax

CSS consists of rules that define how elements should be styled. Each rule contains a selector and a declaration block:

   selector {
     property: value;
   }
  • Selector: Targets the HTML elements you want to style (e.g., p, .class, #id).
  • Property: The visual aspect you want to change (e.g., color, font-size, margin).
  • Value: The specific style you want to apply (e.g., red, 16px, 10px). Example:
   h1 {
     color: blue;
     font-size: 24px;
   }

2. Selectors

CSS selectors target specific HTML elements to apply styles. Some common types of selectors are:

  • Type Selector: Targets all elements of a particular type (e.g., h1, p, div).
  • Class Selector: Targets elements with a specific class attribute (e.g., .container).
  • ID Selector: Targets an element with a specific ID (e.g., #header).
  • Descendant Selector: Targets elements nested inside others (e.g., div p targets all p elements inside div elements). Example of combined selectors:
   #main-content .text { color: green; }

3. Colors and Backgrounds

CSS allows you to set colors for text, backgrounds, and borders.

Text Color:
color: red;
Background Color:
background-color: yellow;
Border:
border: 1px solid black;

4. Box Model

The box model describes how elements are structured and spaced in a web page.

  • Content: The actual content of the box (like text or images).
  • Padding: Space between the content and the border.
  • Border: A line surrounding the padding.
  • Margin: Space outside the border, separating the element from others.

Example:

   div {
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }

5. Text Styling

CSS provides various ways to style text, including:

Font Family: Sets the type of font.

font-family: Arial, sans-serif;

Font Size: Controls the size of the text.

font-size: 16px;

Text Align: Aligns text (left, right, center).

text-align: center;

6. Layout (Positioning)

CSS offers multiple techniques for controlling layout, including:

Display: Defines how elements are displayed (block, inline, flex, etc.).

display: block; display: flex;

Position: Controls how elements are positioned (static, relative, absolute, fixed).

position: absolute; top: 10px; left: 20px;

Float: Allows elements to float next to each other (left, right).

float: left;

7. Responsive Design

CSS is used to create responsive layouts that adjust to different screen sizes:

  • Media Queries: Apply styles based on the screen size or device type.
@media (max-width: 600px) { body { background-color: lightblue; } }

8. CSS Units

CSS uses various units to define lengths, sizes, and spacing:

  • Absolute Units: px (pixels), pt (points), cm (centimeters).
  • Relative Units: em, rem, % (relative to the parent element).

9. CSS Cascading and Specificity

  • Cascading: If multiple styles apply to an element, the most specific rule takes precedence. Rules that are defined later in the stylesheet can override earlier rules.
  • Specificity: Determines which style takes precedence when there are conflicting rules. An ID selector is more specific than a class, and a class is more specific than a type selector.

10. External, Internal, and Inline Styles

External CSS: Defined in an external .css file.

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

Internal CSS: Defined within the <style> tag in the HTML <head>.

<style>
  body { background-color: #f0f0f0; }
</style>

Inline CSS: Defined directly in an HTML element.

<p style="color: red;">Hello</p>

Conclusion

CSS provides the styling foundation of web pages, allowing developers to control the layout, color, and appearance of websites. With a solid grasp of CSS basics like selectors, properties, box models, and responsive design, you can begin creating visually appealing web pages.

Use this online coding tool for free.