Archive for December, 2009
CSS Reference
Dec 23rd
Quick Selection
Background Property
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| background | Sets all background properties: | background:#4c4c4c url("image/gloss.png") top center repeat-x; | 1 |
| background-attachment | Sets whether the image scrolls or is fixed on a page: | background-attachment:fixed; | 1 |
| background-color | Sets the background color of an element: | background:blue; | 1 |
| background-image | Sets the background image on an element: | background-image:url("image/header.jpg"); | 1 |
| background-position | Sets the position of an element: | background-position:center; | 1 |
| background-repeat | Sets how the background will repeat: | background-repeat:repeat; | 1 |
Border and Outline Properties
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| border | Sets all four definitions in one declaration | border:1px inset blue; | 1 |
| border-style | Sets the border style for all four sides | border-style:groove; | 2 |
| border-width | Sets the border width for all four sides | border-width:thick; | 1 |
| border-color | Sets the border color for all four sides | border-color:#ff9300; | 2 |
| border-top | Sets the top border in one declaration | border-top:thin solid #fff; | 1 |
| border-top-width | Sets the top border width | border-top-width:medium; | 1 |
| border-top-color | Sets the top border color | border-top-color:purple; | 2 |
| border-top-style | Sets the top border style | border-top-style:ridge; | 2 |
| border-right | Sets the right border in one declaration | border-right:10px dotted orange; | 1 |
| border-right-color | Sets the right border color | border-right-color:#000; | 2 |
| border-right-style | Sets the right border style | border-right-width:dashed; | 2 |
| border-right-width | Sets the right border width | border-right-width:2px; | 1 |
| border-bottom | Sets the bottom border in one declaration | border-bottom:3px hidden transparent; | 1 |
| border-bottom-color | Sets the bottom border color | border-bottom-color:#470b0b; | 2 |
| border-bottom-style | Sets the bottom border style | border-bottom-style:none; | 2 |
| border-bottom-width | Sets the bottom border width | border-bottom-width:4px; | 1 |
| border-left | Sets the left border in one declaration | border-left:6px outset white; | 1 |
| border-left-color | Sets the left border color | border-left-color:#fff1d8; | 2 |
| border-left-style | Sets the left border style | border-left-style:inherit; | 2 |
| border-left-width | Sets the left border width | border-left-width:8px; | 1 |
| outline | Sets the outline in one declaration | outline:3px dotted green; | 2 |
| outline-color | Sets the outline color | outline-color:blue; | 2 |
| outline-style | Sets the outline style | outline-style:inset; | 2 |
| outline-width | Sets the outline width | outline-width:thin; | 2 |
Dimensions
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| width | Sets the width of an element | width:1000px; | 1 |
| max-width | Sets the maximum width of an element | max-width:75% | 2 |
| min-width | Sets the minimum width of an element | min-width:20em; | 2 |
| height | Sets the height of an element | height:600px; | 1 |
| max-height | Sets the maximum height of an element | max-height:50%; | 2 |
| min-height | Sets the minimum height of an element | min-height:2em; | 2 |
Font Properties
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| font | Sets all the font properties in one declaration | font:11px bold italic Verdana, Geneva, sans-serif | 1 |
| font-family | Sets the font family | font-family:Georgia, "Times New Roman", Times, serif; | 1 |
| font-size | Sets the font size | font-size:18px; | 1 |
| font-style | Sets the font style | font-style:oblique; | 1 |
| font-variant | Sets the font variant | font-variant:small-caps; | 1 |
| font-weight | Sets the font weight (boldness) | font-weight:700; | 1 |
List Properties
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| list-style | Sets all properties in one declaration | list-style:circle outside url(“list.gif”); | 1 |
| list-style-image | Sets list image | list-style-image:url("blue.png"); | 1 |
| list-style-position | Sets whether position is inside or outside the flow of the list | list-style-position:inside; | 1 |
| list-style-type | Sets list type | list-style-type:none; | 1 |
Margin Properties
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| margin | Sets all four sides of the margin in one declaration | margin:25px 3px 5px 15px; | 1 |
| margin-top | Sets the top margin | margin-top:10px; | 1 |
| margin-right | Sets the right margin | margin-right:15px; | 1 |
| margin-bottom | Sets the bottom margin | margin-bottom:50px; | 1 |
| margin-left | Sets the left margin | margin-left:25px; | 1 |
Padding Properties
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| padding | Sets all four sides of the padding in one declaration | padding:15px 30px; | 1 |
| padding-top | Sets the top padding | padding-top:30px; | 1 |
| padding-right | Sets the right padding | padding:right:10px; | 1 |
| padding-bottom | Sets the bottom padding | padding-bottom:50px; | 1 |
| padding-left | Sets the left padding | padding-left:25px; | 1 |
Positioning Properties
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| bottom | Sets the bottom margin edge for a box that is positioned | bottom:30px; | 2 |
| clear | Sets which sides floated elements are not allowed | clear:both; | 1 |
| clip | Clips an element that is absolutely positioned | clip:rect(30px 0px 60px 90px); | 2 |
| cursor | Specifies the cursor to be displayed within a certain element | cursor:crosshair; | 2 |
| display | Specifies which type of box an element should have | display:inline; | 1 |
| float | Specifies whether or not a box should float left or right | float:left; | 1 |
| left | Sets the left margin edge for a box that is positioned | left:45px; | 2 |
| overflow | Sets what happens if content were to overflow its box | overflow:scroll; | 2 |
| position | Sets how an element is positioned | position:relative; | 2 |
| right | Sets the right margin edge for a box that is positioned | right:15px; | 2 |
| top | Sets the top margin edge for a box that is positioned | top:20px; | 2 |
| visibility | Specifies whether or not an element is visible | visibility:hidden; | 2 |
| z-index | Specifies the stacking order of elements | z-index:-1; | 2 |
Print Properties
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| page-break-before | Sets the page break before an element | page-break-before:always; | 2 |
| page-break-after | Sets the page break after an element | page-break-after:auto; | 2 |
| page-break-inside | Sets the page break inside an element | page-break-inside:avoid; | 2 |
| orphans | Sets the minimum number of lines there must be and the bottom of an element after a page break | orphans:2; | 2 |
| windows | Sets the minimum number of lines there must be and the top of an element after a page break | windows:10; | 2 |
Table Properties
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| border-collapse | Specifies whether or not the border should be collapsed | border-collapse:collapse; | 2 |
| border-spacing | Specifies distance between adjacent cell borders | border-spacing:15pt; | 2 |
| caption-side | Sets placement of table caption | caption-side:center; | 2 |
| empty-cells | Sets whether or not borders of empty cells are displayed | empty-cells:hide; | 2 |
| table-layout | Changes the algorithm used for the table layout | table-layout:fixed; | 2 |
Text Properties
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| color | Sets the color of text | color:#ff9300; | 1 |
| direction | Sets the writing direction of text | direction:right; | 2 |
| letter-spacing | Specifies distance between letters of text | letter-spacing:.75em; | 1 |
| line-height | Specifies distance between lines of text | line-height:15px; | 1 |
| text-align | Sets the alignment of text | text-align:center; | 1 |
| text-decoration | Specifies the decoration added to text | text-decoration:overline; | 1 |
| text-indent | Sets indentation of first line in a text block | text-indent:25px; | 1 |
| text-shadow | Sets the shadow text may have | text-shadow:;#ccc 15px -10px 8px; | 2 |
| text-transform | Controls the capitalization of text | text-transform:uppercase; | 1 |
| vertical-align | Sets the vertical alignment of an element | vertical-align:middle; | 1 |
| white-space | Sets how the white space inside an element will be used | white-space:pre-wrap; | 1 |
| word-spacing | Specifies the distance between words in a text block | word-spacing:30px; | 1 |
Pseudo-classes and Pseudo-elements
| Properties | Definitions | Examples | CSS |
|---|---|---|---|
| :active | Applies specified style to an active element | a:active {<styles>} | 1 |
| :after | Adds content after an element | a:after {<styles>} | 2 |
| :before | Adds content before an element | a:before {<styles>} | 2 |
| :first-child | Adds specified styles to the first child element | body:first-child {<styles>} | 2 |
| :first-letter | Adds specified styles to the first letter of an element | p:first-letter {<styles>} | 1 |
| :first-line | Adds specified styles to the first line of text | p:first-line {<styles>} | 1 |
| :focus | Adds a focus to keyboard input | input:focus {<styles>} | 2 |
| :hover | Applies styles to an element that you hover over | a:hover {<styles>} | 1 |
| :lang | Adds style to an element with a lang attribute | q:lang {<styles>} | 2 |
| :link | Applies styles to a unvisited link | a:link {<styles>} | 1 |
| :visited | Applies styles to a link that has been visited | a:visited {<styles>} | 1 |
All about BB Code
Dec 21st
BB Code is a common way for format blog posts, forum posts, and comments on those posts. BB Code is an acronym for bulletin board code. If you are familiar with HTML code then BB Code will be very easy for you to understand. If not then need not worry, we will be covering all of the essential info you’ll need to know.
BB Code is an alternative to using HTML in user input forms. BB Code is a “safer” alternative to HTML, for when you have unknown users making posts on your site and you want to protect from the users trying to do anything malicious. Ultimately the BB Code, is converted into normal html, usually by a php script, so that the browser can interpret it.
Like HTML, BB Code has tags or key words or characters placed within a tag that contain a special meaning. Example:
| HTML/CSS | BB CODE |
|---|---|
| <b> bold text | [b]bold text[/b] |
| <i> italic text | [i]italic text[/i] |
| <u> underline text | [u]underlined text[/u] |
| text-decoration:line-through; strikethrough text | [s]line-through text[/s] |
| font-size:value; some text | [size={number}]text[/size] |
| color; some text | [color={color}]text[/color] |
| text-align:center; some text | [center]centered text[/center] |
<blockquote>some text |
[quote]blockquote[/quote] |
| <a href="url"> this is a link | [url={url}]link title here[/url] |
| <img src="img" /> {image} | [img]{url}[/img] |
|
<img src="img" height="#" width="#" /> Resized Image |
[img{width}x{height}]{url}[/img] |
| <ul> unordered list | [ul][li]{text}[/li]…[/ul] |
| <ol> ordered list | [ol][li]{text}[/li]…[/ol] |
| <code> monospace text |
1 {text}
|
| <table><tr><td></td></tr></table> | [table][tr][td][/td][/tr][/table] |
For those that know HTML you see the similarities. For those you who are not, we can see how certain words or characters are encased in brackets [] and they have a special meaning. An alternative to BB Code is a HTML Filter that will not allow javascript and other tags.
Differences between HTML and BB Code
| HTML | BB CODE |
|---|---|
| Angled brackets <> | Rectangular brackets [] |
| Allows inline CSS by use of the style attribute | Does not allow any inline CSS to be used |
| Chances of executing JavaScript or breaking the layout of a website | No chance of executing JavaScript or breaking the layout of the site |
| Formatting is very picky and cannot be changed | Formatting is simple and easy to understand and to change |
| There is a standard | There is not a standard |
BB Code is used in many forum softwares and content management systems.
Advanced CSS – Part #4
Dec 18th
In this tutorial we’re going to talk about the float property. For this tutorial you will need to be familiar with the Basics of CSS and you should be familiar with the Advanced CSS tutorials until this point.
Float Property
The float property allows for an element to be pushed to the left or the right so other elements can wrap around it. Floated elements can only be moves horizontally (left or right). All floated elements will move as far right or as far left as it possibly can; this is dependent upon the nature of the container that the element is in.
Values
- left – floats element to the left
- right – floats element to the right
- none – specifies no floating
Consider the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
body {
margin:auto;
width:1000px;
background-color:#4c4c4c;
font:verdana, "Times New Roman", san-serif;
font-size:11px;
color:#fff;
}
#container {
width:300px;
background:transparent url('image/img.jpg') repeat-x;
min-height:125px;
float:right;
}
We have made the body element have a width of 1000px (the rest of the styles are irrelevant) and then we defined an ID selector that has a width of 300px and a min-height of 125px (it has to be at least 125px tall) and this element will be pushed to the edge of the right side of the container.
Since floated elements allow other elements to wrap around the floated element. All elements before the float property will not be affected, however, all element thereafter the float property will be affected. Consider the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
body { /*...*/ }
#container {
width:300px;
background:transparent url('image/img.jpg') repeat-x;
min-height:125px;
float:right;
}
.float-right {float:right;}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
<html>
<body>
<div id="container">
<p>This element will be on the right edge of the page that is
1000px across.</p>
</div>
<p>This is some text</p>
<img src="image/img.gif" height="100" width="100" alt="img"
class="float-right" />
<p>This is some text</p>
</body>
</html>
This example would allow for the text to wrap around “img.gif” no matter what size the image is (in the case of the example it is 100px by 100px).
Floating Elements
As we mentioned before, floating an element will push the element to the right or left side of the container if possible. Consider the following code:
1 2 3 4 5 6 7
.fancy {
width:500px;
float:left;
}
1 2 3 4 5 6 7 8 9
<h2>Title here</h2>
<div class="fancy">
<img src="img.gif" height="64" width="64" alt="img" />
<p>Description here</p>
</div>
This will put the image inside of an area of 500 px wide and infinitely tall (depending the amount of content in that class selector).
Clear Property
How do we “turn off” floated elements? The clear property specifies which sides of a floated element you want to keep clear of other floating elements.
Values
- left – clears the left side of the element
- right – clears the right side of the element
- both – clears both the left and right side of the element
- none – does not clear either side of the element
Consider the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
<html>
<head>
<style type="text/css">
.clearfix {clear:both;}
.fancy {
width:500px;
float:left;
margin:5px;
}
</style>
</head>
<body>
<div class="fancy">
<h2>Fancy Pictures</h2>
<img src="img.gif" height="64" width="64" alt="img" />
<img src="img2.gif" height="64" width="64" alt="img" />
<img src="img3.gif" height="64" width="64" alt="img" />
<img src="img4.gif" height="64" width="64" alt="img" />
<img src="img5.gif" height="64" width="64" alt="img" />
<p class="clearfix">Some explanatory text here</p>
<img src="img6.gif" height="64" width="64" alt="img" />
<img src="img7.gif" height="64" width="64" alt="img" />
</div>
</body>
</html>
In the code above, you would have all of the styles we defined in the fancy class and then a break of text where no floated element is allowed (neither left or right). This will clear a space for the explanatory text where no floated element will exist. This can be useful for adding more titles or text to the “fancy” class we created.
It is recommended that you click on the download button below to see this property and its many values in action!
float.zip
Size: 41.47 KB