CSS for absolute beginners in 4 minutes.
Tags: webdev, css, beginners, tutorial
Published: 2022-12-12 10:46:35

- [Introduction](#introduction)
	- [Assumptions](#assumptions)
	- [CSS: the beginning](#css-the-beginning)
		- [CSS syntax](#css-syntax)
			- [by element](#by-element)
			- [by class](#by-class)
			- [by id](#by-id)
		- [ways to use CSS](#ways-to-use-css)
			- [inline CSS](#inline-css)
			- [Head tag](#head-tag)
			- [External CSS](#external-css)
			- [Syntax in practice](#syntax-in-practice)
				- [Background color: personal and skills section](#background-color-personal-and-skills-section)
- [Conclusion](#conclusion)

# 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](https://www.youtube.com/watch?v=y4qqQeUDCBQ).

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvynsqd649fenl0iwhyz.gif)
or you can copy and paste the following.

```xml
<!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>
```

### CSS syntax 

```css
selector {
     CSS-property: value;
}
```

A selector  targets an element, for example 

```css
h1 {

}
```

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

```css
body{

}


h1 {

}


h2 {

}

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



```

#### by class 

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

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

</div>

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

```css
.class {

}

```
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.

```css
.container {
  background-color: blueviolet;
}

.class1 {
 /*styles here*/ 
}

.class2 {
/*styles here*/ 

}
```

#### by id 

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

```xml
<div id="container" >

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

</div>
```
to select the element in CSS, you prepend # in the id

```css
#id{}
```
```css

#container{
   background-color: blue;
}

#hello_world{
  color: white;
  font-size: 24px;
}
```

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 
```xml
<head>
  <style>

  </style>
</head>
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43xtl3q1wp9o63pzac7r.JPG)


#### External CSS
create a styles.css file in your root folder. 

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

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

```

updated HTML 

```xml
<!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>

```


in styles.css, write the following,

```css

body{

   background-color: blueviolet;

}

```

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.

```xml
  
    <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>

```
css so far 

```css


body{

   background-color: blueviolet;
}
```
##### Background color: personal and skills section 

```css
.personal{
    background-color: darkmagenta;
}

.skills {
  background-color: darkmagenta;
}

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

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



```
changing text color of h1 and h2

```css
h1, h2 {
    color: darkgray;
}
```

targeting h1 alone,

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

targeting li elements 

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

```

all the CSS 

```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;
}

```

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](https://dev.to/sfundomhlungu/ultimate-css-guide-for-beginners-build-3-card-components-4doh) 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](https://www.buymeacoffee.com/mhlunguskF/e/104259), [w/o 1v1 help](https://www.buymeacoffee.com/mhlunguskF/e/104258)
 
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](https://cdn.buymeacoffee.com/buttons/default-black.png)](https://www.buymeacoffee.com/mhlunguskF)

Thank you for reading.