basic css question

29 views
Skip to first unread message

BellK

unread,
Nov 28, 2007, 6:56:45 PM11/28/07
to iPhoneWebDev
Hello- I have a basic css question.
I am working on an iphone application for my company using our
salesforce backend. I am having difficulty using the styles and
styleClasses for the iui within the salesforce code (apex
visualforce). Is there a special way to read the css text file to help
me understand which line items are styles, which are style classes,
and how they report to eachother etc?
Thanks

John

unread,
Nov 28, 2007, 8:47:59 PM11/28/07
to iPhoneWebDev
Hi BellK,
how familiar are you with CSS?

john

AwayBBL

unread,
Nov 29, 2007, 8:38:28 AM11/29/07
to iPhoneWebDev
BellK, the .css file is a plain text file that you can open from any
text editor. ... I assume that was your question?
> > Thanks- Hide quoted text -
>
> - Show quoted text -

Randy Walker

unread,
Nov 29, 2007, 6:25:29 PM11/29/07
to iphone...@googlegroups.com
Everything in a css file is technically a style/CSS rule.

CSS rules that are assigned (started off with a selector) to an html element
such as p, a, td, img etc. are called base selectors.
example:
P {
margin:10px;
}

CSS rules that start with a pound sign or period ("#" or ".") are called
custom selectors. The former being an ID selector and the latter being a
Class selector. ID's are unique and can only be used on one page element.
So an ID selector is for targeting one specific element on the page. Class
selectors don't "report" to anything, (in case you thought css classes were
like classes in other languages like Java) and can be used an infinite
amount of times on a page.

Let's say there was a class called ".mything", it could look something like
this in a css file:
.mything {
width:200px;
height:40px;
border: solid 1px #f00;
color: #fff;
background-color:#666;
font-size:16px;
line-height:40px;
}
That would style almost any element set to that class as 200px wide, 40px
high with a red single px border. The other properties within would set the
style of the text within the element.

The way to use that class selector style for say, a div, is to write the div
like this:
<div class="mything">Your Text Here</div>

If that same css style started instead with an ID selector, "#", as in
"#mything" then the style would be applied to the one page element with an
ID of "mything."
The way to use that for your actual div is to write the div like this:
<div id="mything">Your Text Here</div>

So use class selectors for general overall stylings and ID selectors for
more specific targeting of a single page element.

You can mix/match styles by class/ID name, as well as assigning a certain
class to only divs or table cells as in:
div.mything {//all divs set to the class "mything"
properties:values; here
}
div#mything {//the one div with the id of "mything"
properties:values; here
}
td.mything {//all td's set to the class "mything"
properties:values; here
}
td#mything {//the one td with the id of "mything"
properties:values; here
}
Using them thusly:
<div class="mything"></div>
<div id="mything"></div>
<td class="mything"></td>
<td id="mything"></td>

That should get you going in the right direction. There are millions of
tuturials and how-to pages, as well as books, on CSS styling that would not
be possible to cover in a post.
I recommend: Beginning CSS Web Development From Novice to Professional -
Apress

-=Randy

BellK

unread,
Nov 29, 2007, 1:21:18 PM11/29/07
to iPhoneWebDev
Thanks, I have no trouble opening the file, I just am unfamiliar with
CSS and so I cannot understand what the different style and style
classes are named so I am not able to reference them properly in my
other code.

For instance, I know there is a class "toolbar" and "body". what
styles report to these classes? are there other classes?
I get confused about half way into the .css text file where the links
and link groups are defined. How can I decipher the hierarchy from the
text file?

Thanks!!! i know this must be a very silly questions but I am eager to
learn.

BellK

unread,
Nov 29, 2007, 4:37:03 PM11/29/07
to iPhoneWebDev
Thanks for your help. I have no trouble opening the file, but as I am
new to css I need some assistance deciphering the different styles and
classes so I can reference them properly in my other code. Can anyone
help me understand how the iui css is organized into classes and
styles?

It looks like there is basically just the toolbar and body. I get lost
in the 3rd section when it gets to links.
Sorry for the basic question, but I am eager to learn!


On Nov 29, 5:38 am, AwayBBL <away...@gmail.com> wrote:

AwayBBL

unread,
Nov 29, 2007, 7:23:41 PM11/29/07
to iPhoneWebDev
Probably a good place to start is... http://www.w3schools.com/css/default.asp
> > > - Show quoted text -- Hide quoted text -

John

unread,
Nov 29, 2007, 10:08:51 PM11/29/07
to iPhoneWebDev
Or, this one (I wrote it :-)

http://www.westciv.com/style_master/academy/css_tutorial/index.html

Or if you prefer a tutorial style thing - this gets you up to a pretty
fair standard in a couple of hours hands on

http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html

A lot of people spend years with a little CSS knowledge, but getting a
fair grip takes a few hours at most. So I do recommend it - biased as
I am :-)

Please feel free to fire off with specific questions

j

On Nov 30, 11:23 am, AwayBBL <away...@gmail.com> wrote:
> Probably a good place to start is...http://www.w3schools.com/css/default.asp
Reply all
Reply to author
Forward
0 new messages