DEV Community

Cover image for CSS for absolute beginners in 4 minutes.
Sk
Sk

Posted on • Edited on

CSS for absolute beginners in 4 minutes.

Introduction

CSS styles and layout web pages, there are multiple ways to do the same thing in CSS, some easier than others, which makes CSS tricky. I will narrow everything down to the fundamentals that will make your applications look good while you maintain your sanity. That's the difference between a 40-minute and 3-hour CSS tutorial, avoiding information overloading and embracing targeted learning aids in mastering tricky topics.

Assumptions

have a code editor installed(any), but highly suggest vscode
You can write basic HTML and load the document to a browser.
If not, you can follow this short tut.

CSS: the beginning

Create a folder and an index.html file; I am using vscode and the live server plugin to serve the HTML; you can install it from the extensions tab in vscode.

you can use emmet to stub out starter HTML template quickly,

emmet
or you can copy and paste the following.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS syntax

selector {
     CSS-property: value;
}
Enter fullscreen mode Exit fullscreen mode

A selector targets an element, for example

h1 {

}
Enter fullscreen mode Exit fullscreen mode

Anything inside the curly {} is applied to all h1 elements in the HTML document.

There are multiple ways to select elements from HTML, we only care about 3 for now.

by element

Using the actual HTML element name as a selector, as you have already seen above.

examples

body{

}


h1 {

}


h2 {

}

/*selecting multiple elements at once - this is a comment(ignore by css) */
h1,h2,p {
}



Enter fullscreen mode Exit fullscreen mode

by class

You first need to give the HTML element a class or classes using the class attribute.

<div class="container">

    <!-- multiple classes, separated by space - this is a comment -->
     <h1 class="class1 class2">Hello world</h1>

</div>

Enter fullscreen mode Exit fullscreen mode

to target any element with that class, you use the following syntax.

.class {

}

Enter fullscreen mode Exit fullscreen mode

you prepend a dot to the class, any element with that class will be styled, and you can reuse classes to as many elements as you like.

.container {
  background-color: blueviolet;
}

.class1 {
 /*styles here*/ 
}

.class2 {
/*styles here*/ 

}
Enter fullscreen mode Exit fullscreen mode

by id

It is a unique attribute used to identify an element; you set the id with the id property.

<div id="container" >

  <h1 id="hello_world">Hello world</h1>

</div>
Enter fullscreen mode Exit fullscreen mode

to select the element in CSS, you prepend # in the id

#id{}
Enter fullscreen mode Exit fullscreen mode

#container{
   background-color: blue;
}

#hello_world{
  color: white;
  font-size: 24px;
}
Enter fullscreen mode Exit fullscreen mode

Id's cannot be reused for multiple elements.

now that you have a basic understanding of CSS syntax let's look at ways to load/use CSS in HTML.

ways to use CSS

inline CSS

<h1 style="color: gray; font-size: 24px"/>

you use the style attribute in a tag to write CSS which targets the element directly

Head tag

<head>
  <style>

  </style>
</head>
Enter fullscreen mode Exit fullscreen mode

If you have minimal CSS, you can use either inline or the head tag, however, I recommend getting used to external CSS, which is creating a file with a .css extension

Styles.css

External CSS

create a styles.css file in your root folder.

To load the styles to HTML, you use the link tag

   <link rel="stylesheet" href="styles.css">

Enter fullscreen mode Exit fullscreen mode

updated HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

in styles.css, write the following,


body{

   background-color: blueviolet;

}

Enter fullscreen mode Exit fullscreen mode

we are changing the background color of the body tag, if your CSS file is loaded correctly, the entire page should be blueviolet, or at least you should see some blueviolet.

Syntax in practice

Copy the following HTML and paste it in your body tag, then open the CSS file; you can split in vscode by right-clicking on the file and choosing the option open to the side.


    <div class="container">
         <section class="personal">
            <h1>Jane Doe</h1>
            <div>
                <h2>About Me</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, eveniet.</p>
            </div>
         </section>

         <section class="skills">
            <ul>
                <li>JavaScript</li>
                <li>Python</li>
                <li>React</li>
                <li>Angular</li>
                <li>Svelte</li>
                <li>Wasm</li>
            </ul>

         </section>

    </div>

Enter fullscreen mode Exit fullscreen mode

css so far



body{

   background-color: blueviolet;
}
Enter fullscreen mode Exit fullscreen mode
Background color: personal and skills section
.personal{
    background-color: darkmagenta;
}

.skills {
  background-color: darkmagenta;
}

Enter fullscreen mode Exit fullscreen mode

because the style are the same, we can simplify this, with multiple selection.

.personal, .skills {
    background-color: darkmagenta;
}



Enter fullscreen mode Exit fullscreen mode

changing text color of h1 and h2

h1, h2 {
    color: darkgray;
}
Enter fullscreen mode Exit fullscreen mode

targeting h1 alone,

h1 {
    font-size: 48px;
    font-weight: 900;
}
Enter fullscreen mode Exit fullscreen mode

targeting li elements

li {
    /* spacing - explained in the next article in detail  */
    padding-bottom: 1em;
    color: beige;
}

Enter fullscreen mode Exit fullscreen mode

all the CSS




body{

   background-color: blueviolet;

}

.personal, .skills {
    background-color: darkmagenta;
}


h1, h2 {
    color: darkgray;
}


h1 {
    font-size: 48px;
    font-weight: 900;
}

li {
    /* spacing - explained in the next article in detail  */
    padding-bottom: 1em;
    color: beige;
}

Enter fullscreen mode Exit fullscreen mode

CSS is vast, and to avoid information overload we will build gradually from this,

That was CSS in a nutshell; now, all you need to learn is the actual styling of elements, layouts and practices, which is the goal of the subsequent articles.

follow this link for the next article; you will build 3 card components while learning basic CSS styling.

Conclusion

This article is the beginning of multiple HTML, CSS, JavaScript, React, and Svelte articles, as I am taking this blog to that new direction of project-based learning.
In the meantime, if you want to take your HTML, CSS, and JavaScript skills from beginner to writing large applications in a focused path, I have a dedicated digital download with 1v1 help, w/o 1v1 help

If you like the blog and like to support you can buy me a coffee, your support would be highly appreciated.

Buy Me A Coffee

Thank you for reading.

Top comments (0)