Re: CSS & tables
| From: | Nathan Rixham | Date: | Tue, 19 May 2009 14:28:47 +0000 |
| Subject: | Re: CSS & tables | ||
| References: | 1 2 3 4 5 6 7 8 9 | Groups: | php.general |
| Request: | Send a blank email to php-general+get-292774@lists.php.net to get a copy of this message | ||
PJ wrote:
Nathan Rixham wrote:</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?lolGlad