CSS for Dummies!

>the blog<

Selectors

By Ruben Garciaeztigma. Friday, August 3, 2007 6:35:43 PM

, ,

Before getting our hands dirty by pimpin' our blogs, we need to understand what the selectors are. In this post we'll discuse that.

As I told you before, a selector is the part of the page that we're going to modify. Your Opera Blog handles three kinds of selectors: id, type and class. The id selector (#name) is the one that modifies a certain section of the blog, such as the header, the sidebar or the posts. 
#top {
	background:#335fa3 url(/community/graphics/themes/top-blue.gif); 
	border-bottom:1px solid #ddd;
	color:#fff;
	}
If you take a look at the source of you blog, you'll find something similar to this 
<div id="top">
That means that everything between both "divs" will be modified by the #top selector. The type selector is used to modify a specific HTML tag, within the id selector. To use it you just have to type the tag you want to modify in front of the id selector. 
#top h1 {
	padding-top:22px;
	}
In the example, we are modifying the h1 tag within the #top selector. Finally, a class selector applies to many elements at once, or a sub-set of specific HTML elements, like the color of the username link (it will only modify such item) 
a.username:link,  a.username:visited,  {
	color:#176b9b;
	}
As you can see, you can apply style to several selectors at once just by separating them with a comma. TASK! Identify the selectors in the CSS of the last post and write down which type they are. On the next post we're going to start having fun!

10New FORUM

Comments

-demiphonic Wednesday, August 8, 2007 1:58:32 PM

explain "source" p tech people take that for granted bigsmile

urrrrr so:

#menu {
background:#f8f8f8 url(/community/graphics/themes/menu1.gif);
border-bottom:1px solid #fff;
}

would be a selector? or is just this part: #menu considered the selector? bigeyes

Ruben Garciaeztigma Wednesday, August 8, 2007 4:00:15 PM

You can see the source code of your blog by choosing View --> source in the menu of your browser.

The source code are the instructions that your browser follows to display the page.

Only the #menu part is considered the selector, the other parts are the properties and the values, which we'll cover later.

-demiphonic Wednesday, August 8, 2007 4:55:06 PM

ahhh smile thanks for that p

Dark FurieFurie Saturday, August 18, 2007 2:03:19 AM

And how do us phone users see the source code? Is there somewhere we can go for that?

If not could we have a large selectors "map" to reference?

.Kite Geek Saturday, September 8, 2007 10:11:27 PM

O,o In need of help please.

http://files.myopera.com/Kite%20Geek/files/Transformers-Banner5Kite.jpg

OK, I have my graphics in my file thingy here in Opera as it shows...

But, when you put in the infor into the CSS design page with ( and ) around it of course p

The % of the %20 goes away. O,o And, I can not see the image.

I tried using - , and _ and nothing, and also yousillythingyou. But, nothing has worked... Did I kill it?

Sorry if this is the wrong spot for this. @,*

Violeta Rosalesvioletisha Saturday, September 8, 2007 11:37:04 PM

I think you already fix it. If you don't, tell me! smile

.Kite Geek Sunday, September 9, 2007 1:47:08 PM

LOL, no I did not fix it. I knew that I can also link direct to ImageShack or another image host like that.

It seems that CSS treats the % in from of 20 as nothing. Or, the % is used in another way with CSS... Not sure yet. p

But, for now I do have a means to have my own images show. smile

Sheesh, I thought my basic HTML would help me more. LOL p

Louc louderf_manila Thursday, September 20, 2007 8:19:28 AM

O,o In need of help please.

http://files.myopera.com/Kite%20Geek/files/Transformers-Banner5Kite.jpg

OK, I have my graphics in my file thingy here in Opera as it shows...

But, when you put in the infor into the CSS design page with ( and ) around it of course P:

The % of the %20 goes away. O,o And, I can not see the image.

I tried using - , and _ and nothing, and also yousillythingyou. But, nothing has worked... Did I kill it?

Sorry if this is the wrong spot for this. @,*



I guess Im having the same problem sad

http://files.myopera.com/louderf_manila/albums/359088/chalkboardsnap%20copy.png

.Kite Geek Thursday, September 20, 2007 9:15:22 AM

Use ImageShack.Com to host the images, I had to do that. smile

-demiphonic Friday, September 21, 2007 2:42:50 AM

smart Kite

.Kite Geek Friday, September 21, 2007 12:54:48 PM

The other option I think will work... Is to use your blog to act as if you will upload an image... It loads it in a way that will allow you to post the code... And, stores it on Opera's servers, you can then cut that code paste it to where you need it and poof... your CSS now has you image hosted where it could not with a %20 before as the link to the image does not include that part... It is only half of the link I think... O,o Not sure why it works.


Louc louderf_manila Friday, September 21, 2007 10:14:24 PM

I see but still wont work... I guess I need more time to learn the codings. Thanx kite. p

Violeta Rosalesvioletisha Saturday, September 22, 2007 3:58:41 AM

Ok boys... Here we go!!

I don't know what's happening with that %20, but i have a solution to all of your problems, the %20 means a "blank space" (wich is not recomended on web sites) so:

louderf_manila: the name of you image is chalkboardsnap copy.png, right??? Well.. RENAME IT to chalkboardsnapcopy.png or chalkboardsnap_copy.png bigsmile bigsmile That's it. Please try it and tell me, ok? wink

Louc louderf_manila Saturday, September 22, 2007 4:11:48 AM

Yea It works but the image seem like I should resize it but I dont know what's the width and the height that fits the image exactly p
Thank you guys for helping me out bigsmile
Gracias mi amigos/amigas xD

Violeta Rosalesvioletisha Saturday, September 22, 2007 4:19:51 AM

It must be 921 x 170 px smile smile

De nada amigo! bigsmile

Dark FurieFurie Saturday, September 22, 2007 10:35:59 AM

921? Bugger!

.Kite Geek Saturday, September 22, 2007 10:42:55 AM

OK, I have one... Why do flash movies show and work... And, are as large as you want, and are a few MB's in size...

And, a 1.3mb gif about the size of the reply entry box will not load as a .gif in my blog? It ends up being converted to a .jpg img on the blog, while the image is still stored as a .gif... O,o

I am thinking it has a px size limit I must be over... sad

But, I can make the same .gif into a Flash movie... and it works and at any size... O,o

Dark FurieFurie Saturday, September 22, 2007 10:47:50 AM

Randy's gonna get you for that avatar. pssst Keep it for a while. I wanna see his reaction.

Louc louderf_manila Saturday, September 22, 2007 11:46:07 AM

Thanx violy p
lolz furie,
brilliant kite xD

.Kite Geek Saturday, September 22, 2007 2:00:07 PM

He saw it already silly.


And I have yours also p

Dark FurieFurie Saturday, September 22, 2007 2:57:34 PM

Mine has evil meaning. Plus I have it on official loan from a business so don't muck with it please.

Louc louderf_manila Saturday, September 22, 2007 2:59:58 PM

Lolz, dont get serious p

-demiphonic Saturday, September 22, 2007 3:27:20 PM

la de da de da...smile ...left...right

hmmm... I find I comment twice as much these days bigeyes ..I wonder why? left

Dark FurieFurie Saturday, September 22, 2007 6:36:44 PM

Because you are truly learning the way of the Furie. ninja

Kite ya twonk. irked

.Kite Geek Saturday, September 22, 2007 7:57:47 PM

LOL I made that weeks ago, LOL p

Yeah I think the red is not cute enough... p LOL Hmmm... Maybe I should use the Opera Admin avatar I mad instead... p LOL Cept... It like all the other avatars I have has been changed a bit p

-demiphonic Sunday, September 23, 2007 2:48:47 AM

lol ..."twonk" lol!!!!

.Kite Geek Sunday, September 23, 2007 9:20:00 AM

LOL I must be moving up in my evilness... O,o p

Louc louderf_manila Sunday, September 23, 2007 9:11:13 PM

Thats horrible kite bigsmile

Jenngflladydeath Tuesday, December 18, 2007 9:01:42 AM

This is my one question...Am I missing something? I dont understand

/community/graphics/themes

If I have a gif or another graphic I want to use..Do I make a "directory/folder" in my files where I upload graphics in my account?

I hope I worded that right?

Thanks for help bigsmile

-demiphonic Thursday, November 27, 2008 7:13:26 PM

waz up Dummies? bigsmile

okay that didn't come out right right

speaking of "Dummy" o ..I need a Code, Code bigeyes yes a Code, Code!

I sound stupid don't I sad

you know! mad the CSS to change the background colour & text colour when you write a code for someone to see. bigsmile (Like was done in this post by EZTIGMA)

spock

Violeta Rosalesvioletisha Thursday, November 27, 2008 7:29:46 PM

Hi Randall!!! bigsmile

I think that would be:

pre , code {background:#FFFFFF;
color:#000000;}


Test it wink.

-demiphonic Thursday, November 27, 2008 8:00:51 PM

hmmm I'll try it later bigsmile thanks p

-demiphonic Thursday, November 27, 2008 8:22:31 PM

sweet bigsmile it worked yes

hey I didn't envision this group for nuthin! lol

thanks violetisha wink

Violeta Rosalesvioletisha Thursday, November 27, 2008 10:06:08 PM

No problem Randy smile

I added your friend, but it seems to be offline sad.

-demiphonic Friday, November 28, 2008 2:18:08 AM

hmmm well maybe you'll get her tomorrow.

her CSS is basic so it will be a breeze to fix for someone like you up

Thanks for everything girl bigsmile

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies

February 2012
M T W T F S S
January 2012March 2012
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29