basic css guide
Very, very basic introduction to CSS as relevant to LJ layouts, mostly just covering properties.
1. Margins and Padding
The text would be like this
The margin of an element is the space between it and everything else around it. In the above image, the margin would be the blue-shaded area around the black bordered box.
The green-shaded area within the box, between the border and the text, is the padding.
syntax
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
You can also set your value in percentages.
Shorthand
margin: 0px 0px 0px 0px;
^works clockwise from the top like the cardinal points, so, margin: top right bottom left;.
tip: you won't always need to include all four points. For instance, margin: 10px; will give you an even margin of 10px and margin: 5px 10px; will give you a margin of 5px on the top and bottom, and a margin of 10px to the right and left.
Negative Values(this only applies to margin)
margin-right: -120px; = margin: 0px -120px 0px 0px;
Margins usually thrust an element away from its default position, but adding a negative margin will pull it towards the specified direction
Auto
margin: 0 auto; <- setting both margin-right and left to auto will center the layout.
margin:0 auto 0 0; <- setting both margin-right to auto will align it to the left.
margin:0 0 0 auto; <- setting both margin-left to auto will align it to the right.
Using auto will let the browser set the margin; generally you will use this for centering and so forth.
2. Borders
I don't need to explain this, do I? There's a long list of properties for border, and you can see the full list here. I'm just going to cover some basic and frequently used arrangements.
syntax
Shorthand
border: 1px solid #EEEEEE;
border is most often used in the shorthand, as above: border: width style color;. The order here isn't important.
border-top: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
Separates
border-width: 1px;
^ like margins, this works clockwise: border-width: top right bottom left;
border-style: solid;
^ choices: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset (works clockwise)
border-color: #EEEEEE;
^ also clockwise: border-color: top right bottom left;
3. Backgrounds
Again, this is pretty much self explanatory.
syntax
Shorthand
background: #EEEEEE url(http://image.com/background.png) repeat scroll 0 0;
In the order of: background: color image repeat attatchment position;.I use this most often when using an image for a background, otherwise I just use background-color.
Break it up
background-color: #eeeeee;
Set this to a colour, or to transparent to see through the the lower elements
background-image: url(http://);
...yup.
background-repeat: no-repeat;
Choose repeat to tile the image, repeat-x to repeat the image along the x-axis (that's the horizontal one, kids), repeat-y for the y-axis, and no-repeat to...not repeat it.
background-attatchment: fixed;
Choose from scroll or fixed.
background-position: top right;
There are three ways to do this: set a fixed position from the origin using px or em, set a flexible position using percentages, or into a 9x9 grid using words. Visually:
top lefttop centertop rightcenter left center center center right bottom left bottom centerbottom right
4. Text
Text properties control everything about your text that has nothing to do with font, which I'll cover next. Mostly this is concerned with paragraphing and spacing.
syntax
color: #555555;
sets the text colour for the element.
line-height: 1.5;
sets the line height. I know, I'm loosing you in how confusing these titles are. You can set this as fixed height (eg. 20px), as a percentage (eg. 100%), or as a number (eg. 1.75). The benefit of using a number is that is multiplies by the current font, whereas the percentage uses the base font. This is why some layouts will have text-overlap when a post uses larger font for emphasis.
letter-spacing: 1px;
Use this property to reduce (letter-spacing: -1px) or increase the space between letters. This a simple and effective way of getting versitility and variety out of web safe fonts.
text-align: right;
Aligns text. Choices: left, center, right, and justify.
text-decoration:none;
For underlines and things. Choices: underline, overline, line-through, and blink. You'll probably use it mostly with none, though, and people might stab you if you use blink.
text-indent: 25px;
Indents the first line. Value also takes percentages.
text-transform: lowercase;
Another good way to get variety out of your text. Choices: lowercase , uppercase, and capitalize.
word-spacing: 10px;
Does not effect letter spacing. This isn't incredibly useful, but it has its place.
5. FontFun With Fonts
Font is for font. No, really.
syntax
Shorthand
font: italic small-caps bold 1em Georgia;
This is the shorthand property, in the order of font: style variant weight size family;. This is obviously longer than you'll need most of the time.
In pieces:
font-family: Arial, Verdana, sans-serif;
The 'font' of the font. See here and here for information of websafe fonts. Here's a short list of common combinations:
font-family:Arial, Helvetica, sans-serif;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-family:Tahoma, Geneva, sans-serif;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Georgia , serif;
font-family: "Times New Roman", Times, serif;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-family: "Courier New", Courier, monospace;
font-family: Impact, Charcoal, sans-serif;
font-size: 1em;
You can also set this to values like 'small', but for more precision set the font to a specific length like 0.87em, 7.5pt, or 11px.
font-style: italic;
Set your font to italic or oblique. There doesn't appear to be a significant difference between the two choices in most web fonts.
font-variant: small-caps;
It's just small-caps or not here.
font-weight: bold;
Sets the font weight. Can be normal, bold, or bolder, or a numerical value from 400 to 900.
6. Unordered List Properties
Quite a number of the elements in Lj layouts use unordered lists. In the code you'll recognise these places where there is a ul. The list items in the lists are controlled by li. Often navigation links use unordered lists. For instance in Flexible Squares; there is this: ul.navheader li {}. These take margins, paddings, borders, font properties, and backgrounds, as well as specific properties (I'm actually using all these at my current tags list).
syntax
Shorthand
list-style: circle none outside;
It may be easier to think of these as bullet points. If you do use a list-style you will probably be using the shorthand.
In pieces:
list-style-type: square;
There are a lot of choices here: none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, and katakana-iroha.
list-style-image: url(http://ping.net/image.gif)
You can use your own image or choose none and use the default type.
list-style-position: inside;
Or on the outside.
List item Display:
display:inline;
In an element's unordered list's list item (element ul li {}) the display option controls how the list items...display. Inline collapses the list and displays the items horizontally, and removes the need for the list-style property. This is often used in navigation bars in the header and comment bars. Block arranges the elements in a vertical list, like in the sidebar. There are a number of other options (list-item, inline-block, inline-table), but not all are cross-browser compatible.
7. Table Properties
Probably the only place you'll find a table in an LJ layout is the sidebar calendar and the archive page. Still. The same padding, margins, etc, apply. A bit of table jargon for those unfamiliar with html: table is the whole table, tr is a row, th is a table header, thead is a group of table headers, tbody is the grouped table body, tfoot is grouped footer content, caption is a table caption, and td a table cell. If you're uncertain as to the label for a part of the table you want to change, just FireBug it.
syntax
border-collapse: separate;
Put in collapse if you wish the table to display with a single border. Separate is like a default html table.
border-spacing: 1px;
Obviously this doesn't apply if you've collapsed the table.
caption-side: bottom;
Chooses the position of the table caption (when there is one, as in minimalism). Choose from top, right, bottom, and left.
8. Dimensions
You'll need to set dimensions for various parts of your layout or they'll default to the entire page. The main choices to make here are if you want a fixed-width layout (good idea for layouts with banners), a liquid one (will change shape depending on browser window size), or a plastic layout (changes shape with certain min and/or max limits). You may use a plastic layout if the design is wider than about 780px and you want to accommodate those using lower screen resolutions. Something like this: width: 100%; max-width: 880px;.
syntax
width: 60%;
Can be a set width (600px), a percentage (90%), or auto (allows the browser to calculate; usually fills out the element).
min-width: 400px; and min-height: 150px;
Sets a limit on the amount the height of an element can be reduced to, whether by browser flexibility, or by a lack of contact. For instance, you may put a min-height on your entry element to prevent the userpic from sticking out the bottom. Using this on text elements like .entry_text in Flexible Squares will prevent the text from wrapping in IE for some reason.
max-width: 88%; and max-height: 90%;
Maximised the height or width of an object. You'll also see this used to control image widths, like .entryText img { max-width:590px;} to prevent images from stretching layouts.
9. Classification
What this apparently covers is the various display and relative positioning properties. These are a little less easy to explain than margins and borders, but bear with me. You see these a lot in layouts, so they will be familiar.
syntax
/
display: none;
We've already run into display in talking about unordered lists. The same sort of things apply to other elements too. display: none; will mean that the element is not displayed, and that the container it was in will act like it isn't there. Block gives you a block level element, and inline will display your element without a line break before or after. For an example of how this works outside of lists, see the two images above: the first is code {} with display:block;, the second with display:inline;.
float: left;
You can float an element left or right. Once you 'float' an element it becomes a box element and shifts itself as far left or right as possible - until it runs into another floating element or the restraints of a containing element (floaters respect paddings and margins). The containing element will no longer stretch to accommodate it the floater. Basically a floated element like a bubble in a glass of water; non-floating elements in the same containing box will flow around it, and other floated elements will stick to it. And like a bubble, it will expand liquidly with in contents unless assigned a width/height.
A good example of a floating element is the sidebar in Flexible Squares. #sidebar should first have a float assigned or it will sit below the #header and above the #maincontent (usually in a long banner, as sidebar elements stack vertically). However, it's now sitting sort of on top of the non-floating #maincontent, even though the text is floating around it. So a margin is added to the #maincontent in the direction the sidebar is floated, with a value approximately equal to the sidebar's assigned width.
clear: both;
You may be wondering why the footer of Flexible Squares stays happily below the sidebar. Or, probably not. But anyway, the answer is clear (n.b. not a pun). According to W3 School, this "sets the sides of an element where other floating elements are not allowed". So when clear: both; is added to .clearfoot {, floated elements are not allowed on either side, so it sits stubbornly bellow.
cursor: crosshair;
I'll let you use your imaginations for this one. Choices include:auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, and help. You can also set your own image with its url(http://)
visibility: hidden;
Also: visible and collapse (which does something with tables that probably isn't important). If you're wondering what the difference between visibility: hidden; and display: none;, it is apparently this:
normaldisplay: none;visibility: hidden;
Quite possibly this is useless, but the more you know, I guess.
10. Positioning
This mostly concerns the position of the element by specifying a shift according to top, bottom, left, or right declarations. Also here are overfow options,vertical alignment and stacking orders.
syntax
position: relative;
Honestly, this confuses me a little. Choices are:
static (normal position: ignores any top, bottom, left, or right declarations)
relative (moves relative to its normal positon: responds to top etc. declarations)
absolute (position fixed according to browser window: ignores floats [seemingly], and top etc. declarations will specify position) and
fixed(position fixed according to browser window; top etc. declarations will specify position, and stays in position regardless of scrolling).
top: 10px; right: 10%; bottom:-10px; left: auto
Specifies the position of each element edge. What these do depends on the kind of position; static ignores these, relative moves from relative to static position, and absolute and fixed move according to browser window. For instance, in this layout the sidebar has a position:fixed; and a bottom:0;.
overflow: scroll;
Ever wonder how those layouts with the scrolling sidebar boxes were made? They had a height set to them and an overflow: scroll; added. What this property controls is content that is larger than the set restraints of the element. Choices are visible (content overflows outside the element), hidden (content is clipped), and scroll (content is clipped within dimensions, but a scrollbar allows you to see the rest of the content).
vertical-align: baseline;
Choices are: sub, super, top, text-top, middle, bottom, and text-bottom. Can also be a length (2px) or a percentage (10%). This has various uses, but I use it mostly in tables and for my tiny icons so that they remain in a reliable position regardless of fluctuating font size.
z-index: 100;
You may have already seen this used on your userpics. Use a number value to specify a stacking order. My floating sidebar you saw above had a z-index assigned so that it would display on top of the userpics. I'm not entirely sure why the userpic has a z-index, but there probably is a reason.
11. Links and Images
So basic I almost for got to include them. Links are controlled by a and images by img.
Example: the syntax to control for all the links in entry text for flexible squares might look like be:
.entry_text a {color:#779F8E; text-decoration:none; padding:5px; background-color:#f8f8f8; border-bottom:1px solid #ececec;border-right:1px solid #ececec}
Which would give the effect in the image above.
An important thing to know about CSS: more specific commands will overwrite the less specific. For instance, if you used the above example, even if you have a {color:#444444;} in your code your links in your entries will still be greenish and in little grey boxes.
But if the codes both control the same thing, whichever comes later in the code will take precedence. For example:
.userpic img {padding:5px; border: 1px solid #cccccc; border-top:none;} gives
but .userpic img {padding:5px; border-top:none; border: 1px solid #cccccc;} gives
syntax
a:visited
for visited links
a:link
links that have not been visited
img[src*="btn_del.gif"] {padding: 10px; height:0;width:0;background-image: url(http://); } or a[href="http://community.livejournal.com/milou_en_avril"] {color:#aaaaaa}
You can create commands specifically for certain images or links on the page. In the above examples, all images in the layout whose url ends in btn_del.gif will be replaced, and all links to milou-en-avril will be coloured light grey.
12. Fun Stuff
Hovers, pseudo elements, transparencies, and what-not.
syntax
img:hover
things on hover. You can add the pseudo class :hover to most any element, actually, if you want to have fun. Good for changing colours/backgrounds/borders/transparency/anything
.subject:first-letter {color: #779F8E; font-size:12pt;}
Change the style of the first letter of an element.
.entry_text:first-line {color: #aaaaaa; font-family: "Trebuchet MS";}
Same thing only with the whole first line of an element.
img{ filter: alpha(opacity=80); -moz-opacity: .80; opacity: .80; }
Best used on images; if you use it on element it'll make everything translucent, including the text. If you want to have a transparent background for your element, you'd best use a translucent png as your background image.
13. Coding tips
Here are just some general tips for arranging your code.
Character limits
There is a limit to the number of characters you can input into the Custom CSS box. Spaces, breaks, and indents count as characters too. If you're really desperate for space you can start deleting all the unnecessary gaps. For purposes of efficiency, avoid over-coding; if your #maincontent already has a white background there's probably no need to give you #subcontent one too.
Use Shorthand
That's these things: padding: 0px 0px 0px 0px;, border: 1px solid #EEEEEE;, and background: #EEEEEE url(http://image.com/background.png) repeat scroll 0 0;. Try to look for the simplest and shortest way to write something
For instance:
Instead of border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc;border-left: 1px solid #cccccc;, use border: 1px solid #cccccc; border-top:none;
and instead of item{border-bottom:1px solid #ececec;border-right:1px solid #ececec} item:hover{border-bottom:none;border-right:none;border-top:1px solid #ececec;border-left:1px solid #ececec;}, use item{border-width: 0 1px 1px 0;border-style:solid;border-color:#ececec} item:hover {border-width:1px 0 0 1px}
Group Selectors
If you many selectors with the same command, why not group them together? Here is an example of my inefficient code for the little pictures beside the metadata in Flexible Squares:
.currentlocation {padding: 4px 18px 4px 0; background: transparent url(http://) no-repeat scroll 100% 50%;}
.currentmood{padding: 4px 18px 4px 0; background: transparent url(http://) no-repeat scroll 100% 50%;}
.currentgroups {padding: 4px 18px 4px 0; background: transparent url(http://) no-repeat scroll 100% 50%;}
.currentmusic {padding: 4px 18px 4px 0; background: transparent url(http://) no-repeat scroll 100% 50%;}
then grouped:
.currentlocation, .currentmood, .currentgroups , .currentmusic {padding: 4px 18px 4px 0; background: transparent none no-repeat scroll 100% 50%;}
.currentlocation {background-image: url(http://);}
.currentmood{background-image: url(http://);} .currentgroups {background-image: url(http://);}
.currentmusic {background-image: url(http://);}
...that's all I can think of for now. Remember, Google is your friend.
1. Margins and Padding
The text would be like this
The margin of an element is the space between it and everything else around it. In the above image, the margin would be the blue-shaded area around the black bordered box.
The green-shaded area within the box, between the border and the text, is the padding.
syntax
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
You can also set your value in percentages.
Shorthand
margin: 0px 0px 0px 0px;
^works clockwise from the top like the cardinal points, so, margin: top right bottom left;.
tip: you won't always need to include all four points. For instance, margin: 10px; will give you an even margin of 10px and margin: 5px 10px; will give you a margin of 5px on the top and bottom, and a margin of 10px to the right and left.
Negative Values(this only applies to margin)
margin-right: -120px; = margin: 0px -120px 0px 0px;
Margins usually thrust an element away from its default position, but adding a negative margin will pull it towards the specified direction
Auto
margin: 0 auto; <- setting both margin-right and left to auto will center the layout.
margin:0 auto 0 0; <- setting both margin-right to auto will align it to the left.
margin:0 0 0 auto; <- setting both margin-left to auto will align it to the right.
Using auto will let the browser set the margin; generally you will use this for centering and so forth.
2. Borders
I don't need to explain this, do I? There's a long list of properties for border, and you can see the full list here. I'm just going to cover some basic and frequently used arrangements.
syntax
Shorthand
border: 1px solid #EEEEEE;
border is most often used in the shorthand, as above: border: width style color;. The order here isn't important.
border-top: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
Separates
border-width: 1px;
^ like margins, this works clockwise: border-width: top right bottom left;
border-style: solid;
^ choices: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset (works clockwise)
border-color: #EEEEEE;
^ also clockwise: border-color: top right bottom left;
3. Backgrounds
Again, this is pretty much self explanatory.
syntax
Shorthand
background: #EEEEEE url(http://image.com/background.png) repeat scroll 0 0;
In the order of: background: color image repeat attatchment position;.I use this most often when using an image for a background, otherwise I just use background-color.
Break it up
background-color: #eeeeee;
Set this to a colour, or to transparent to see through the the lower elements
background-image: url(http://);
...yup.
background-repeat: no-repeat;
Choose repeat to tile the image, repeat-x to repeat the image along the x-axis (that's the horizontal one, kids), repeat-y for the y-axis, and no-repeat to...not repeat it.
background-attatchment: fixed;
Choose from scroll or fixed.
background-position: top right;
There are three ways to do this: set a fixed position from the origin using px or em, set a flexible position using percentages, or into a 9x9 grid using words. Visually:
top lefttop centertop rightcenter left center center center right bottom left bottom centerbottom right
4. Text
Text properties control everything about your text that has nothing to do with font, which I'll cover next. Mostly this is concerned with paragraphing and spacing.
syntax
color: #555555;
sets the text colour for the element.
line-height: 1.5;
sets the line height. I know, I'm loosing you in how confusing these titles are. You can set this as fixed height (eg. 20px), as a percentage (eg. 100%), or as a number (eg. 1.75). The benefit of using a number is that is multiplies by the current font, whereas the percentage uses the base font. This is why some layouts will have text-overlap when a post uses larger font for emphasis.
letter-spacing: 1px;
Use this property to reduce (letter-spacing: -1px) or increase the space between letters. This a simple and effective way of getting versitility and variety out of web safe fonts.
text-align: right;
Aligns text. Choices: left, center, right, and justify.
text-decoration:none;
For underlines and things. Choices: underline, overline, line-through, and blink. You'll probably use it mostly with none, though, and people might stab you if you use blink.
text-indent: 25px;
Indents the first line. Value also takes percentages.
text-transform: lowercase;
Another good way to get variety out of your text. Choices: lowercase , uppercase, and capitalize.
word-spacing: 10px;
Does not effect letter spacing. This isn't incredibly useful, but it has its place.
5. FontFun With Fonts
Font is for font. No, really.
syntax
Shorthand
font: italic small-caps bold 1em Georgia;
This is the shorthand property, in the order of font: style variant weight size family;. This is obviously longer than you'll need most of the time.
In pieces:
font-family: Arial, Verdana, sans-serif;
The 'font' of the font. See here and here for information of websafe fonts. Here's a short list of common combinations:
font-family:Arial, Helvetica, sans-serif;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-family:Tahoma, Geneva, sans-serif;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Georgia , serif;
font-family: "Times New Roman", Times, serif;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-family: "Courier New", Courier, monospace;
font-family: Impact, Charcoal, sans-serif;
font-size: 1em;
You can also set this to values like 'small', but for more precision set the font to a specific length like 0.87em, 7.5pt, or 11px.
font-style: italic;
Set your font to italic or oblique. There doesn't appear to be a significant difference between the two choices in most web fonts.
font-variant: small-caps;
It's just small-caps or not here.
font-weight: bold;
Sets the font weight. Can be normal, bold, or bolder, or a numerical value from 400 to 900.
6. Unordered List Properties
Quite a number of the elements in Lj layouts use unordered lists. In the code you'll recognise these places where there is a ul. The list items in the lists are controlled by li. Often navigation links use unordered lists. For instance in Flexible Squares; there is this: ul.navheader li {}. These take margins, paddings, borders, font properties, and backgrounds, as well as specific properties (I'm actually using all these at my current tags list).
syntax
Shorthand
list-style: circle none outside;
It may be easier to think of these as bullet points. If you do use a list-style you will probably be using the shorthand.
In pieces:
list-style-type: square;
There are a lot of choices here: none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, and katakana-iroha.
list-style-image: url(http://ping.net/image.gif)
You can use your own image or choose none and use the default type.
list-style-position: inside;
Or on the outside.
List item Display:
display:inline;
In an element's unordered list's list item (element ul li {}) the display option controls how the list items...display. Inline collapses the list and displays the items horizontally, and removes the need for the list-style property. This is often used in navigation bars in the header and comment bars. Block arranges the elements in a vertical list, like in the sidebar. There are a number of other options (list-item, inline-block, inline-table), but not all are cross-browser compatible.
7. Table Properties
Probably the only place you'll find a table in an LJ layout is the sidebar calendar and the archive page. Still. The same padding, margins, etc, apply. A bit of table jargon for those unfamiliar with html: table is the whole table, tr is a row, th is a table header, thead is a group of table headers, tbody is the grouped table body, tfoot is grouped footer content, caption is a table caption, and td a table cell. If you're uncertain as to the label for a part of the table you want to change, just FireBug it.
syntax
border-collapse: separate;
Put in collapse if you wish the table to display with a single border. Separate is like a default html table.
border-spacing: 1px;
Obviously this doesn't apply if you've collapsed the table.
caption-side: bottom;
Chooses the position of the table caption (when there is one, as in minimalism). Choose from top, right, bottom, and left.
8. Dimensions
You'll need to set dimensions for various parts of your layout or they'll default to the entire page. The main choices to make here are if you want a fixed-width layout (good idea for layouts with banners), a liquid one (will change shape depending on browser window size), or a plastic layout (changes shape with certain min and/or max limits). You may use a plastic layout if the design is wider than about 780px and you want to accommodate those using lower screen resolutions. Something like this: width: 100%; max-width: 880px;.
syntax
width: 60%;
Can be a set width (600px), a percentage (90%), or auto (allows the browser to calculate; usually fills out the element).
min-width: 400px; and min-height: 150px;
Sets a limit on the amount the height of an element can be reduced to, whether by browser flexibility, or by a lack of contact. For instance, you may put a min-height on your entry element to prevent the userpic from sticking out the bottom. Using this on text elements like .entry_text in Flexible Squares will prevent the text from wrapping in IE for some reason.
max-width: 88%; and max-height: 90%;
Maximised the height or width of an object. You'll also see this used to control image widths, like .entryText img { max-width:590px;} to prevent images from stretching layouts.
9. Classification
What this apparently covers is the various display and relative positioning properties. These are a little less easy to explain than margins and borders, but bear with me. You see these a lot in layouts, so they will be familiar.
syntax
/
display: none;
We've already run into display in talking about unordered lists. The same sort of things apply to other elements too. display: none; will mean that the element is not displayed, and that the container it was in will act like it isn't there. Block gives you a block level element, and inline will display your element without a line break before or after. For an example of how this works outside of lists, see the two images above: the first is code {} with display:block;, the second with display:inline;.
float: left;
You can float an element left or right. Once you 'float' an element it becomes a box element and shifts itself as far left or right as possible - until it runs into another floating element or the restraints of a containing element (floaters respect paddings and margins). The containing element will no longer stretch to accommodate it the floater. Basically a floated element like a bubble in a glass of water; non-floating elements in the same containing box will flow around it, and other floated elements will stick to it. And like a bubble, it will expand liquidly with in contents unless assigned a width/height.
A good example of a floating element is the sidebar in Flexible Squares. #sidebar should first have a float assigned or it will sit below the #header and above the #maincontent (usually in a long banner, as sidebar elements stack vertically). However, it's now sitting sort of on top of the non-floating #maincontent, even though the text is floating around it. So a margin is added to the #maincontent in the direction the sidebar is floated, with a value approximately equal to the sidebar's assigned width.
clear: both;
You may be wondering why the footer of Flexible Squares stays happily below the sidebar. Or, probably not. But anyway, the answer is clear (n.b. not a pun). According to W3 School, this "sets the sides of an element where other floating elements are not allowed". So when clear: both; is added to .clearfoot {, floated elements are not allowed on either side, so it sits stubbornly bellow.
cursor: crosshair;
I'll let you use your imaginations for this one. Choices include:auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, and help. You can also set your own image with its url(http://)
visibility: hidden;
Also: visible and collapse (which does something with tables that probably isn't important). If you're wondering what the difference between visibility: hidden; and display: none;, it is apparently this:
normaldisplay: none;visibility: hidden;
Quite possibly this is useless, but the more you know, I guess.
10. Positioning
This mostly concerns the position of the element by specifying a shift according to top, bottom, left, or right declarations. Also here are overfow options,vertical alignment and stacking orders.
syntax
position: relative;
Honestly, this confuses me a little. Choices are:
static (normal position: ignores any top, bottom, left, or right declarations)
relative (moves relative to its normal positon: responds to top etc. declarations)
absolute (position fixed according to browser window: ignores floats [seemingly], and top etc. declarations will specify position) and
fixed(position fixed according to browser window; top etc. declarations will specify position, and stays in position regardless of scrolling).
top: 10px; right: 10%; bottom:-10px; left: auto
Specifies the position of each element edge. What these do depends on the kind of position; static ignores these, relative moves from relative to static position, and absolute and fixed move according to browser window. For instance, in this layout the sidebar has a position:fixed; and a bottom:0;.
overflow: scroll;
Ever wonder how those layouts with the scrolling sidebar boxes were made? They had a height set to them and an overflow: scroll; added. What this property controls is content that is larger than the set restraints of the element. Choices are visible (content overflows outside the element), hidden (content is clipped), and scroll (content is clipped within dimensions, but a scrollbar allows you to see the rest of the content).
vertical-align: baseline;
Choices are: sub, super, top, text-top, middle, bottom, and text-bottom. Can also be a length (2px) or a percentage (10%). This has various uses, but I use it mostly in tables and for my tiny icons so that they remain in a reliable position regardless of fluctuating font size.
z-index: 100;
You may have already seen this used on your userpics. Use a number value to specify a stacking order. My floating sidebar you saw above had a z-index assigned so that it would display on top of the userpics. I'm not entirely sure why the userpic has a z-index, but there probably is a reason.
11. Links and Images
So basic I almost for got to include them. Links are controlled by a and images by img.
Example: the syntax to control for all the links in entry text for flexible squares might look like be:
.entry_text a {color:#779F8E; text-decoration:none; padding:5px; background-color:#f8f8f8; border-bottom:1px solid #ececec;border-right:1px solid #ececec}
Which would give the effect in the image above.
An important thing to know about CSS: more specific commands will overwrite the less specific. For instance, if you used the above example, even if you have a {color:#444444;} in your code your links in your entries will still be greenish and in little grey boxes.
But if the codes both control the same thing, whichever comes later in the code will take precedence. For example:
.userpic img {padding:5px; border: 1px solid #cccccc; border-top:none;} gives
but .userpic img {padding:5px; border-top:none; border: 1px solid #cccccc;} gives
syntax
a:visited
for visited links
a:link
links that have not been visited
img[src*="btn_del.gif"] {padding: 10px; height:0;width:0;background-image: url(http://); } or a[href="http://community.livejournal.com/milou_en_avril"] {color:#aaaaaa}
You can create commands specifically for certain images or links on the page. In the above examples, all images in the layout whose url ends in btn_del.gif will be replaced, and all links to milou-en-avril will be coloured light grey.
12. Fun Stuff
Hovers, pseudo elements, transparencies, and what-not.
syntax
img:hover
things on hover. You can add the pseudo class :hover to most any element, actually, if you want to have fun. Good for changing colours/backgrounds/borders/transparency/anything
.subject:first-letter {color: #779F8E; font-size:12pt;}
Change the style of the first letter of an element.
.entry_text:first-line {color: #aaaaaa; font-family: "Trebuchet MS";}
Same thing only with the whole first line of an element.
img{ filter: alpha(opacity=80); -moz-opacity: .80; opacity: .80; }
Best used on images; if you use it on element it'll make everything translucent, including the text. If you want to have a transparent background for your element, you'd best use a translucent png as your background image.
13. Coding tips
Here are just some general tips for arranging your code.
Character limits
There is a limit to the number of characters you can input into the Custom CSS box. Spaces, breaks, and indents count as characters too. If you're really desperate for space you can start deleting all the unnecessary gaps. For purposes of efficiency, avoid over-coding; if your #maincontent already has a white background there's probably no need to give you #subcontent one too.
Use Shorthand
That's these things: padding: 0px 0px 0px 0px;, border: 1px solid #EEEEEE;, and background: #EEEEEE url(http://image.com/background.png) repeat scroll 0 0;. Try to look for the simplest and shortest way to write something
For instance:
Instead of border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc;border-left: 1px solid #cccccc;, use border: 1px solid #cccccc; border-top:none;
and instead of item{border-bottom:1px solid #ececec;border-right:1px solid #ececec} item:hover{border-bottom:none;border-right:none;border-top:1px solid #ececec;border-left:1px solid #ececec;}, use item{border-width: 0 1px 1px 0;border-style:solid;border-color:#ececec} item:hover {border-width:1px 0 0 1px}
Group Selectors
If you many selectors with the same command, why not group them together? Here is an example of my inefficient code for the little pictures beside the metadata in Flexible Squares:
.currentlocation {padding: 4px 18px 4px 0; background: transparent url(http://) no-repeat scroll 100% 50%;}
.currentmood{padding: 4px 18px 4px 0; background: transparent url(http://) no-repeat scroll 100% 50%;}
.currentgroups {padding: 4px 18px 4px 0; background: transparent url(http://) no-repeat scroll 100% 50%;}
.currentmusic {padding: 4px 18px 4px 0; background: transparent url(http://) no-repeat scroll 100% 50%;}
then grouped:
.currentlocation, .currentmood, .currentgroups , .currentmusic {padding: 4px 18px 4px 0; background: transparent none no-repeat scroll 100% 50%;}
.currentlocation {background-image: url(http://);}
.currentmood{background-image: url(http://);} .currentgroups {background-image: url(http://);}
.currentmusic {background-image: url(http://);}
...that's all I can think of for now. Remember, Google is your friend.