The best solutions are often the simplest. Here's a list of 8 tips that contain only one css property.
1. Vertical centering with line-height
line-height:24px;
When you have a container with fixed height you can use line-height property to vertically center the content.
Take a look at this demo.
2. Prevent oversized content to break ... Read More
Grouping Your Styles
Group your styles into categories (ex. layout, typography, forms, so on) and visually seperate them in your css file. A title and table of contents doesn't hurt either:
/*
csscody.com Screen Styles
css Table of Contents:
layout
typography
forms
*/
/* layout
----------------------------------------------- */
/* typography
----------------------------------------------- */
/* forms
----------------------------------------------- */
Choosing Your Categories
Even though I do have some common practices, ... Read More
I will present a technique to display a multi-level unordered list in the form of a tree with lines connecting nodes.
Our intention is to avoid cluttering the HTML code with unnecessary tags. Ideally, the code would be as simple as this:
<ul class="tree"> <li>Animals ... Read More
Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699
Define pseudo classes ... Read More
1. Block vs. inline level elements
HTML elements are either block or inline elements. The characteristics of block elements include:
Always begin on a new line
Height, line-height and top and bottom margins can be manipulated
Width defaults to 100% of their containing element, unless a width is specified
Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Inline elements on the other hand ... Read More
CSS inheritance is automatically defined by the style property used. In other words, when you look up thestyle property background-color, you'll see a section titled "Inheritance". If you're like most Web designers, you've ignored that section. But it does serve a purpose.
What is CSS Inheritance?
Each element in an HTML document is ... Read More
If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers.
Here is the list of 10 hand picked CSS hacks ... Read More
Definition of a variable
3.1. The @variables at-rule
CSS Variables should be defined in an @variables at-rule. An @variable at-rule is composed of the '@' character followed by the 'variables' identifier, optional target media types (separated by commas) and a block of variable definitions. The definition of a variable must precede all style rules contained or imported ... Read More
Tip 1: CSS font shorthand rule
Instead of styling fonts with individual statements for font-size, font-family, font-weight, etc., you can use CSS shorthand to condense the font-related properties into a single line. Shorthand can transform the following CSS code:
font-size: 10px;
line-height: 15px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: arial,sans-serif;
into a single line, like so:
font: 10px/15px ... Read More
