I am sure you have at least once in your lifetime seen one of those nifty colourful biographies with all their effects and colours, wanted to be amazing too, eventually came across an eyesearing blog, copied a code, changed some hex-codes and went on with your life.

But then, at some point, a question hit you, and you couldn't shake it off anymore:
"What the hell is all this about anyway?"

Fear not, for this blog is here to help you out of your terrible misery!


There is text and coding ahead so prepare having to read and think, but I hope that everything is easily understandable.

BASIC BUILD

To get CSS, we obviously first need to take a look at how you build it, because doing it yourself is better and more awesome than being dependant on anyone's knowledge.

Take a look at this:

Selector? Declaration? Ughh not all this techno jargon again. But don't shut your brain off just yet, there is hope. Disregard those terms and we'll take a closer look at what exactly all this stuff does.

let's build css

CSS	ENGLISH
	"I don't know where to start."

Unfortunately a website doesn't speak english, therefore we need to talk to it in a language it understands, which is CSS in that case.
But how can the website know that we're trying to talk in CSS, and not in some other language?
This is what our Start Tag and End Tag are for, our <style> and </style>. They define where our CSS code starts and where it ends.

CSS	ENGLISH
<style> </style>	"I'm talking CSS with you now." "I'll stop talking in CSS now."

A page has many different elements in it, and each part has a different name, a selector. So if you want to change the background of one certain part of the page, you need to call it by its name first.
You can find a guide to which element of the TEF Page responds to which name here.
In our example, the name of the element is .menu.

CSS	ENGLISH
<style> .menu </style>	"I'm talking CSS with you now." "Hey, you there, .menu. Yeah I'm talking to you." "I'll stop talking in CSS now."

But before starting to speak, we need to open our mouth first. Translated into coding, this means using { curly brackets } to make a speech bubble, yay. Actually it's called a declaracion block, but we don't care!

CSS	ENGLISH
<style> .menu { } </style>	"I'm talking CSS with you now." "Hey, you there, .menu. Yeah I'm talking to you." Speech Bubble! "I'll stop talking in CSS now."

Now that we worked out what language we're talking in (style), who we are talking to (.menu), and that we are actually talking ({speech bubble}), we can move onto conquering the world telling what we actually wanted to do all this time: do a declaration i.e. change something.
But what can we force them to change? Or rather, how can we force them to change something?

Thankfully the internet is big and there are a lot of helpful websites that demonstrate the power of CSS, like this one.

Let's say we want to change the background colour. We look for the right declaration type and find this on the website I just linked: background-color:#ff9900. Let's implement it.

CSS	ENGLISH
<style> .menu { background-color:#ff9900 } </style>	"I'm talking CSS with you now." "Hey, you there, .menu. Yeah I'm talking to you." "Your background-color. I want it to be coloured in #ff9900." "I'll stop talking in CSS now."

That certainly is not enough. We want .menu to do many things at once. Let's force it into changing the text size and font as well as the text colour! We're powerful, we can make .menu do anything we want! Yeah! Just look for the fitting declarations and put it into our speech bubble.
font-size: 18px and font-family: Times New Roman and color: #000000

Sadly, we not only need punctuation in english, but CSS also cannot understand you if you don't punctuate properly. Too bad for all of us who hate pressing an extra button, because to seperate our commandments, we need to use a ; semicolon.

CSS	ENGLISH
<style> .menu { background-color:#ff9900; font-size: 18px; font-family: Times New Roman; color: #000000 } </style>	"I'm talking CSS with you now." "Hey, you there, .menu. Yeah I'm talking to you." "Your background-color. I want it to be coloured in #ff9900." ; "Oh, and your text should be 18px high." ; "Make it in Times New Roman too." ; "AND I want the text to be #000000-coloured, okay?!" "I'll stop talking in CSS now."

Now whenever you want to talk to another part of the page, you need to call it after its name, after you've finished talking with some other part. You simply continue after the same scheme.

CSS	ENGLISH
<style> .menu { background-color:#ff9900; font-size: 18px; font-family: Times New Roman; color: #000000 } .sidebar { color: #ff0 ... ; ... ; ... } </style>	"I'm talking CSS with you now." "Hey, you there, .menu. Yeah I'm talking to you." "Your background-color. I want it to be coloured in #ff9900." ; "Oh, and your text should be 18px high." ; "Make it in Times New Roman too." ; "AND I want the text to be #000000-coloured, okay?!" "Now to you, .sidebar..." "Go and do this and that because I told you so." "I'll stop talking in CSS now."

Congratulations! You've just built your own CSS code!