Amina
Amina's Blog

lorem ipsum

Jun 12, 2024 4 minute read

CSS Intro

Table of Contents

  1. What is CSS?
  2. Why use CSS?
  3. CSS Syntax
  4. Key Concepts of CSS
  5. CSS Frameworks
  6. Useful Links

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to style web pages. CSS is a powerful tool for web developers to create visually appealing and well-structured websites, and it's essential for web development as it allows developers to separate content (HTML) from design (CSS), making it easier to maintain and update the look and feel of a website.

Why use CSS?

CSS is used to define styles for your web page, including the design, layout and variations in display for different devices and screen sizes.

The style definitions are usually saved in an external .css file.

With an external stylesheet file, you can change the look of an entire website by changing just one file.

CSS Syntax

CSS Syntax - Learn CSS

  • Selector: points to the HTML element you want to style
  • Declaration: contains one or more declarations separated by semicolons
  • Property & Value: each declaration includes a CSS property and a value, separated by semicolons

Key Concepts of CSS

Selectors

These define which HTML elements the styles apply to. Common selectors include:

Element Selector

The element selector selects HTML elements based on the element name.

p {
    text-align: center;
    color: red;
} 

/* Applies to all <p> elements */

Class Selector

The class selector selects HTML elements with a specific class attribute. To select elements with a specific class attribute, you have to write a period (.) character, followed by the class name.

.class-name {
    text-align: center;
    color: blue; 
}

/* Applies to elements with class="class-name" */

ID Selector

The ID selector uses the ID attribute of an HTML element to select a specific element. To select an element with a specific ID, write a hash (#) character, followed by the ID of the element.

#id-name {
    text-align: center;
    color: green; 
}

/* Applies to the element with id="id-name" */

Universal Selector

The universal selector selects all HTML elements on the page.

* {
    text-align: center;
    color: black; 
}

Properties & Values

These define the styles you want to apply.

/* Color */
color: #333;
background-color: #f2f2f2;
background-image: url('image.jpg');
background-size: cover;

/* Text */
font-size: 16px;
font-family: Arial, sans-serif;
text-align: center;
line-height: 1.5;

Box Model

This model describes how the size of an element is calculated.

It consists of:

  • Content: The actual content of the element.
  • Padding: The space between the content and the border.
  • Border: The border surrounding the padding (if there is a border).
  • Margin: The space outside the border.

Basic CSS: The CSS Box Model

Example CSS for the Box Model

div {
    width: 100%;
    height: 50px;
    margin: 10px;
    padding: 15px;
    border: 1px solid #000;
}

CSS Frameworks

CSS frameworks are pre-prepared libraries that are meant to be used by developers to speed up and simplify the web development process.

Benefits of Using CSS Frameworks

  • Consistency: Provides a consistent design across the entire project.
  • Responsiveness: Built-in responsive design features.
  • Efficiency: Saves time by using pre-designed components and utilities.
  • Cross-Browser Compatibility: Ensures compatibility with various browsers.
  • Customizability: Allows customization to meet specific project needs.
Amina