What is Css classes

What is Css classes

Let’s learn how to style a group of elements on a webpage. Imagine that you are designing a webpage and you want one paragraph to have large red font, another paragraph to have medium white font, and a final paragraph to have small blue font.

Thanks to CSS classes, you can do exactly that. CSS classes enable you to apply unique style properties to groups of HTML elements in order to achieve your desired web page appearance. We usually use Div element to group elements in a webpage.

How to Create a Class in CSS

Creating a CSS class is easy. You just need to add some HTML and CSS to your web pages.

Start by adding a class attribute to the HTML elements you want to style. To do so properly, just add class=”class-name” inside the opening tags of those element.

Let’s look at an example below.

Here’s the HTML:

<h1>Not green</h1>
<p class="green">Green</p>
<p>Not green</p>
<p><a href="https://hello.asp" target="_blank" class ="red">The link</a> that appears within this paragraph is green.</p>

Then, you can create a rule set for that particular class. You simply need a class selector and a declaration block. The declaration block consists of CSS properties defined with values.  In the example below, for example, the CSS color property is defined with the color name “green.”

Here’s the CSS:

.green {
color: green;
}

.red { 
color: red;
}

Styling Group of elements

To style a group of elements we need to put them into a div and apply on it a particular style.

Let’s look on the example below:

<!DOCTYPE html>
 <html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
 <body>
    <div>
      <h1> Second time </h1>
       <h4> A fund that invest in education</h4>
    </div>
   </body>
  </html>
div { 
  border: solid 3px lightGrey;
  text-align: center;
  background-color: green;
 }

We can add others properties to style the group of elements as we want.

=> To improve spacing inside a group of element and outside we can add margin and padding.

div { 
  border: solid 3px lightGrey;
  text-align: center;
  background-color: green;
  margin: 20px;
  Padding: 10px
 }

Discovering child elements

When we add a div element around others elements. We put a bigger boxe around others boxes. Let’s have an example to see how it works

<!DOCTYPE html>
 <html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
 <body>
   
       <div>  
        <h1> Second time </h1>  
    </div>

   </body>
  </html>

Here in this example because the div has another element nested inside it h1.

We call :

div ———————–> Parent element

h1 ————————> child element

child element/parent element

=> We can add as many elements as we and inside a div element, we have One parent and many children inside of it.

=> When we style a parent element, they are some properties which only affect the parent like: border, padding, margin.

=>When a child element receive a property from his parent we call this inheritance.

Using Classes for layouts

Class let us override inheritance properties. We can use class to change a particular element or to affect a child element even if a receive a property for his parent. Let’s see it in a example

<!DOCTYPE html>
 <html>
  <head>
    <link rel="stylesheet" href="style.css">

  </head>
 <body>
   
       <div>  
        <h1> Second time </h1>  
        <p class="paragraph"> My first paragraph to show how      class pass inheritance property </p>
        <h2> First time </h2>
       <p> My second paragraph to how class pass inheritance property </p>
    </div>

   </body>
  </html>
div {
  color: red;
  background-color: black;
 }

.paragraph { 

 color: white;
  background-color: red;

}

result:

Second time

My first paragraph to show how class pass inheritance property.

First time

My second paragraph to how class pass inheritance property.

=> Adding classes to div elements is one of the best way to style different group of elements simultaneously. Example :

<!DOCTYPE html>
 <html>
  <head>
    <link rel="stylesheet" href="style.css">

  </head>
 <body>
   
       <div class="headline">  
        <h1> Second time </h1>  
        <p> My first paragraph to show how      class pass inheritance property </p>
       </div>

       <div class="story">
        <h2> First time </h2>
       <p> My second paragraph to how class pass inheritance property </p>
    </div>

   </body>
  </html>
.headline {
   background-color: orange;
   color: white;
}

.story {
   background-color: green;
   color: black;

 }

Result

Second time

My first paragraph to show how class pass inheritance property.

First time

My second paragraph to how class pass inheritance property.

That’s it now you know about Css classes. Now you need to practice and practice to really have a deep understanding of Css and others programming languages in general.

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!