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 thecolor
property 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;
}
}