Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Add New Nots

Getting Started

Let’s start with learning how we can include CSS in our projects. There are typically three ways we do that.

1. Inline CSS

First off, we can include CSS directly in our HTML elements. For this, we make use of the style attribute and then we provide properties to it.

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

Here we’re giving it the property of color, and setting the value to blue, which results in the following:

We can also set multiple properties inside the style tag if we wanted. However, I don’t want to continue down this path, as things start to get messy if our HTML is cluttered with lots of CSS inside it.

This is why the second method to include CSS was introduced.

2. Internal CSS

The other way to include CSS is using the style element in the head section of the HTML document. This is called internal styling.

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

In the style element, we can give the styling to our HTML elements by selecting the element(s) and provide styling attributes. Just like we applied thecolorproperty to the h1 element above.

3. External CSS

The third and most recommended way to include CSS is using an external stylesheet. We create a stylesheet with a .css extension and include its link in the HTML document, like this:

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

In the code above, we have included the link of style.css file using the link element. We then write all of our CSS in a separate stylesheet called style.css so that it’s easily manageable.


h1 { 			
	color: blue;
}
													

This stylesheet can also be imported into other HTML files, so this is great for reusability.

Breakpoints for Media Queries

There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. These breakpoints can differ and there is no standard exactly defined, but these are some commonly used ones.

1. Mobile Portrait View

Mostly looked at Apple devices. While Android-based devices are important too, they have a lot of variances in most phones.

														
/* Mobile view */															
@media only screen and (max-width: 480px) and (min-width: 320px) {
    body {
        padding: 0 6% 6% 6%; 
    }
    h1 {
        font-size: 42px;
    }
    h2 {
        font-size: 38px;
    }
    h3 {
        font-size: 35px;
    }
    h4 {
        font-size: 30px;
    }
    h5 {
        font-size: 28px;
    }
    h6 {
        font-size: 25px;
    }
    p {
        font-size: 15px;
        margin-bottom: 5px;
    }
}
														
													

2. Mobile Landscape and Tablet Portrait View

Mostly looked at Apple devices. While Android-based devices are important too, they have a lot of variances in most phones.

														
/* Mobile landscape and Ipad portrait view */															
@media only screen and (max-width: 768px) and (min-width: 481px) {
    body {
        padding: 0 6% 6% 6%; 
    }
    h1 {
        font-size: 42px;
    }
    h2 {
        font-size: 38px;
    }
    h3 {
        font-size: 35px;
    }
    h4 {
        font-size: 30px;
    }
    h5 {
        font-size: 28px;
    }
    h6 {
        font-size: 25px;
    }
    p {
        font-size: 15px;
        margin-bottom: 5px;
    }
}
														
													

3. Tablet Portrait and Landscape View

Mostly looked at Apple devices. While Android-based devices are important too, they have a lot of variances in most phones.

														
/* iPad portrait and landscape view */															
@media only screen and (max-width: 1024px) and (min-width: 769px)
    body {
        padding: 0 6% 6% 6%; 
    }
    h1 {
        font-size: 42px;
    }
    h2 {
        font-size: 38px;
    }
    h3 {
        font-size: 35px;
    }
    h4 {
        font-size: 30px;
    }
    h5 {
        font-size: 28px;
    }
    h6 {
        font-size: 25px;
    }
    p {
        font-size: 15px;
        margin-bottom: 5px;
    }
}
														
													

4. Small screen Laptop View

Mostly looked at Apple devices. While Android-based devices are important too, they have a lot of variances in most phones.

														
/* Small screens, laptops. view */
@media only screen and (max-width: 1200px) and (min-width: 1025px ){
    body {
        padding: 0 6% 6% 6%; 
    }
    h1 {
        font-size: 42px;
    }
    h2 {
        font-size: 38px;
    }
    h3 {
        font-size: 35px;
    }
    h4 {
        font-size: 30px;
    }
    h5 {
        font-size: 28px;
    }
    h6 {
        font-size: 25px;
    }
    p {
        font-size: 15px;
        margin-bottom: 5px;
    }
}
														
													

5. Desktops and Large screen View

Mostly looked at Apple devices. While Android-based devices are important too, they have a lot of variances in most phones.

														
/* Desktops, large screens. view */
@media only screen and (min-width: 1201px  ){
    body {
        padding: 0 6% 6% 6%; 
    }
    h1 {
        font-size: 42px;
    }
    h2 {
        font-size: 38px;
    }
    h3 {
        font-size: 35px;
    }
    h4 {
        font-size: 30px;
    }
    h5 {
        font-size: 28px;
    }
    h6 {
        font-size: 25px;
    }
    p {
        font-size: 15px;
        margin-bottom: 5px;
    }
}