/index

Ettudis (n) A graphic site offering freebies ranging from website designs, tumblr themes to textures and other graphic resources.

about
designer
contact

terms of use

content
resources

links
sitemap

tagboard

heart(s)

css basics

The title is pretty self-explanatory. Now that you’ve gotten the hang of HTML, you can make things easier by incorporating CSS. There’s so much that CSS can help you do. This tutorial teaches you all the basics of CSS

So I’m just going to assume that you already know the HTML basics because CSS is really, an addition to HTML. Everything that you ‘write’ for CSS applies to HTML so if you don’t know HTML, then brush up on that first before you read this tutorial.

Anyways, enough with the small talk. I’ll try to make this as easy to understand as possible and if you have any questions, feel free to ask.

Let’s start at the very beginning. Where in the HTML codes do you put the CSS? Usually, you would start out with something like this:

<html>

<head></head>

<body></body>

</html>

That is your basic HTML layout. You would put CSS between the head tags so it would look like this:

<html>

<head>

<style type=”text/css”></style>

</head>

<body> </body>

</html>

Then, you can get to actually writing your CSS codes (between the “style” tags). So let’s start! I will be exploring the common/majority of the possibilities you can do with CSS and you can pick and choose how you want to do it. Remember, anything I am refering to now is between and .

For each “style”, it would generally look something like this:

NAME OF STYLE { }

And you would type in the orders inside the {} brackets. Like below:

21e841g.jpg

The stuff boxed in blue is what I’m calling “styles” and the stuff boxed in red is what I will call “orders”. Basically, the HTML codes will correspond with the style in the CSS. And the orders pertaining to the style will be applied to the HTML code. This will be more clear once I’m finished the whole tutorial.

It does seem alot doesn’t it? Above are the basics and I will go through each line one by one. One thing to note about the “orders” is that it is CRUCIAL to never forget placing the colon and semi-colon in OR get the spelling wrong, otherwise, it won’t work. There are also shortcuts but I’m not going to go into that kind of detail.

I am going to go over the “orders” first because they can be applied to almost all the “styles” and they follow a pattern.

font-family: georgia; this is where you write what font you want. I recommend using basic fonts that all computers have such as times new roman, verdana, tahoma, arial, georgia, courier new (etc.) because if you computer has a cool font, it will show up nicely on YOUR computer but if another computer does not have the same font installed, it would show up in a different font.

font-size: 9px; pretty self-explanatory. The bigger the number, the bigger the font size. Another “unit” you can use is “pt” (instead of “px”). pt is NOT equal to px. It’s slightly bigger. 9pt is approximately equal to 12px.

font-style: italic; This deals with italics (as you may have guessed already). If you do not want your font to be italicized, you can just put “normal” instead of “italic” or you can just not have this line at all.

font-weight: bold; This deals with bold text. Works the same way as font-style. If you do not want bold, write “normal” or delete the line.

line-height: 12px; This is how much space you want between each line. Kinda like double-spacing or single-spacing in Word Documents. This is optional, if you don’t really care about the height of your lines, then you can erase this part too. If you do want to control the line height, I would suggest just a couple pixels (px) more than your font size so your text is readable.

text-transform: lowercase; This is where you can automatically make all your text capitalized or lowercased even though (when you type in the HTML portion) in lowercased letters, it will come out capitalized if you “order” it to be so in the CSS. If you want your text capitalized, just type in “uppercase” instead of “lowercase”. If you don’t want this, either erase the part or type in “none”.

color: #999999; This is where you get to change the colour if your text (NOT background). You would put a six digit number or you can just write in “black” or “white”.

text-decoration: none; DECORATE YOUR TEXT! Oh fun right? Options (what you can type in instead of just “none”): underline, overline, line-through, blink. Pretty self-explanatory.

background: #000000; This is the colour of your background! Insert your hex number.

background-image: url(image.png); Insert your image url.

background-repeat: none; How you would like your background image repeated. Options: none, repeat, repeat-x, repeat-y. Repeat-y: the image repeats only vertically. X: repeats horizontally. Just “repeat”: repeats horizontally and vertically. None: no repeats.

background-attachment: fixed; The options are “fixed” where your image does not seem to “scroll” with you when everything else does. The other option is “scroll” where you image seems to repeat/scroll along with you when you scroll down the page. This is sorta optional. It’s “scroll” by default.

letter-spacing: 0px; How much space you would like between each letter. The unit is in pixels (px) and you can go into negatives if you want the letter to be closer than usual (ex: -1px, -2px etc).

text-align: center; how you want your text to be aligned (like in word document). Options: center, right, left, justify

margin: 0px; How much space you want externally (in margins). If you would like different values for different sides, you can just add hyphen and position to “margin”. Ex: margin-left, margin-bottom, margin-top, margin-right.

padding: 0px; How much space you want internally. Kinda like margines but margins are “outside” and padding is “inside” space. It’s more important to choose which one to use when you’re dealing with background. If you are increasing padding, you will see more background image/color but if you increase margin, you will not see the background but you will still have the space. Make sense?

Here’s a visual of the difference between the two: CLICK FOR IMAGE

border: 5px solid #FFFFFF; the value attached to pixels determine how thick the line will be. You can choose for it to be a solid line or… options: dotted, dashed, double. And lastly, just enter your hex colour. If you want different effects for different side just add hypen and position to “border”. Ex: border-left, border-bottom, border-top, border-right.

width: 500px; This deals with the size of the “area” especially when you’re working with DIV tags. You can also adjust the height by typing in “height” instead of “width”.

top: 10px; position: absolute; This deals with the position of the “area” especially when you’re working with DIV tags. In this example, the “area” would be 10px lower from the website page. Options (instead of just top): right, left, bottom. But in order for this to work, you MUST set the position to absolute. (position: absolute;).

THE BODY TAG

This is applies to everything in between in the HTML codes and usually, everything that shows up on a webpage will be in between the body tags.

hra4o0.jpg

Think of this as in constructing a building. You have a foundation then as you add more to it, it becomes more complicated as things pile on top of each other. Same way, the body is the foundation but when you add more “styles” to your website layout, you can change the background, font color, font in other specific areas.

For the most part, you definitely should contain the background in the body. In a way, the body is kind of like a “default” style.

TABLE, TD

This deals with all the tables in the HTML. In the CSS, it would look like this:

table, td { font: georgia; color: black; }

So all my text inside the tables would be black and georgia.

ID

This is more specific. This will affect on specific things. For example, if you want some of your text to have a black background and a white bottom border, you could use the ID in your CSS.

In CSS, it will look like this:

#name{ border-bottom: 5px solid #FFFFFF; background: black; }

In HTML, it will look like this:

<font id=”name”>hello this font has a black background and a white bottom border</font>

anything outside of the font tags will not have a black background and a white bottom border. Of course, you can change the “name” to whatever word you want and you can have many IDs (with different names of course).

Usually, this style is used to apply to DIV layers. DIV layers (if you don’t know) are sort of like “blocks” or “boxes”. Analogy: think of putting a textbox in the middle of a slide in a powerpoint. That’s how DIV layers work. Let me show you:

9gis93.jpg

Notice how the text is displaced from the left by 100px and from the top by 10px and ONLY that part has a gray background? That’s DIV layer with CSS style.

CLASS

works much the same way as ID but the coding for it is different. In CSS, it will look like this:

.name { }

It could be used for DIV layers too like this:

6oncsg.jpg

In this part, it works EXACTLY the same way as if you put an ID for a DIV layer. Or for font/text: CLICK FOR IMAGE

Or for span tags:

zjuulg.jpg

Some people use this way to do headers. Which brings me to my next point…

HEADERS

There is a header code to make headers. For example:

14v18k7.jpg

And you can make as many kinds of headers you want. You just have to change the numbers (ex: h1, h2, h3 etc).

I, B, S, U

I stands for italics

B stands for bold

S stands for strikeout

U stands for underline

As an example, on CSS it will look somewhat like this:

8x8syd.jpg

Works same way for bold, strikeout and underlined text. But instead of writing just “i” you would write “b” or “s” or “u”.

A

“A” has everything to do with links. A:hover deals with when you hover over a link. A:link is what the link looks like when you leave it alone. A:visited is what the link looks like when you have visited/clicked the link before. In CSS, it will look like this:

11tad51.jpg

IMPORTANT!

It does seem a bit complicated doesn’t it? Now, to ensure that people don’t steal your codes (or there’s no confusion in thinking you stole others), that’s where the uniqueness of CLASS, ID, and header names come to play.

For example, some people, in their codes, specifically skip header tag numbers (ex: they use h2 and h4 instead of h1 and h2). Others decide to use span tags to make their headers. Some people use different names for ID and some don’t even use ID, they just use CLASS.

IT IS WRONG TO TAKE SOMEONE’S CODES AND JUST ALTER THEM

It takes effort, time and patience to write out CSS and HTML so PLEASE, DO NOT STEAL. Hopefully, this easy-ish tutorial will prevent that by a bit.

And I think that’s all the basics. This took me a LONG time to write so please no redistribution and whatnot. If I get good feedbacks from this and if there are people who want it, I can write a more intermediate level CSS tutorial about how to make different link effects and fun stuff like that. But that requires you know be VERY familiar with DIV ID and CLASS. So fiddle around with this at first.

If you have any questions or need help with any of your coding, please ask!

Also, for those expert coders out there, if there’s anything I missed that should be included, please tell me and I shall put it in right away (credits included!).

You guys can also check out THIS AMAZING TUTORIAL SITE for further info.

3 Comments »

  1. Comment by anon — July 19, 2011 @ 2:47 pm

    This is a wonderful tutorial. Thanks for posting this up!

  2. Pingback by ettudis - v16 » CSS static animated sidebar — September 14, 2011 @ 8:36 pm

    […] For more reference about CSS, please take a look at the w3school  and my CSS basics tutorial. […]

  3. Comment by other anon — March 9, 2013 @ 9:21 pm

    Thank you so much for this, I found it very clear and helpful! ovo

RSS feed for comments on this post. TrackBack URL

Leave a comment

*

3 Comments