New messages Members Forum rules Search
  • Page 1 of 1
  • 1
Forum moderator: kostova, Brazen  
uCoz Support Forum by uCozers » Coding » CSS » Guide: Selectors (sml[tutorial]A Guide to Selectors)
Guide: Selectors
AltricDate: Wednesday, 2009 September 23, 3:49 AM | Message # 1
Font size: A | A |
Major
Group: uCozer
Message: 81
[ ]
Offline
Selectors

Coding CSS can be difficult to understand but is pretty easy. A Selector can be a rule as simple as this.

Code
H1 { color: blue }

If you put this code in your CSS Stylesheet. Every time you write

Text

the "Text" will be blue.

If you are going to use this code, here's where you would put it.
Admin Bar -> Design -> Site Design Customization -> Stylesheet (CSS)

When you get to the Stylesheet, Search (ctrl + f) ".blocktitle" Place the CSS Code Above that line.



Grouping Selectors

You might be using a lot of CSS Selectors, for the same thing. Well now you can group them together. Go from this. (Code Below)

Code
h1 { font-family: sans-serif }   
h2 { font-family: sans-serif }   
h3 { font-family: sans-serif }

To this. (Code Below)

Code
h1, h2, h3 { font-family: sans-serif }



More Practice

Lets say you are trying to make the Text inside an H1 Code, that is emphasized, red. You've placed the following in the CSS, now you go and write the html part.

Code
h1 { color: red }   
em { color: red }

Although you were trying to make the emphasized words red. It won't work in this case.

Code
<H1>This headline is <EM>very</EM> important</H1>

So Instead we, will supplement those two codes with a rule that sets the text color to blue, whenever an "Em"(Emphasized) occurs anywhere inside an "H1"(Header one). This is the code we would use.

Code
h1 em { color: blue }

If you need help or have questions post them here or PM Altric.


"When you get frustrated, just ignore it and keep on enjoying life."
 
YoshoDate: Wednesday, 2009 September 23, 7:27 AM | Message # 2
Font size: A | A |
Sergeant
Group: User
Message: 39
[ ]
Offline
you mean if you combine h1 with em it will be blue?
Quote (Altric)
h1 em { color: blue }

Quote (Altric)
h1 { color: red }
em { color: red }
 
kostovaDate: Wednesday, 2009 September 23, 11:19 AM | Message # 3
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
Quote (Yosho)
you mean if you combine h1 with em it will be blue?
Yes. It's css hierarchy. One selector, or visualizing it from the tag element perspective must go after the other.

let's say you have an unordered list.
<ul>
<li>first list</li>
<li> <span>second <a href="/">list</a></span></li>
</ul>

you follow like so in the first list(don't pay attention to the >, it's there for explaining):
ul > li [ul li {selector:value;}]

in the second list, you would follow direct such as a website url (domain.com/path/to/file):
ul > li > span [ul li span {selector:value;}]

In that case, you would be specifying the span inside the list element inside the unordered list.

Now if you were to target the link tag (<a>), then you would code the following:
ul > li > span > a [ul li span a {selector:value;}]

Those are just the basics, it can get a bit icky once you become really involved in css and designing. There are more efficient ways of specifying a single element you want to change, some of which involve taking into account compression.

Edited Byheysupp - Wednesday, 2009 September 23, 11:20 AM
 
BrazenDate: Wednesday, 2009 September 23, 11:33 AM | Message # 4
Font size: A | A |
Colonel
Group: Administrator
Message: 304
[ ]
Offline
Quote (Yosho)
h1 em { color: blue }

h1 { color: red }
em { color: red }

I am getting confused here too, how can h1 em result in blue when h1 is red and so as the em?


LOL With Us! l Game Blog l 3D Autos

"knowledge without wisdom is curse" Alex Seb

 
kostovaDate: Wednesday, 2009 September 23, 12:18 PM | Message # 5
Font size: A | A |
Colonel
Group: Administrator
Message: 268
[ ]
Offline
Quote (Brazen)
I am getting confused here too, how can h1 em result in blue when h1 is red and so as the em?
Specification in css overwrites general attributes.

using em as a selector, you're saying all em's are acquiring this trait.
If you were to specify a route to a single em, then you can change that specific attribute and css will automatically skip em's without that direction or automatically overwrite a preexisting attribute.

It's like a hover element:
a {color:#fff;text-decoration:underline;}
a:hover {color:#ddd;text-decoration:none;}

Except hovers only change onhover, while using the css hierarchy you can keep this change on a desired element.
On the other hand, if you were going for validation, using all lowercase is required [h1 not H1].

I'm going to make a tutorial soon about this, more in depth.

Edited Byheysupp - Wednesday, 2009 September 23, 12:24 PM
 
AltricDate: Saturday, 2009 October 24, 6:36 AM | Message # 6
Font size: A | A |
Major
Group: uCozer
Message: 81
[ ]
Offline
I understand... how confusing CSS is to learn or for that matter understand, but you'll get used to it. It just takes some time.

"When you get frustrated, just ignore it and keep on enjoying life."
 
uCoz Support Forum by uCozers » Coding » CSS » Guide: Selectors (sml[tutorial]A Guide to Selectors)
  • Page 1 of 1
  • 1
Search:


Copyrights uCozers 2009 - 2024 To TOP
Refresh Smileys Manager