CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and formatting of a document written in HTML or XML. It allows developers to separate the visual design and layout of a web page from its structure and content.

By separating the visual design (CSS) from the structure and content (HTML), users can simply change the CSS file to get a completely different design.

The website CSS Zen Garden demonstrates this. The site lists variations of its design. The only thing creating this visual change is the use of a different CSS file.

Most websites use CSS. In the head section of the HTML for a page is a URL linking to one or more CSS files.

CSS works by associating style rules with specific HTML elements or groups of elements, controlling aspects such as colors, fonts, spacing, positioning, and more.

Examples of how CSS is used:

Text styling:

h1 {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

This CSS rule sets the color, font size, and font weight for all elements on the page.

Layout and positioning:

.container {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

This CSS rule sets the width of an element with the class “container”, centers it horizontally on the page, and uses flexbox to distribute its child elements evenly.

Responsive design:

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

This CSS media query applies styles to elements with the class “column” when the screen width is 600 pixels or less, making the layout responsive to different screen sizes.

Media queries enable websites to look good on large monitors as well as tablets and mobile phones.

Special effects: Animation and transitions:

.button {
  background-color: #007bff;
  color: #fff;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

This CSS rule sets the background color and text color for elements with the class “button” and adds a smooth transition effect when the background color changes on hover.

These are just a few examples of how CSS is used to style and format web pages.

CSS provides a wide range of properties and selectors that allow developers to create visually appealing and responsive designs, enhancing the user experience and making websites more engaging.