Last Updated: 25 Jul 2023
|
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
front-end-tech:css:best-practices [Nov 10, 2008 10:14 PM] dordal |
front-end-tech:css:best-practices [Jul 25, 2023 05:28 AM] dordal old revision restored (Nov 21, 2020 10:39 PM) |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | = Basic CSS Reference = | ||
+ | |||
+ | This is a quick 'cheat sheet' for CSS (Cascading Style Sheets). | ||
+ | |||
+ | == Selectors == | ||
+ | |||
+ | * **selector**: | ||
+ | * **declaration**: | ||
+ | * Basic selectors allow you to select all elements with a certain HTML tag (e.g. to get all ''< | ||
+ | * You can apply multiple class selectors in a single element selector. For example, '' | ||
+ | * You can also create **attribute selectors**, | ||
+ | * You can create **descendant selectors**, | ||
+ | * There are **pseudo classes** you can use to select things based on actions that have been taken in the document. '' | ||
+ | |||
+ | == Sizing == | ||
+ | |||
+ | * CSS has many methods for sizing objects. '' | ||
+ | * It's generally best to use relative measurements... pixels when those are necessary (they scale to a 96dpi ' | ||
+ | * That's because monitors are all set to different dpi settings, and so using an absolute measurement will change the number of pixels in a given measurement. For example, if you say '' | ||
+ | == Text == | ||
+ | |||
+ | * The '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * There is an overall '' | ||
+ | * '' | ||
+ | * Horizontal and vertical alignment can be done with the '' | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | == Opacity == | ||
+ | |||
+ | * You can set the transparency of an element with the opacity property | ||
+ | == Block Elements & The Box Model == | ||
+ | |||
+ | * CSS layouts are fundamentally based on the **CSS Box Model**, which lets you create ' | ||
+ | * Any given box has a content area, padding (space inside the border), a border, and then margins (space outside the border). **Width and height generally go from the inner edge** of the box, not the outer edge. So if you make a box with '' | ||
+ | * Any given element in an HTML document can be either 'block level' or ' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * Any given element is either a non-replace element or a replaced element. Non-replaced elements are like the ''< | ||
+ | * As noted, all elements have margins and passing. However, margins/ | ||
+ | * Horizontal margins can be set to '' | ||
+ | * Vertical positioning is similar to horizontal positioning... margins can be set to '' | ||
+ | * Margins can also be negative, which makes the containing box bigger than the outside box. This can be useful in a few specific cases. | ||
+ | * Margins/ | ||
+ | * '' | ||
+ | * This means in order to make a full page layout, you have to set the height of both the html and body elements | ||
+ | * Collapsing margins: vertical margins can // | ||
+ | * Lists (< | ||
+ | * All elements can have borders. Borders are pretty much like you'd think they'd be... you can give them a '' | ||
+ | * Borders can be set to transparent: | ||
+ | * Borders can have styles; there are a bunch but the only cool ones are '' | ||
+ | * You can give any element a '' | ||
+ | == Inline Elements == | ||
+ | |||
+ | * Inline elements can be replaced or non-replaced, | ||
+ | * All inline elements implicitly go in an ' | ||
+ | * '' | ||
+ | * You can adjust the height of one element relative to another with '' | ||
+ | * On inline **non-replaced** elements, padding and borders **DO NOT** alter the height or width of the content area, and thus the line-height. Therefore, you get all kinds of weird affects if you apply padding or borders to inline elements, with borders overlapping other lines, etc. Margins do not affect the top and bottom aspects of the content-area, | ||
+ | * However, even though padding doesn' | ||
+ | * The ONLY things that affect line hieght are '' | ||
+ | * On inline **replaced** elements (img, etc.) padding, borders and margins work more or less like box elements. | ||
+ | == Hybrid Elements == | ||
+ | |||
+ | * There are no hybrid elements, but there are a few hybrid display properties (in addition to the standard '' | ||
+ | == Background Images == | ||
+ | |||
+ | * Background images can be applies to just about any element, including stuff like < | ||
+ | * You probably want to specify a background-color in addition to the background image, in case the image doesn' | ||
+ | * Background images are not inherited, at least not unless you manually specify inheritance. This is what you want, because otherwise each element in the page would re-tile the background, which would look like crap. | ||
+ | * You can use '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * There is, of course, a '' | ||
+ | * One good, modern way to put images in your page is to use background images on a ''< | ||
+ | * You can also use 'image replacement' | ||
+ | == Layout - Floating == | ||
+ | |||
+ | * CSS Box Model' | ||
+ | * The '' | ||
+ | * Every floated element has a ' | ||
+ | * If you want to force a floated div inside the containing block, you must put a empty clearing div at the bottom of the containing box:< | ||
+ | <div id=" | ||
+ | <div id=" | ||
+ | floating text | ||
+ | </ | ||
+ | <div id=" | ||
+ | </ | ||
+ | </ | ||
+ | * Floated elements can't overlap. | ||
+ | * There are a bunch of other rules, but they are confusing to understand and (apparently) not consistently implemented in all browsers. | ||
+ | * If you don't want an element in the normal flow to flow past a floated element, you can add a '' | ||
+ | == Layout - Positioning == | ||
+ | |||
+ | * Positioning lets you actually place an element in a certain spot on a page or within a containing box. There are four types: | ||
+ | * **static**: normal position (every element has this by default) | ||
+ | * **relative**: | ||
+ | * **absolute**: | ||
+ | * **fixed**: like absolute, but relative to the viewport. Not supported in IE6 and before. IE7+ is OK. | ||
+ | * when you actually position something, it doesn' | ||
+ | * In order to make positioning work, you need to put the element you want to position inside a ' | ||
+ | * Position values can take percentages, | ||
+ | * If you need to set the width or height of a positioned element, you can do so with the standard '' | ||
+ | * '' | ||
+ | * Each '' | ||
+ | == Tables == | ||
+ | |||
+ | * Tables have special layout properties in CSS | ||
+ | * First up, you don't have to use the standard ''< | ||
+ | * There are also display properties for all the weird table tags that you never use, like '' | ||
+ | * Notably, tables declared with divs and display properties don't seem to have any '' | ||
+ | * Borders can collapse into each other (overlap) with '' | ||
+ | * Table cells have borders and padding, but no margins. | ||
+ | * '' | ||
+ | * Setting table (and table cell) width and height can be an exercise in frustration. | ||
+ | * Table width can be calculated in one of two ways; either '' | ||
+ | * If you're using '' | ||
+ | * If you're using table-layout: | ||
+ | * '' | ||
+ | * Alignment within cells is done via '' | ||
+ | |||
+ | == Lists == | ||
+ | |||
+ | * CSS has some support for modifying the styles of lists, such as those defined with ''< | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | == Cursor == | ||
+ | |||
+ | * You can change the cursor with the cursor: declaration. e.g. '' | ||
+ | * You can also make your cursor into a custom graphic. If you do '' | ||
+ | |||
+ | == Outlines == | ||
+ | |||
+ | * '' | ||
+ | * Outlines are generally used to highlight something the user needs to do or is doing. For example, your validation code might make a red outline around any form inputs that aren't filled in correctly. | ||
+ | == Media Style Sheets / Printing == | ||
+ | |||
+ | * CSS supports creating different style sheets for different types of media. For example, one may be for the screen, and one for print. You'd use the same markup, but the screen one would have more graphics, etc. than the print one. | ||
+ | * You select what the style sheet should be for when you include it, using the ' | ||
+ | <link rel=" | ||
+ | </ | ||
+ | * When creating a print stylesheet, there are some things you want to think about: | ||
+ | * Probably force black text on a white background | ||
+ | * Consider using points (which printers know how to deal with) and serif fonts such as Times New Roman, which are easier to read | ||
+ | * If you've got more than one column, lay it out into one for the printed page | ||
+ | * There are a number of print specific implementation rules in CSS2.1, but support seems to be pretty poor. '' | ||
+ | * But the coolest thing is putting in '' | ||
+ | * You can also do your best to keep an element (such as a div or table) on one page by saying: '' | ||
+ | == Styles with Javascript == | ||
+ | |||
+ | * Most properties of an element in CSS can be set with javascript. But anything dealing with styles needs to be set via the style property. e.g. '' |