Example CSS Paragraph

donalg1

Hi,

Just wondering could someone show me the code required for a basic css sheet linked to a html sheet for a paragraph,

I have been able to set the font size and font family in the style sheet but when i try to add a border to the paragraph it doesnt seem to work.

So far this is what i have

p {font-size: 20px; font-family: "garamond";}

Any ideas how to add a border to the paragraph, is it done by inserting the code within the {} above after the font or do I need a new line and if so how does it work?

Webmonkey

p {font-size: 20px; font-family: "garamond"; border: solid 1px black; }

Try googling.

bobbytables

Hi donalg1, you've most of the hard work done

The format for css is:

[selector]{[your style definitions for element(s) that match the selector]}

Each style definition is separated by a ;
and you can line space each definition or group them on single lines. There are some formatting conventions out there, but as long as your code is syntactically correct, it will validate as CSS.

So to modify your existing code to include a border around the paragraph 'p' selector, it would now look like this:

p {font-size: 20px; font-family: "garamond"; border:1px #000 solid;}

All I will say though is take note of what styles you apply to elements, as some stuff may have deprecated and been replaced by newer approaches. Also take note that placing such stringent font rules such at the above, you are increasing the probability that the site will render differently cross platform. Bear in mind that not everyone will have the same fonts as you on your development machine.

Also here's a cheat sheet for CSS:
http://coding.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf

bobbytables

/snap

Jesus Webmonkey, what are the chances that we both suggested a 1px solid black border

komodosp

bobbytables wrote: »

Also here's a cheat sheet for CSS:
http://coding.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf

"Forbidden"... now I just feel rejected..

OREGATO

komodosp wrote: »

"Forbidden"... now I just feel rejected..

Hit refresh on the page or click on the link and click return, should work then