Help Understanding CSS Syntax
-
-
- Robert W
- Elite Rocketeer
- Posts: 815
- Thanks: 0
- IT
-
I'm a little confused on some CSS sytax. Can someone help me understand the the following:
I understand that # represents the ID but why would there be an extra div after that?div#header div,
div#header td {
color: red;
}
Don't have a clue why the "." would be used here as opposed to the "#"div.customlink {
width: 50px;
}
Thanks ;D
-
-
-
- GollumX
- Elite Rocketeer
- Posts: 2817
- Thanks: 0
-
first one..
the styling will be applied to whatever div sits inside div#header
second one..
'.' denotes a class.
Google css classes for more info
- Say no to Internet Explorer 6.
twitter.com/mark_up
-
-
-
- James Spencer
- Preeminent Rocketeer
- Posts: 46340
- Thanks: 50
-
w3schools.com/css/default.asp
is a dictionary of sorts for this sorta stuff
- James Spencer / Developer & Support / Hull, UK
-
-
-
- Robert W
- Elite Rocketeer
- Posts: 815
- Thanks: 0
- IT
-
Thanks Gollum & James. I've been reading stuff at W3 but just couldnt get a grasp on some of this.
Another question: I'm using Firebug...it tells you which CSS file is being used for the style but how do I go about locating the file that is generating the code and/or sending the data into the HTML code when I view it in Firebug? For example, when you log into a site and Inspect to see HTML/CSS that is making it up, how do I determine which file contains the code for the login? i.e. Hi Robert or Time logged in 8hr 12mins. When I inspect, the text displayed already exists in the HTML.
This has been troubling me for days ??? ???
Thanks - Last Edit: 17 years 8 months ago by Robert W.
-
-
-
- James Spencer
- Preeminent Rocketeer
- Posts: 46340
- Thanks: 50
-
This is where you have to get creative ;D
Lets take CSS as this is the easiest. In the right pane, it shows you which file is being used to generate the CSS as well as the line reference. In 99% of the cases, this is in the template, so easy to find. But what if it is something else, still easy to find by using firebug. Hold down the CSS tab to reveal the dropdown, scroll down to the CSS file name and it should have a relative path to it.
Something else that appears in CSS is "elemental style" which is a pain It is CSS generated from the .html/.php code itself so almost impossible to trace in firebug. In most cases, you have to take an educated guess.
The same is with HTML code that does not have CSS. The best example are content items with the table within table etc... with no classes or IDs. These are generated by Joomla but where, you just have to guess - an educated guess, but a guess nevertheless. - James Spencer / Developer & Support / Hull, UK
-
-
-
- Robert W
- Elite Rocketeer
- Posts: 815
- Thanks: 0
- IT
-
James....you read my mind on the "elemental style". I've been trying to figure that one out too and have come to the same conclusion as what you have mentioned. I was hoping though that I was overlooking something and that you or someone here were gonna set me straight
Oh well, at least I know I wasn't missing something.
For the most part, if I can locate the .html/.php file than I should be able to find the generic CSS code right? Anything else that I should consider or look for that you can think of?
Once again, I thank you for your help. As so many others have mentioned on here, you're truly a asset to this forum.
-
-
-
- James Spencer
- Preeminent Rocketeer
- Posts: 46340
- Thanks: 50
-
With Joomla, it is kinda easy to locate the element style is everything is split into modules or components. So if you are Inspecting a module and you find element style, you know it will be mod_modulename.php etc...
It depends on the case but in most instances, you can find the element style easily For example with RokSlideShow, it uses element style for its CSS. You can see this in the HTML pane, maybe something like <div id="myslideshow" style="..." etc... Then I would just locate the style code in the .php file or whatever
- James Spencer / Developer & Support / Hull, UK
-
-
-
- Steve A
- Jr. Rocketeer
- Posts: 21
- Thanks: 0
-
I have change the menu color before, but I am having difficult on the new 1.5 elemental.
Where do you change the hover menu style and drop down...Please see attached.
I have changed the colors of the images in menu imgae folder, ut it does not seem to work. Am, I in the right place?
Steve
-
-
-
- Matthew Reilly
- Rocketeer
- Posts: 76
- Thanks: 0
-
ok to answer the first post as simple as possible here is an example
in your css you havediv#header div { color: red; }
so this is what you will have in you html/php page<div id="header"> <div> some text </div> <div>
if you had in your css you havediv#header div div { color: red; }
then you would have in html/php page<div id="header"> <div> <div> some text </div> </div> <div>
see how everytime there is a div added to the css that you have to add an extra div into the header div on the page to get the colour red to target the div in question
you can also us this to target other elements like h1, h2 etc
cssdiv#header h2 { color: red; }
html/php page<div id="header"> <h2> some text </h2> <div>
and here is something that you can put directly into a page to see what is going on
in the head put (just before the </head> tag<style type="text/css"> div#header{ color:##66FF00; } div#header div{ color:#FF0000; } </style>
and in the body put this<div id="header"> green text <div> red text </div> </div>
you will see that the first piece of text is green that is because it is in the header id
the second is red because in the css it is looking for the header id plus a div in order to change the text red
does this make more sense? - Techno, House, Electro Music SIte
-
Time to create page: 0.092 seconds