Section styling in CSS

Styling Sections in CSS

When it comes to styling sections in CSS, it's important to understand that each section must be handled individually so that the overall look and feel of the site is cohesive and pleasing to the user's eyes.

Selecting sections

To select a specific section in CSS, you need to identify the class or ID assigned to it in HTML. For example, if we want to style the header section of our website, which has the "header" class, we can use the following code:

.header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

In this example, we set the background of the section to dark gray (#333), the text color to white (#fff), and we added an inner spacing of 20 pixels.

Styling the typography

Another important aspect of styling sections in CSS is typography. It is important to choose a readable font and set the size and color of the text according to the overall design of the site.

To define the typography in a specific section, we can use the "font-family", "font-size" and "color" properties. For example:

.header h1 {
  font-family: Arial, sans-serif;
  fontsize: 36px;
  color: #fff;
}

In this example, we are selecting the "h1" element within the "header" section and setting the font to Arial (or a generic sans-serif font if Arial is not available), the size to 36 pixels, and the color to white.

Adding images and backgrounds

In addition to colors and typography, we can also add images and backgrounds to our sections. To add a background image to a section, we can use the "background-image" property. For example:

.hero {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

In this example, we are defining a background image for the "hero" section and adjusting the size and position of the image so that it covers the entire section and is centered.

We can also add images within a section using the HTML "img" tag and styling it with CSS. For example:

.featured-image {
  width: 100%;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}

In this example, we are setting the maximum image width to 600 pixels and centering it within the "featured-image" section.

Conclusion

Styling sections in CSS is a fundamental part of website design. By choosing colors, typography, images, and backgrounds for each section, we can create a cohesive and user-friendly look. It's important to remember to select each section individually and adjust the properties according to the overall design of the site.

Next page of the Free Ebook:

22Styling Elements in CSS

4 minutes