Learn CSS basics using a real world example!

Image for post
Image for post

Welcome to a new episode of this series ! In the last one, I gave an overview of web development and a short HTML course. So if you didn’t read those yet, feel free to do so, you’ll find the full plan for this series. But even if you just need an introduction to CSS, you still are in the right place. Let’s start !

What the heck is CSS?

To keep it short, CSS stands for Cascading Style Sheets, it describes how HTML elements are to be displayed.

Front-end developers abstraction for CSS is simply:

CSS is a topic that many new front end coders avoid for as long as possible. It sounds complicated, there are all of these rules, you might even have to do some math! How lame is that?

Did i scare you? Oh sorry! Didn’t mean to, but I promise, if you are into visual stuff, you’ ll find CSS pretty cool!

In the previous article, we made this:

Image for post
Image for post
It’s just a CV

So ugly, right? But we are just about to make it pretty.

Before that, I need to explain something to you : where you can write your CSS code.

There are 3 ways:

Image for post
Don’t worry about the new syntax, we’ ll get to that later!

1- Inline CSS:

An inline style may be used to apply a unique style for a single element.

Inline styles are not best practice, imagine writing CSS inside the tag of every single element you want to style. That’s time consuming, it causes maintenance headaches when you need to apply changes and your HTML document will be so much longer.

2- Internal CSS:

An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the <head> section.

3- External CSS:

It means that you’ll write your code in an external file which can be written in any text editor, must be saved with a .css extension and have to be linked to your HTML document using a <link> tag inside the <head> section.

Wait, what style will be used when there is more than one style specified for an HTML element?

The answer for that question is that all the styles in a page will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

Now that we clarified those details, open VS Code or your preferred source code editor and copy the code provided in this . It’s just the HTML for our CV.

Create a new style.css file and link it to your HTML document using:

<!-- Inside the head element -->|
<link rel="stylesheet" href="style.css">

Let’s center your name and photo, change your HTML code for those two element to look like this:

Don’t forget to change the ‘src’ of the <img> to the right path of your photo.

Now, in the style.css file write the line bellow:

|.center{text-align: center;}

Here, we added a class attribute with a value of “center” to our elements, you usually use classes to apply the same style for more than one element. It’s not really a must but it’s just a convention.

We are telling CSS that it’s a class using the dot ‘.’ before the class name (.center).

To write a valid css code, you should include 3 things:

1- A selector : in this case ‘.center’ and you can name it whatever you like.

2- A property : in this case ‘text-align’ which aligns our content.

3- A value to the property : in this case ‘center’.

There is two other ways to do the same thing, the second is that you give an id for the <h1> and another for the <div> like so:

In the HTML doc
In style.css

But, since we want to apply the same style for both of our elements, it’s easier to use ‘class’ over ‘id’, actually an id should be unique and if you give the same id to more than one element, your style will be applied just for the first one in your HTML document.

The last method is to use the HTML tags, you don’t need to add an id or a class to your elements, you just need to do like this:

|h1,div{text-align: center;}

Doing so will center every h1 and the content of every div. So this is not really what we want but i wanted to show you that it’s another way for selecting in CSS.

You should be like that right now, but hang in there, we almost finished! 😃

BTW, if your photo is bigger than what you need, you can fix that using ‘width’ and ‘height’ properties:

|img{
width: 200px; /* for me 200px worked, you can adjust that*/
height: 200px;
}

Now, add this to your CSS code:

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

Image for post
Image for post
Visual Explanation

And we can make it shorter:

Or even shorter, since we are using the same values, like so:

|padding: 20px 0;

Until now, we used enough properties for you to finish styling your CV by yourself. This is a challenge!

You right now! Hopefully 😝

If you are stuck, here’s the source code of my work, but promise me that you’ll try hard first. 😃

index.html
style.css
Image for post
Image for post
The result

Now, the CV looks better, but actually, we can do a lot better than that.

We’ll do that in the next episode, and also, we’ll learn more advanced CSS properties.

This article was pretty long, but i think it was worth it, don’t you think ?

Thank you for following along and seeya soon! 😄

Written by

A student who loves to talk about Business and Web Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store