I've seen all the sites about how to do this, or how to do that, but it's all.. jumbled. There's no syntax skeleton. My question is, how do you start it? Is there a step by step of the most commonly used syntaxs and how they flow in the CSS?
Thanks in advance for the help.
What do you mean? There is no begin. You just type rules, one rule is:
selector and declaration block
declaration block consists of properties and values separated by ':', and is opened and closed by '{' and '}'. So i.e.
H1 {font: 10px Tahoma;}
What I'm asking is is there an order in which the rules should go? Like, do you -have- to put the background rules first, or something else?
| Digital Thoth wrote: |
| What I'm asking is is there an order in which the rules should go? Like, do you -have- to put the background rules first, or something else? |
Nope. You can define whatever you want, in whatever order you want. All you have to remember is the common structure. For example:
Hi,
It depends what you mean by what's first. There is no special order in writing the rules, but if you have 2 rules that apply to the same element, with the same specificity number, and affect the same thing ( background-color ) then the last one will apply.
You should check out w3chools.com to see how specificity apply, it's a long story 
Good Luck when i look at the css of some bigger sites, i often see that they address things alfabetically. That seems strange to me, since i have not come across one editor that can sort css blocks that way. So i'm guessing it's done manualy?
I usually start with the text, then links, then the divs.
| Quote: |
Hobbit wrote:
I usually start with the text, then links, then the divs. |
Okay, I have a problem... wth is a div for? Is that for inline, and p is for block?
| Quote: |
v3rt1go wrote:
It depends what you mean by what's first. There is no special order in writing the rules, but if you have 2 rules that apply to the same element, with the same specificity number, and affect the same thing ( background-color ) then the last one will apply. |
I kinda just remembered that. So would it be a good idea to put body last, so it overrode everything? | Digital Thoth wrote: |
| Quote: | Hobbit wrote:
I usually start with the text, then links, then the divs. |
Okay, I have a problem... wth is a div for? Is that for inline, and p is for block?
| Quote: | v3rt1go wrote:
It depends what you mean by what's first. There is no special order in writing the rules, but if you have 2 rules that apply to the same element, with the same specificity number, and affect the same thing ( background-color ) then the last one will apply. |
I kinda just remembered that. So would it be a good idea to put body last, so it overrode everything? |
Well if you want your body to overwrite everything else... you would have to have those same elements in your body.. but why bother having setting them, then overriding them? | aaronmac wrote: |
Well if you want your body to overwrite everything else... you would have to have those same elements in your body.. but why bother having setting them, then overriding them? |
Well, say you want H1 in one Paragraph to be Blue, and the another paragraph to be Green? You must override then.p[aragraph] is for text, div is for grouping paragraphs, lists, headers and everything else.
| Cal_123 wrote: |
| aaronmac wrote: |
Well if you want your body to overwrite everything else... you would have to have those same elements in your body.. but why bother having setting them, then overriding them? |
Well, say you want H1 in one Paragraph to be Blue, and the another paragraph to be Green? You must override then. |
No, you should give them id's (id="someID"), then you need something like this:
| Code: |
| h1 #someID { rules } |
Here is a very, very good reference for all your CSS needs!
http://w3schools.com/css/default.asp
When I'm trying to look up something for web development, I always go to w3schools first. They're very useful! http://www.w3schools.com/
If you go there, they start from the begining and it's not just CSS you can learn. They have a large selection of coding for you to chose from to learn. Not sure exactly what your asking but I'll try to help by saying write CSS so it makes the most sense to you. I tend to group things by larger sections and work from there. Sometimes I use multiple CSS files to further separate it all. Really it just needs to be easy to read later when you want to change something.
| snowboardalliance wrote: |
| Not sure exactly what your asking but I'll try to help by saying write CSS so it makes the most sense to you. I tend to group things by larger sections and work from there. Sometimes I use multiple CSS files to further separate it all. Really it just needs to be easy to read later when you want to change something. |
That's some really good advice.
Just remember to group things together in a logical way, and comment thoroughly - you can never have too many comments!
Personally, I always start with layout, in order of appearance. Then I'll put general site-wide rules. I usually put page-specific styles, or purely aedthetic styles that are likely to change in a separate css. So I know where to find things.
But you just have to do it and find out what works for you.div's are basically the new frame.
lets say your gonna have 3 sections on your website. a header thats gonna have a background picture and some text, a navigation menu system, and the content area where all the site content(text, pictures, movies, music whatever) will be
you can write your html like this
| Code: |
<body>
<h1> Hey Hey Hey Hey This is my Webpage </h1>
<div id="menu">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</div>
<div id="content">
hey i just got done workin on the new models for the game you can view pictures of them <a href="#">HERE</a>
</div>
</body>
|
now notice you have <a>'s in your content and your menu. but what if you want your content <a>'s to look different than your menu <a>'s. the divs already helped you out for that.
| Code: |
/*external css file*/
h1 {
color:red;
background:blue;
}
#menu {
color:blue;
background:red;
border:solid 5px;
}
#menu a {
color:yellow;
}
#menu a.hover {
color:black;
}
#content {
color:white;
background:black;
}
#content a {
color:pink;
}
|
or if you wanted your content and menu to just follow the same scheme just refer to them both at the same time with
div {color:blue;}
hope i helped W3C schools on CSS for a great reference, at the beginning I couldn't imagine creatind cascading style sheets without them. But I would like to encourage the use of http://www.csszengarden.com . As far as order is concerned, there aren't too many restrictions on this. The only time you really MUST put things in order are when using pseudo classes.
e.g.
The following will work
| Code: |
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected/mousebuttondown link */
|
but this won't because the pseudo order is incorrect.
| Code: |
a:link {color: #FF0000} /* unvisited link */
a:active {color: #0000FF} /* selected/mousebuttondown link */
a:hover {color: #FF00FF} /* mouse over link */
a:visited {color: #00FF00} /* visited link */
|
I usually stylize
1. HTML tags first
2. ID
3. Class
then come down to more specific tag or combined tag 
| lepris wrote: |
| W3C schools on CSS for a great reference, at the beginning I couldn't imagine creatind cascading style sheets without them. But I would like to encourage the use of http://www.csszengarden.com . |
I agree, W3C schools as got some great information and references on learning all parts of CSS.one more thing the sequence has no meaning, almost and this is tricky, because some properities are inherited , like you don't have to define font color for every element, if they use font-color from body tag. The same applies to position and other. I'm not too keen on inheriting yet, so I can't give you the details.
Oh wow! Thanks everyone for replying! I can't believe so many people are willing to help. I've actually managed to get a little handle on the CSS thing, and with the help of you people, it's making alot more sense. Thanks!
But seriously I think that if you ever encounter a practical problem with css and write about it down here, you may be sure that someone gives you some helpful advice. good luck
I usually starts my css-file with this:
| Code: |
* {
margin: 0;
padding: 0;
} |
With this, I reset all the margins and paddings. The reason I do that, is that all the browsers has their own values for margins and paddings on every element (p, h1, etc.). If you reset these values, you are forced to make your own values, and it will be the same no matter what browser you use.
--
other than that;
keep it sorted and tidy
validate
comment well! Hey,
I thought it is my turn to post a question. Does anyone know how to embed and external font(like located on the serwer together with the rest of site files) to the website using CSS?
I've heard that mozilla browsers do not support this at all, but IE does, so why shouldn't we use it, yes?
