* {CSS Basics} How do I CSS?

Unplugged's picture



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!


This is very helpful

This is very helpful <3
z.m123's picture

This is amazing

This is amazing Unplugged♥
Unplugged's picture

Thank you! I tried to make

Thank you! Laughing out loud I tried to make it as understandable as possible, I hope I didn't fail with that.
z.m123's picture

Oh, no-no, It's just

Oh, no-no, It's just awesomesauce xD
Kinda funniesh to
Flyra's picture

Haha, this is so easily

Haha, this is so easily explained, fun to read and very helpful. Thank you, Unplugged. ♥

And btw, the link to the 'eyesearing blog' is supposed to be taking you to the CSS help structure entry, right? Well, it doesn't, it links to this blog~
Just pointing out. :] Otherwise I see nothing wrong here, all fine & awesome!
f l y r a b l o g avatar by tinkee, sig by Quamar
Unplugged's picture

Ahh thanks for always

Ahh thanks for always pointing those things out Flyra. I would've never noticed in the coding chaos that this blog is. xD

I love you. Just... so much

I love you.
Just... so much right now...
*clings*
Flyra's picture

I feel like such a

I feel like such a nit-picker, though 8D; I'm glad you're taking my hints as useful, though. |D
f l y r a b l o g avatar by tinkee, sig by Quamar
Unplugged's picture

Haha Valsin. Glad this could

Haha Valsin. Sticking out tongue Glad this could help.

Flyra.... omQ nuu h0w DAER u 2 critisitizize mah blog!!!!1!1!! >:UUU burnnnnn

This is a rather good way to

This is a rather good way to translate CSS into layman's terms. You may want to think about describing what the hex is for and how it's broken down. While some people may not have use for said knowledge, it can help people build a color without a converter. *Just a suggestion*
Unplugged's picture

Thank you Ikaron for always

Thank you Ikaron for always commenting. Smiling I want to make CSS easy, understandable and accesssible for everyone. ((i don't think I could talk about CSS all professionally anyway-- some things cause me headache))
I have thought about elaborating on CSS in more detailed ways, broken down into seperate blog posts for each topic and collect them all somewhere later on and create some sort of catalog, but I'm not sure if anyone would really be interested, and I'm also afraid it might get too non-TEF at some point. Sticking out tongue

Hex code would be fun but I honestly never really dived into that topic and all I know is that it's #RRGGBB and that colour picker tools are handy. Laughing out loud It's probably fun to experiment with that.
Are you experienced with that sort of stuff?

- Are you experienced with

- Are you experienced with that sort of stuff? -

That depends. I'm not very experienced with CSS but I've got a decent bit of experience with hex and how it works with memory, what its relation to binary is, etc.

I love this. Thank you. Much

I love this. Thank you. Much easier than figuring it all out on your own. xD
Sciolto's picture

Tracking, since I undeniably

Tracking, since I undeniably fail at this stuff no matter how simple someone makes it out to be.
Thank you. <3

OkamiLugia's picture

Yes B|

Yes B|
Snowsauria's picture

I'm just wondering, how do

I'm just wondering, how do you change font and font color on the sidebar? I tried to simply put the font and color I wanted into the .sidebar 'speech bubble', but nothing happened. x)
Tally's picture

A track and a bump. You're

A track and a bump. You're wonderful. :,)
Unplugged's picture

SnowSauria, the sidebar

SnowSauria, the sidebar thinks that it's a speshul snowflake. :n It needs a different approach if you want to change the font colours. You can find a code for changing the colours of all those links in my CSS Structure Blog in the white box at the top, under "Colours for Sidebar links".


Thank you to everybody! ♥
Butterbrot's picture

(No subject)

<3 'n track

Aivilo's picture

(No subject)

<3
Snowsauria's picture

Oh, I didn't see that code

Oh, I didn't see that code there. x)
But thank you. : D
SentrySeb's picture

OHMAIGAWD. I UNDERSTAND.

OHMAIGAWD.


I UNDERSTAND. I realkly CAN make CSS! I had so little hope forr so dang long! -wipes away tears- 8'D





EternalWanderer's picture

YES. ...a little too late

YES.

...a little too late now that I learned on my own, but yes still xD...

Thank-you for all the amazing things you are doing for the community.

track

track
ghosteye's picture

Tracking

Tracking
Snowsauria's picture

This is probably really

This is probably really simple, but how do I change the font colors on the comments? x')
Unplugged's picture

sorry sorry late, if you

sorry sorry late, if you still need it:
.comment.odd,.comment.even{color:#000000}
Graveyard's picture

Hey Unplugged D: I was trying

Hey Unplugged D: I was trying to work on getting some updates for Nightmare's Bio, but I don't know if my coding went all wonky or something.

Test Blog

I've got the coding on the test blog and it's just... GAH! All Over the place, I though I missed something or that I forgot to close off a code but that doesn't seem to be the case O-o any ideas what the heck is going on with it?

"Your efforts are insignificant! I carry you to your deaths!"
Unplugged's picture

It looks like you got an

It looks like you got an extra </div> somewhere in your code. I don't have much time so if you could check somewhere around the "aeron", the issue seems to lie somewhere there. If you could give me your code (without the css) that'd be helpful.

Until I have a bit more time, check all your divs. copypaste your content into editor or something and remove all the text so all you got are the divs, and check if they all close properly, which </div> belongs to which <div> etc
Graveyard's picture

INDEED! That is what it was.

INDEED! That is what it was. I was a dork and ended up having extra
codes behind the links... GAH! I don't know how on earth that came around but thank you for pointing it out! I wouldn't have even noticed otherwise~

"Your efforts are insignificant! I carry you to your deaths!"
Unplugged's picture

Did something just kill the

Did something just kill the reply-button?
Rofl ah well. Good thing comments still work.
Graveyard's picture

LMAO! Looks like my

LMAO! Looks like my Reply/Edit button has magically moved to the Left side >_> LOL!

Thanks for the help Unplugged ^^ You're a lifesaver <3

"Your efforts are insignificant! I carry you to your deaths!"

Track! Thanks a lot C:

Track!

Thanks a lot C:
WonderfullySarcastic's picture

(No subject)

<3 Yay, some help! : D
#1354
.
ickydog's picture

track

track
Kobal Snuff

Retrack cause I'm a dummy :B

Retrack cause I'm a dummy :B



Enny005's picture

Thank you for this blog. It

Thank you for this blog. It really helped me. But how do I put in a picture in the background? Like I don't know, flowers for example.
parrotsnpineapple's picture

tracking so I can read when

tracking so I can read when Im not sleepy
benevolence's picture

Ohhh

Ohhh thankyouthankyouthankyouthankyou! *hugs* This is so very helpful!
WonderfullySarcastic's picture

Retracking this ><

Retracking this ><
#1354
.
Alyssa035's picture

Thank you Unplugged! This

Thank you Unplugged! This helped me alot1
The man with the key is king,
And honey you should see me in a crown.

Love this

Love this <3 so helpful
MOVED TO TEF ACCOUNT "AMETAT"
mellion's picture

Your css blog posts are

Your css blog posts are amazing! Thank you so much! ;_; <3
~ Azugi

I just have a question, I'm

I just have a question, I'm still a little confused. After you create the code, where would the text that you wish to type go? Let's say I wanted to type, "Hello," where in the code would I place it? How would you code that in there? Thanks. Smiling
NerOlivers's picture

Amazing.

Amazing. Laughing out loud
Boo.
takayama's picture

so cool. thanx

so cool. thanx