What is Cascading Stylesheet? CSS Explained for Beginners

CSS (Cascading Style Sheets) is a language that describes the look of a code written in HTML or XML. It controls the presentation and layout of web pages and user interfaces.

CSS is an important tool in web development and design. It allows the creation of visually appealing and responsive websites that are friendly to users.

What can you do with basic CSS?

CSS allows you to control a wide variety of styles and properties, including:

• Font

• Layout

• Effects

• Positioning

• Color

• Responsive Design

---

• Font

  It is used to control the look of texts. By the use of CSS font property, you can change the text size, color, style, and more. You can also use it for setting the size, weight, and style of the text.

  Some of the important font attributes:

• CSS Font Weight: This property is used to increase or decrease the boldness and lightness of the font. It can be Normal, Bold. Lighter and so many.

    <h1>Welcome to my Page</h1>
    <h2>Have fun while you read</h2>
  

  
    h1 {
      font-weight: bold;
    }
    h2 {
      font-weight: 600;
    }
  

• CSS Font size: This property is used to set the size of the font.

    <h1>Welcome to my Page</h1>
    <h2>Have fun while you read</h2>
  

h1 {
  font-size: 15px;
}
h1 {
  font-size: 1.5em;
}

• CSS Font family: This property is used to change the nature of the font and it can either be a specific font family name or a generic font family name.

    <h1>Welcome to Page</h1>
  

     h1  {
      font-family:  ans-serif;
    }
  

• CSS Font color: This property is used to define the color of the text

    <h1>Welcome to Page</h1>
    <h2>Have fun while you read</h2>
  

     h1 {
      color: red;
    }
  
    h2 {
      color: #FFFFFF; 
    }
  

• CSS Font Style: This property has three values; normal, italic, and oblique. The normal style retains the actual value, while the italic value will display the text in a slanted style while the oblique will display the text with a similar slant but using the normal style.

<p class="box">This is a box</p>

.box {
  font-style: italic;
}

Layout

It is used for positioning and sizing elements on the page, a fundamental concept of layout is a box model such as margins, padding, and borders.

• Box model

The box model is a way of thinking about the layout of elements on a web page. Each element is considered to have a box that includes the content, padding, border, and margin.

1. The Padding

Padding is the space between an element's content in a box and its border. It is used for creating space inside an element and is controlled using the padding property. It is defined by the padding property, which sets the padding on all sides, or the padding-top, padding-right, padding-bottom, and padding-left properties, which set padding on individual sides.

The padding property helps in setting values in pixels, ems, or percentages. For example, let's say we have a div element with some content inside it:

<div> 
    <p>Our First Padding Tutorial</p> 
</div>
We can add some padding to the div element

 div{
 padding: 20px;
 }
YES! We just added some padding to the div element

With this, we have created 20 pixels of space between the content of the div element and its border.

1. The Margin

   Margin refers to the space between an element and its neighboring elements. It is used to create space outside an element and is controlled using the margin property. The margin property can also be set with values in pixels, ems, or percentages.

    Here is a good example, assuming we have two div elements with some content inside them:
    <div>
         <p>Running the first margin tutorial</p>
    </div>
   
     <div> 
        <p> Running the second test margin tutorial </p>
      </div>
   
    So now lets add some margin to the div element
   

    div{
     margin: 20px;
     }
    or this,
    div: first-child {
     margin-bottom: 20px;
     }
    or this,
    div: second-child { 
    margin-top: 20px; 
    }
   

   This will create 20px of space between the first div element and the second div element.

   It's important to note that padding and margin can have a significant impact on the layout and spacing of your web page. Understanding how to use these properties effectively is key to creating visually appealing and easy-to-navigate designs.

2. The Content Box

   In the box model, the "content" area refers to the actual content of an HTML element, such as text, images, or other types of media. The content area is defined by the width and height properties in CSS, which determine the size of the content area.

<div class="box"> <p>Hello! Hope you are enjoying the tutorial/p> </div>

.box {
width: 150px;
height: 100px;
}

In this example, the content area of the div element will be 150pX wide and 100 px long. The actual text inside the content area will automatically adjust to fit the available space.

Understanding the content area is essential for creating effective layouts in CSS, as it is the primary area where we can control the size and layout of our content. By setting the width and height properties of an element, we can create fixed or flexible content areas that adapt to different screen sizes and device types.

It's important to note that the width and height properties do not include any padding, borders, or margins around the content area. These areas are considered part of the "box" model and are positioned around the content area.

The box model is a key concept in CSS that defines how elements are sized and laid out on a web page. Understanding the box model is essential for creating effective layouts and styling web pages. Here are some key concepts and examples;

• Border

  The border area is a line that surrounds the padding and content of an element. It is defined by the border property, which sets the border width, style, and color, or the border width, border style, and border-color properties, which set the border properties individually.

<div class="box">This is a box</div>

.box {
  border: 3px solid blue;
}

For more information on padding and margin, you can refer to the official CSS documentation:

CSS Box Model by [W3Schools]

More on CSS Model

Read more on padding here.

Click here to learn more about Margin

My upcoming articles will explain various aspects of CSS positioning, color, responsive design, and effects. Additionally, I will delve deeper into layout using Flex and Grid. Stay tuned!