Re: CSS & tables

From: Date: Tue, 19 May 2009 15:39:55 +0000
Subject: Re: CSS & tables
References: 1 2 3 4 5 6 7 8 9 10  Groups: php.general 
Request: Send a blank email to php-general+get-292782@lists.php.net to get a copy of this message
Nathan Rixham wrote: > PJ wrote: >> Nathan Rixham wrote: >>> >>> lol >>> >> Glad >> > > </snip> as they say > > did you ever get any help explaining css? > > just in case here's the ultra basics > > you have selectors and declarations > > selectors can be: > .classname (a class, to be applied to many objects) > #someid (a single object) > p (redefine an html element) > > declarations combine to make a rule > background-color:red; > border-width:1px; > font-size:22px; > > you combine declarations together and wrap them in a selector to make > rules, rules are applied to html element(s) that the selector matches. > > p { > font-size:11px; > color:blue; > } > > the above will give all text inside a <p>aragraph blue text sized 11px. > > then you can combine selectors to match specific element(s) and thus > style your document. > > div p strong { > color:red; > } > > div ul strong { > color:blue; > } > > the first example will turn any text in a <strong> which is in a > <p>aragraph inside a <div> red. > > while the second will turn any text in a <strong> which is in a <ul> > inside a <div> blue. > > you can also use commas to give one declaration multiple selectors > > table, image, div { > border-style:none; > } > > the above will ensure all tables, images and divs have no border. > > p strong, blockquote strong { > font-size:15px; > } > > and the above will match all strongs inside either a <p> or a > <blockquote> and make the font size of them 15px. > > we also have more selectors which are less commonly used > > p > strong { > > } > > this will match any strong that is a direct descendant of a p > so it will match <p>this is <strong>something</strong> else</p> > but it won't match <p>this <span><strong>not matched</strong> at > all</p> > > then we have #id's and .classes; in html documents each item can have > an id attribute, id's should be unique as its an identifier (id) lol - so > > #something { > text-align:center; > } > > <div id="something"> the above would match this.. </div> > > > ids have the highest precedence, so if you had the following: > > div { > text-align:left; > } > #something { > text-align:center; > } > > <div> this would be aligned left </div> > <div id="something"> and this would be centered </div> > > as for classes, they can be used with any element, and applied > multiple times. > > .redText { > color:red; > } > > <p> normal text but <span class="red">this is red</span> and back > to > black</p> > > and you can use multiple classes such as: > <p class="red padleft center myborder"> some content.. </p> > > and then combine the selectors too > > div p.red { > color:red; > font-weight:normal; > } > > ul li.red { > color:red; > font-weight:bold; > } > > so a <p class="red"> inside a div will be red > and a <ul><li class="red"> will be bold and red > > help any? > Of course it helps. But I am most grateful to Benjamin Hawkes-Lewis for his links. In particular, * http://css.maxdesign.com.au/selectutorial/ which I just dashed through and found it most clear and informative. I now understand things much, much more clearly and should have much less stress in coding CSS. Thank you Nathan, thank you Benjamin & all who were kind and generous enough to share your invaluable insights. :-* -- Hervé Kempf: "Pour sauver la planète, sortez du capitalisme." ------------------------------------------------------------- Phil Jourdan --- pj@ptahhotep.com http://www.ptahhotep.com http://www.chiccantine.com/andypantry.php

« previous php.general (#292782) next »