Re: CSS & tables

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

 



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@xxxxxxxxxxxxx
   http://www.ptahhotep.com
   http://www.chiccantine.com/andypantry.php


-- 
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php


[Index of Archives]     [PHP Home]     [Apache Users]     [PHP on Windows]     [Kernel Newbies]     [PHP Install]     [PHP Classes]     [Pear]     [Postgresql]     [Postgresql PHP]     [PHP on Windows]     [PHP Database Programming]     [PHP SOAP]

  Powered by Linux