Jump to content

Css Shorthand


uaintgotthisid

Recommended Posts

Hi all,I found a document previously to do with Shorthand CSS. I found the "all the border declarations in one statement" within W3schools to be blowing it's own horn rather loudly, despite only having about 3 of the declarations.Anyway I did previously find a document, but being a muppet I did not save it to my favourites. It went a little something like this:

  • which order to do the borders (Clockwise: Top, Right, Bottom, Left)
  • What you HAD to have to make border work (width/style)
  • other troubleshooting issues such as: when writing in shorthand, it goes in this order blah blah blah blah, of which 3 of the options could have medium as a potential answer, hence, it became confusing very quickly and this guy had made an excellent tutorial on all of these little issues. He seemed like he knew his stuff.

Anyway, I cannot find the article but at the time it taught me a lot (not how to remember, or be organised apparently). All the articles I can find are showing me the rough principles of short hand using margin/border etc as examples over and over again, whereas, I feel most people will happily grasp the general concept, but will not understand what breaks this concept, which order the sides go in etc.Does anyone know where to find, (a ) the article I mention or (b ) another similar article please. This article comes close to what I mentionedCheers.

Link to comment
Share on other sites

Hi all,I found a document previously to do with Shorthand CSS. I found the "all the border declarations in one statement" within W3schools to be blowing it's own horn rather loudly, despite only having about 3 of the declarations.Anyway I did previously find a document, but being a muppet I did not save it to my favourites. It went a little something like this:
  • which order to do the borders (Clockwise: Top, Right, Bottom, Left)
  • What you HAD to have to make border work (width/style)
  • other troubleshooting issues such as: when writing in shorthand, it goes in this order blah blah blah blah, of which 3 of the options could have medium as a potential answer, hence, it became confusing very quickly and this guy had made an excellent tutorial on all of these little issues. He seemed like he knew his stuff.

Anyway, I cannot find the article but at the time it taught me a lot (not how to remember, or be organised apparently). All the articles I can find are showing me the rough principles of short hand using margin/border etc as examples over and over again, whereas, I feel most people will happily grasp the general concept, but will not understand what breaks this concept, which order the sides go in etc.Does anyone know where to find, (a ) the article I mention or (b ) another similar article please. This article comes close to what I mentionedCheers.

You are mixing two different things.margin: 1px 2px 3px 4px;Top is 1, right is 2, bottom is 3 and left is 4 pixels wide. This works for padding as well.border: thin dotted red;All sides are thin, dotted and colored red. You can't address individual sides this way. But you can use the same short hand for each of the sides.border-bottom: thick double #000#000 is itself a short hand of #000000. #abc is shorthand for #aabbcc.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...