Introduction To CSS Shorthand

When you have been developing websites, it is always beneficial to know that there are alternatives to the long coding we do in order to fulfill what we need. Sure the old ways of CSS are fun, but what if we can shorten it, so we can focus more on the design of the page rather than the code? This is what CSS is made for: design and layout.

Let’s say you want to add an inline CSS to the body tag of your webpage. The common method of doing it using your standard CSS is this:

body{

background: url(“bgpic.gif”);

background-color: #00ff00;

background-repeat: repeat-x;

}

Let’s look back to the basics on CSS rule and what these parts are all about.

This is the common way to code a CSS. As a basic rule, the body is the selector; background, background-color and background-repeat is the property; and next to it is the declaration. If we add more CSS properties and more selections, this will be extremely lengthy and could take up much of your HTML code.

Now let’s see how it is done with shorthand CSS:

body {

background: url(“bg.gif”) #00ff00 repeat-x;
}

Now where do all the properties went? We used the background property so background-color, and background-repeat are all located in just one line.

Can we use shorthand on any CSS property? Of course, we can! Let us have a look at the most common shorthand CSS properties:

Do take note, however, that not all shorthand properties will work on all browsers. Moreover, following the syntax will get you an idea of how you can apply all the properties without problems.

The font property

The font property works mostly in all platforms, all modern browsers and any device, so you will not have problems using this shorthand.

SYNTAX:

font: font-style font-variant font-weight font-size line-height font-family

EXAMPLE:

p {

font:italic bold 12px/30px Georgia,serif;
}

As you see, I have not declared all the properties because if you do not need them, do not add them as default values need not be declared.

The margin and padding shorthand property This property is supported by all modern browsers. Do not use the “inherit” value because it is not supported on IE7 and earlier; IE8 requires a !DOCTYPE for it to work. You will not have problems with IE9.

SYNTAX:

margin: margin-top | margin-right | margin-bottom | margin-left padding: padding-top | padding-right | padding-bottom | padding-left

EXAMPLE:

p {

margin: 2em;

}

In this example, only one value is entered, but this means that it is applied to all sides.

p {

margin: 1em 2em 3em;
}

In this example, the value is applied for the top, right and left, and bottom margin respectively.

The border shorthand Border shorthand works in all modern browsers. Expect to see bugs in old and unsupported browsers like the ones in a TV or a mobile phone.

SYNTAX:

border: border-width | border-style | color

EXAMPLE:

p {

border: solid red;
}

This will display the default border width in solid style and is colored red.

p {

border: 2px dotted yellow;
}

This will display 2 pixels of dotted border in yellow.

These are some of the basic and useful shorthand properties you can use. Feel free to explore other CSS shorthand as every CSS has its equivalent shorthand.

Scrollable Check Lists

Did you ever want to have check box in a scrollable select box area? This example is an alternative to the select element with enabled multiple attribute.

Launch Demo/site

Form styling with css

Use CSS Stylesheets for Web forms.

Launch Demo/site

Another pure CSS drop down menu

Another pure CSS drop down menu. Instead of the menu being triggered by placing your mouse of the menu label, it is trigger by moving your cursor over the down arrow on the right side of the menu label.

Launch Demo/site

CSS Tabs

The user can click on individual tabs to view different content within the same space.It will require a few lines of JavaScript to dynamically update the individual tabs.

Launch Demo/site

Form Help without Popups

Shows up hint for the currently focused input.

Launch Demo/site

CSS Text Wrapper/text wrap around curves

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

Launch Demo/site

Vertical Bar Graphs with CSS and PHP

Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.

Launch Demo/site

CSS table designs

CSS and data tables that can create usable and pretty results.
Launch Demo/site

A list of dropdown menus

1. The drop-down in a horizontal line of links that further cscades to another horizontal line.Launch Demo/site

2. menu with THREE sub levels
Simple 4 level flyout menu

ToolTip – Show the hints

This is an accessible, CSS/JS based “popup tooltip” script that dynamically converts regular footnotes in a document into tooltips that appear next to their triggering elements.
Features:

  • Pure CSS formatting allows infinitely customisable note appearance using the standards-based technology you know.http://itechies.net/blog/wp-admin/post.php?action=edit&post=2442
    Blog on Ajax, CSS, Web 2.0, SEO, PHP, Photoshop › Edit — WordPress
  • Accessible HTML elements used to construct the notes, so your site maintains excellent search engine and screenreader compatibility.
  • Fallback to regular footnotes give you excellent compatibility with older browsers if you choose.
  • Object-orientated JavaScript for separate note systems and easy implementation; you don’t have to know any JavaScript to use this!
  • Hover and Click note types give you a choice of activation method on a per-note basis.
  • Read more.. …

Launch Demo/site


CoolTips

CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique.

CoolTips is used to replace conventional web-browser tooltips. The tooltips get the contents of the title attribute, so it’s fully unobtrusive. CoolTips is an OO class based on Prototype JS and script.aculo.us frameworks.

Launch Demo/site

Form Field Hints with CSS and JavaScript

This Script shows up hint for the currently focused input.
Launch Demo/site

Styling buttons with CSS

Learn how to add file type icons to links automatically using css.
Launch Demo/site


Scalable CSS Buttons

  • Full scalability in all directions
  • The use of one single png image for the button without overlapping
  • The possibility to change background colors behind the image (also on hover)
  • Super-clean HTML markup
  • Unobtrusive javascript for altering the DOM
  • Pure CSS for styling
  • Possibility to style anchors as well as form buttons
  • Full degradability for browsers without images or javscript

Launch Demo/site

add file type icons to links

Learn how to add file type icons to links automatically using css.
Launch Demo/site

Radio & Checkbox Customisation Method

Radio & Checkbox Customisation Method
Launch Demo/site

Hierarchical Sitemap with CSS

Hierarchical Sitemap with CSS- This tutorial will use a nested unordered list with two levels to create a hierarchical structure where dashed lines will show the dependencies. This could be used as a sitemap or to visualize a directory. The advantage of this technique is that you only need a simple nested list and do not have to add any additional code in the HTML document.
Launch Demo/site

CSS for styling FORMS

A form with style- using CSS for styling FORMS.
Launch Demo/site

A Script to give nice forms in styling and in HTML structure. Download the script here. Download
Launch Demo/site

Link Thumbnail image

Link Thumbnail shows users that are about to leave your site exactly where they’re going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page. It’s a nice visual cue that serves a very real purpose: providing a clearer picture (no pun intended) of what’s ahead.
Launch Demo/site

Collapsing tables

Collapsible tables with DOM and CSS.When you click on the expand icon, all rows will be visible.
Launch Demo/site

Web 2.0 free buttons maker

Create a web 2.0 button in only 4 steps. Paint your button with preloaded web 2.0 icons or upload your personal icon and customize the font of the text inserted.Launch Demo/site