CSS coding lessons By a.smith

By a.smith
POSTED: 18 Jun 2012 15:54
CATEGORY: Educational
FEATURED: Yes (Astra Moon)
(Go to comments)

CSS codes can be placed between the <head></head> tags or the <body></body> tags on a webpage. CSS is used to format websites layout and is very important for any webpage.

Selecting elements to style
All HTML elements can be styled using CSS. Elements can be selected in the following ways.

<style type="text/css">
[ELEMENT] {CSS}
#[ELEMENT_ID] {CSS}
.[ELEMENT_CLASS] {CSS}
</style>

example:
<myelement id="myid" class="myclass">my text</myelement>

If I wanted to make the text inside the element red, I could do it the following ways:

<style type="text/css">
myelement{color:red}
//OR
#myid{color:red}
//OR
.myclass{color:red}
</style>

classes and ids aren't the only ways to style an element either. Elements can be styled by ANYTHING inside the tag. Example:

<myelement name="myelementname"></myelement>
<style type="text/css">
*[name=myelementname] {CSS}
</style>

The star(*) means that it selects all elements on the page. This is useful if you want all elements to have the same font size or color e.c.t. Though it is better to use the body tag for that. Example:

<style type="text/css">
*{font-size:12px}
</style>

You can also select elements inside other elements.

<style type="text/css">
[ELEMENT_1] [ELEMENT_2] {}
</style>

Example:

<table>
<tr class="mytableclass">
<th> text </th>
<td> text </td>
<td> text </td>
<td> text </td>
<td> text </td>
<td> text </td>
</tr>
<tr>
<th> text </th>
<td> text </td>
<td> text </td>
<td> text </td>
<td> text </td>
<td> text </td>
</tr>
</table>

<style type="text/css">
.mytableclass td {color:purple}
</style>

This code will make all text inside the first 5 <td> elements purple. This is because the td element is INSIDE the element with a class of "mytableclass".

Multiple elements can also be selected by using commas. Example:
<style type="text/css">
td, th{color:orange}
</style>

This will make the text inside all <td> elements and <th> elements orange.

other selectors can be found at www.w3schools.com

CSS "color:" property
The "color:" property just simply changes the text color inside an element. Example:

<span>my text</span>
<style type="text/css">
span {color:green}
</style>

The output of this code will be:

my text

That's all you need to know about the "color:" property.

CSS "background:" property
There are a few different properties for backgrounds which can be used.

background
background-color
background-image
background-position
background-attachment
background-repeat
background-size (only the latest browsers support this)

background-color sets the background color of the element. Example:

<style type="text/css">
[element]{background-color:red}
</style>

background-image sets an image to use as a background for the element. Example:

<style type="text/css">
[element]{background-image:url(IMAGE_URL)}
</style>

If the browser cannot load the image for the background, the background color is displayed instead.

background-positon sets the position of the background. Example:
<style type="text/css">
[element]{background-position:center}
</style>
This will make the background appear in the center of the element. Other ones you can do are top, bottom, left or right. You may also use more than one. Example:
<style type="text/css">
[element]{background-position:top left;}
</style>

background-attachment chooses weather you want a fixed background (a background that moves when you scroll the page) or a background that stays in the same place when you scroll.

Example:

<style type="text/css">
[element]{background-attachment:fixed}
</style>

This is like the background on my profile. You can also set it as 'scroll' which is default.

background-repeat sets if you want the background to repeat, and how you want it to repeat. The following options are available:
no-repeat
repeat
repeat-y
repeat-x
no-repeat makes the background only appear once.
repeat (which is set as default) gives a tiled background.
repeat-y makes the background repeat down and up but not across.
repeat-x makes the background repeat across but not down or up.

background-size sets how big the background is. This is useful if you want a background to fit the whole screen (like my profile background which has a size of 100% 100%) or you need it smaller or bigger to fit inside an element.
Example:
<style type="text/css">
[element]{background-size:50px 70px}
</style>

This examples background will have a width of 50 pixels and a height of 70 pixels. You must be aware that background size only works on the up to date major internet browsers.

using just background: can simplify the code lot instead of using all of them. Example:
{<style type="text/css">
[element] {
background-color:red;
background-image:url(image/01740.jpg);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 100%;
}
</style>

All of that can be simplified to:
<style type="text/css">
[element]{
background:red, url(image/01740.jpg), center, fixed, no-repeat, 100% 100%;
}
</style>

since background size is a new thing I don't think it works in the background: section. I suggest doing it separately as background-size.

changing the visibility of an element

You can change the visibility of an element in the following ways:
opacity: (changes how see-through the element is)
visibility: (decides if the element is visible or invisible)
display: (decides if the element is displayed at all and hoe it is displayed if it is)

Opacity can be set as a number between .0 and 1.0. Example:
<style type="text/css">
[element]{
opacity:.7;
}
</style>
Its pretty hard to guess how much the numbers affect the elements so its good to test them.

visibility has two things you can set it as. Visible or hidden. Example:
<style type="text/css">
[element]{
visibility:hidden;
}
</style>

Display works differently than visibility. Visibility can only hide the element so it will take up room on the document. Display can be used so it doesn't take up any room. Example:
<style type="text/css">
[element]{
display:none;
}
</style>

You can also say how you want to display the element using this.
display:block displays it as a block (like a <div> element)
display:inline displays the text normally.
display:table displays it as a table.
display:table-cell displays it as a table cell (like <td> and <th> elements)
and display:table-row displays it as a table row. (like <tr> elements)

There are more but I don't know them.

colors and color codes.
Color codes are used to set a color without a known name. The simplest way to know how to use color codes is to think about the colors being mixed. #f00 is red, #0f0 is green and #00f is blue. These colors mix like ordinary light so # is yellow, #f0f is a purplish color and #0ff is cyan. More colors are available with 6 letter color codes but I'm not that sure how they work. e.g.
<style type="text/css">
body{
color:#fa0;
}
</style>
the letters and numbers you can use in color codes are 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e and f. They all represent the amount of color wanted.

Another way to do it is using rgb. e.g.
<style type="text/css">
body{
color: rgb(50,178,217);
}
</style>
RGB means red green blue. Like color codes, it's about mixing. The number can be from 0 to 25
5. So [color=rgb(255,0,0)]rgb(255,0,0)[/color] is red e.c.t.

rgba also changes the OPACITY of the color when using the codes. This is actually better than using opacity itself because it doesn't affect the whole element. e.g.
<style type="text/css">
[element] {
background-color:rgba(30,232,165,.6);
}
</style>

Well that's all I'm doing for now but I'll be back with more :]

Oh and anything that didn't make sense please tell me so I can change the style in which I say things :o

+16 -0

TRINSTER
13 Sep 2013 21:00

I didn't think those were CSS. I think I was thinking of BB codes.

a.smith
02 Dec 2012 18:22

Quoth Alexis1996:

Headache o.O

lawlp

HefMan4
06 Oct 2012 05:42

yes i know..... i call it easy coding for this website

a.smith
14 Sep 2012 12:56

Quoth HefMan4:

i dont know about scripting well a little tiny bit like [color= ] and [ b] etc.

unfortunately that isn't scripting and has nothing to do with coding. Those codes are only useable for THIS website. Other websites may use simular BBcodes though.

HefMan4
14 Sep 2012 06:31

i dont know anything about scripting well a little tiny bit like [color= ] and [ b] etc.

a.smith
01 Sep 2012 11:03

i think its pretty simple.

HefMan4
01 Sep 2012 07:22

this kinda hard to understand when your a complete novice

a.smith
21 Jun 2012 16:54

Quoth DarkGuy101:

Epic blog, must've taken a while, Personally, I didnt learn much, but I'm sure other people will learn! +1 =)

I can type really fast on ipod so it only took about 20 mins. Im faster on computer though. If you know a lot of CSS you wont learn much anyway xD CSS is really simple.