Learn CSS in 12 minutes

Total
0
Shares

Learn CSS in 12 Minutes:

CSS ( Cascading Style Sheet ) is used to style the web document easily, making web pages good-looking and presentable. We design web pages using CSS. It’s an essential part of any web development and this skill must-have in any web developer and designer.

Why will we use CSS?

CSS is used to define the style for a web page, including the design, layout, and variations in display for different screen sizes.

In this article, I will give you a quick introduction to CSS and will help you to get started.

So let’s start…!

If you don’t have any knowledge of HTML then you can check this article.

Now we are going to start with CSS Selector.

Selector:

CSS Selector is used to select HTML element.

For Example

h1 is a selector, color is the property and blue is property value.

We have different types of selectors. For example, Id Selector: Uses the Id attribute of an HTML element to select a particular element. 

                    
<style>
#text1 {
    font-size: 18px;
       }
</style>
<h5 id="text1">Welcome to DevFords!</h5>

Class Selector: Uses the Class attribute of an HTML element to select a particular element. 

                    
<style>
.center {
    text-align: center;
       }
</style>
<p class="center">Welcome to DevFords!</p>

CSS Universal Selector (*): It selects all HTML elements on the page.

                    
*{
color: #000;
padding: 0px;
margin: 0px;
}

CSS Grouping Selector: Select all elements which are in the same group.

                    
<style>
/* First Way */
h2 {
  text-align: center;
  color: #000;
}
h3 {
 text-align: center;
 color: #000;
}
p {
 text-align: center;
 color: #000;
}
/* Second Way */
h2, h3, p {
 text-align: center;
  color: #000;
}
</style>

<h2>Hello World!</h2>
<h3>Welcome to DevFords.</h3>
<p>Learn CSS in 12 minutes.</p>

In Second Way we group all elements they use same style.

How can I add CSS to the project? We have three different ways.

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS:

In Inline CSS we can add CSS directly in our Html element using style attribute and then we provide properties.

For Example:

                    
<h1 style="color: blue"> Hello world! </h1>

So this way we can add any property like color, font size.

You can add properties as much as you want. But this makes our HTML page messy.

That’s why the Second method introduced.

Internal CSS:

In Internal CSS we can add a style element in the head section of the Html page. Like that

                    
<head>  
    <style>  
        h1 {  
            color: blue;  
        }  
    </style>  
</head>

First, we select an element then we provide the styling attribute to the particular element. Like in the above example I select h1 and then add a color property to h1.

External CSS:

In External CSS first, we create a separate stylesheet like “myStyle.css” then we link this to the header section of the Html page.

                    
<head>
<link rel="stylesheet" href="myStyle.css">
</head>

An external stylesheet must be saved with a .css extension.

The external .css file should not contain any HTML tags.

We can write the style here in the external stylesheet the same as we write in Internal CSS.

For Example:

                    
*{
color: #000;
padding: 0px;
margin: 0px;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
}

This was the basic structure of CSS that you must know how to add CSS to your Html page. You can also read this article.

Now we are going to play with CSS and learn more.

                    
<!DOCTYPE html>
<html>
<head>
 <title>Practice</title>
   <style>
	*{
	   padding: 0px;
	   margin: 0px;
	  }
	  body{
           background-color: #009688;
           color: #fff;
           font-family: monospace;
           padding: 20px;
	      }
	 h2{
	   font-size: 28px;
	   text-align: center;
	   border-bottom: 1px solid #fff;
	   margin-bottom: 12px;
	   text-transform: uppercase;
	   }
	 h3 {
           font-weight: bold;
	   font-size: 16px;
	   text-align: center;
	   }
	 ul {
           list-style: decimal;
           margin-left: 20px;
           margin-top: 6px;
           font-size: 12px;
	    }
   </style>
</head>
<body>
<h2>Hello World!</h2>
<h3>Welcome to DevFords.</h3>
<p>Learn CSS in 12 minutes.</p>
<ul>
	<li>Inline CSS</li>
	<li>Internal CSS</li>
	<li>External CSS</li>
</ul>
</body>
</html>

I use internal CSS in this example and let me explain to you about the style I use in this example.

First of all, I use a Universal selector, and where I write padding and margin is 0 as you know this style will apply to every element so I apply this for all HTML elements. Every element has some padding and margin by default and I make it 0 using this style.

Now the question is what is padding and what is the margin.

You can read this article for padding and margin.

Using font-size we can specify the size of the font of the text.

Using background-color we can change the color of the background.

text-transform will transform the text in uppercase, capital, lowercase, etc.

font-family will use to specify the family of font you can use anyone you like.

This was the basic intro about css hope so you learn a lot.

For further information about css properties, you can read this article cheat sheet.

See you there…. 🙂

Leave a Reply

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

You May Also Like