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.
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 amazing
Thank you! I tried to make
Oh, no-no, It's just
Kinda funniesh toHaha, this is so easily
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!
Ahh thanks for always
I love you. Just... so much
Just... so much right now...
*clings*
I feel like such a
Haha Valsin. Glad this could
Flyra.... omQ nuu h0w DAER u 2 critisitizize mah blog!!!!1!1!! >:UUU burnnnnn
This is a rather good way to
Thank you Ikaron for always
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.
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. It's probably fun to experiment with that.
Are you experienced with that sort of stuff?
- Are you experienced with
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
Tracking, since I undeniably
Thank you. <3
Yes B|
I'm just wondering, how do
A track and a bump. You're
SnowSauria, the sidebar
Thank you to everybody! ♥
(No subject)
(No subject)
Oh, I didn't see that code
But thank you. : D
OHMAIGAWD. I UNDERSTAND.
I UNDERSTAND. I realkly CAN make CSS! I had so little hope forr so dang long! -wipes away tears- 8'D
YES. ...a little too late
...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
Tracking
This is probably really
sorry sorry late, if you
.comment.odd,.comment.even{color:#000000}
Hey Unplugged D: I was trying
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!"
It looks like you got an
</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>
etcINDEED! That is what it was.
"Your efforts are insignificant! I carry you to your deaths!"