CSS
Your site can't really function without CSS these days. CSS can get tricky. If there's something you wish to see in here please let me know. Hopefully we can show the beginner something new in here.
How to Speak CSS (The Syntax)
Sunday, 18 September 2005 17:26
CSS Shortcuts
Sunday, 18 September 2005 17:08
Color Shortcuts
When digging through other people's css (people who are better than you, at least in CSS), have you seen this:
color:#33e
"But i've always learned there were 6 places for a hex value!" Well you know that the hex is RGB R(xx) G(xx) B(xx). The shortcut is, if the two values are going to be the same for each channel then you can just use one. As in the above example its the same as saying:
color: #3333ee;.
Examples:
color: #03f = #0033ff
color: #eb4 = #eebb44
Font Shortcuts
font: 11px/13px Verdana, sans-serif
"What the heck? Are why is there two pixel values?" The first one is telling you that the TEXT is going to be 11px. The 13px tells you that the line-height is going to be 13px! That's easy enough! You can mix and match units too: for example: 10px/1.5em. This is text of 10px with a line-height of 1.5em. So this way you dont have to make a new CSS declaration for line-height: 1.5em because you've already declared it with the shortcut method.
margin: 30px 10px
This shortcut will work with any CSS attribute that will allow you to specify a top, right, bottom, left values. Those being: margin, padding, border and let's hope I didn't leave anything out. Let's say you wanted a top margin of 10px, right of 5px, bottom of 10px and left of 5px. Easy enough... you could write:
The Long Way
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
(Whew!) OR
The Grouped Method
margin: 10px 5px 10px 5px; Much better! Now you may know that when using the grouped metho you always start at the top and go clockwise. So those values are for: top, right, bottom, left respectively. Notice values opposite of each other are the same. Top and bottom are both 10px and both left and right are 5px. Only when they are opposites can you use this shortcut. Using our example, we can use the new short cut to make our CSS read: margin: 10px 5px Always start with your top value. In our case top is 10px so we can group top to bottom and left to right.
examples:
padding: 5px 8px
Is the same as
padding: 5px 8px 5px 8px;
Feed Station |
Bits of WorkLight Engineering
Light Engineering is my latest CSS/XHTML valid site using very clean and strict code. Also uses a jQuery slide show on the homepage. |

CSS