Fundamentals of CSS

Cascading Style Sheets, or CSS, is a language used to design and organize web pages. The appearance and feel of websites, including their colors, fonts, layouts, and other visual components, are managed using CSS.

1. CSS Selectors: CSS selectors are used to select and style HTML elements. Here are some examples:

   Select all paragraphs and make their text color red:

p {
  color: red;
}

Select all h1 elements inside a div element and make their font size larger:

div h1 {
  font-size: 30px;
}

1. CSS Box Model: The CSS box model is a concept that defines how HTML elements are displayed on the page. It consists of four parts: margin, border, padding, and content. Here's an example:

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 20px;
  margin: 20px;
}

In this example, the .box element has a width and height of 200 pixels, a black border that is 1 pixel wide, a 20-pixel padding inside the border, and a 20-pixel margin outside the border.

1. CSS Layouts: CSS can be used to create different types of layouts for web pages. Here are some examples:

Creating a two-column layout with a header and footer:

<header>Header</header>
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>
<footer>Footer</footer>

.container {
  display: flex;
}

.column {
  flex: 1;
}

In this example, the .container element has display: flex set, which allows its children elements to be arranged in a row. The .column elements have flex: 1 set, which allows them to take up equal amounts of space.

Creating a responsive layout using media queries:

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 768px) {
  .box {
    flex-basis: 50%;
  }
}

In this example, the .container element has display: flex set, and the .box elements have flex: 1 set, which allows them to take up equal amounts of space. The media query is used to change the flex-basis of the .box elements to 50% when the screen width is less than 768 pixels, allowing the boxes to stack horizontally.

These are just a few of the fundamentals of CSS. With these concepts, you can create a wide variety of designs for your web pages!