A Beginner's Guide to Learning CSS Essentials

As a student who has just learned CSS, I can tell you that it's an essential language for creating beautiful and functional websites. I followed the course named "CSS Essential Training" by Christina Truong. Here's the link CSS-Essential-Training. In this blog, I will share my experiences learning CSS and discuss the essential concepts that every beginner should know.

Basic Syntax

CSS stands for Cascading Style Sheets, and it's used to style HTML documents. The basic syntax of CSS is simple - you select an HTML element and apply a style to it. The selector is used to select the HTML element, and the property is used to apply a style. For example, to set the color of the text in a paragraph element to red, you can use the following code:

p {
  color: red;
}

Padding, Margin, and Border

Padding, margin, and border are essential concepts in CSS that allow you to control the spacing around HTML elements. Padding is the space between the content and the element's border, while margin is the space outside the element's border. Border is the line that surrounds the element.

.box {
  padding: 10px;
  margin: 20px;
  border: 1px solid black;
}

Block, Typography, and Font

Block is a term used to describe the display behavior of an HTML element. A block-level element takes up the full width available, and it starts on a new line. Typography and font refer to the styling of text on a webpage. Currently, we use of Web-fonts makes the work more convenient

h1 {
  display: block;
  font-size: 24px;
  font-family: Arial, sans-serif;
}

Float, Flexbox, and Grid

Float is a CSS property that allows you to position HTML elements side by side. Flexbox and Grid are two modern CSS layout tools that make it easy to create complex layouts. Flexbox is designed for one-dimensional layouts, while Grid is designed for two-dimensional layouts.

.container {
  display: flex;
  justify-content: space-between;
}

Advanced Selectors

Advanced selectors allow you to select HTML elements based on their attributes or position in the HTML document. You can use selectors to create more complex styles and they are categorized into types like pseudo-selectors like :hover, :first-child, :last-child, and :first-of-type, last-of-type etc and relational selectors like child combinators(>) and sibling combinators (+,~).

ul li:first-child {
  color: red;
}

a:hover {
  text-decoration: none;
}

Fluid and Responsive Websites

Fluid and responsive websites are designed to adapt to different screen sizes and resolutions. You can use CSS media queries to adjust the layout of your website based on the screen size. Using the max-width property and width in % can help to achieve it. Also, a media query is used to define a condition.

@media only screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Conclusion

Learning CSS can be a challenging task, but it's an essential language for creating beautiful and functional websites. In this blog, I have discussed some of the essential concepts of CSS, including basic syntax, padding, margin, border, block, typography and font, Float, Flexbox, and Grid, advanced selectors, and fluid and responsive websites. With practice and dedication, you too can become a CSS master!