10 CSS Essential Skills Save Your Time

Property-icon In previous article Will HTML5 + CSS + JavaScript Really Be Flash And Silverlight Killer? we surmised that HTML5 would be Adobe Flash and MS Silverlight killer or not, as the next major revision of HTML (HyperText Markup Language), we know the importance of HTML5. However, Cascading Style Sheets (CSS), the style sheet language be designed primarily to describe the presentation semantics of a document is a very useful, helpful, and powerful technology for web.

With CSS, we can separate the document content, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content. It also allows the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice. If we were to code a CSS layout by hand, it would take us an unneeded amount of time, the following is 10 essential CSS skills which can save your time, hope you enjoy it!

css-is-awesome

1. Simple CSS Tooltip


With following CSS, you can create a simple Tooltip.

a:hover {
    background:#ffffff; /*if need to compatible with IE6, background needed*/
    text-decoration:none;
}
a.tooltip span {
    display:none;
    padding:2px 3px;
    margin-left:8px;
    width:130px;
}
a.tooltip:hover span{
    display:inline;
    position:absolute;
    background:#ffffff;
    border:1px solid #cccccc;
    color:#6c6c6c;
}

HTML sample code:

Easy <a class="tooltip" href="#">Tooltip<span>This is a Example by Ntt.cc.</span></a>.

2. Reset Basically Style


We must redefine new styles of tags for unify the various different browsers. You only need to add the following code at the beginning of CSS—of course, change what you want to change.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,

q:before, q:after {
    content: none;
}

/* focus element */
:focus {
    outline: 0;
}

/* special text style */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through
}

/* striola table style */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

3. Convenient CSS Debugger


This code can nest each tag on the page divided up in different lines and help you find the bugs.

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

4.  Center Unfixed Width DIV


We can easily set a fixed width DIV container to center with “margin:auto”,  for unfixed width DIV, you can do the same with following code:

.content {
    margin: 0 auto 8px;
    display: table;
    }

.content div {
    display: table-cell;
    }

<!–[if IE]>
.content {
    display: block;
    text-align: center;
    }

.content div {
    display: inline;
    zoom: 1;
}
< ![endif]—>

5. Add A “loading” Icon For Big Size Image


The visitors don’t like to wait for the big size picture to download, the following code can do the same effect like AJAX loading—it can ease visitor’s sentiment. :)

img { background: url(loading.gif) no-repeat center center; }

6. Pre-load Images


If you need pre-load images before finish HTML file download, you can set the image as the DIV background, and set this container not visible. Add this DIV container when HTML download completely.

div.loader {
    background:url(images/hover.gif) no-repeat;
    background:url(images/hover2.gif) no-repeat;
    background:url(images/hover3.gif) no-repeat;
    margin-left:-10000px;
}

7. CSS Transparency


Some older version browsers not work fine of element transparency. We can hack it with following code.

selector {
    filter: alpha(opacity=60); /* MSIE/PC */
    -moz-opacity: 0.6; /* Mozilla 1.6 and older */
    opacity: 0.6;
}

8. Set The Min-Height For Element on IE


As we all know, IE not support min-height attribute.  Following is the code which can resolve this issue.

/* for browsers that don’t suck */
.container {
    min-height:8em;
    height:auto !important;
}

/* for Internet Explorer  */
/*\*/
* html .container {
    height: 8em;
}

/**/

9. Use Different Link Style For Different Link Type


We can set different style for http url, mailto and file type like PDF.

/* HTTP */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* Mailto */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* PDF link */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

10. Remove The Textarea Scrollbar


IE will add a scrollbar even there is no contents be input. The following code can remove the unused scrollbar.

textarea{
    overflow:auto;
}
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

3 Responses to “10 CSS Essential Skills Save Your Time”

  1. I like this site given and that has provided me some sort of commitment to succeed for some cause, so thanks.

  2. [...] introduced some useful CSS skills, helpful CSS tools and most useful CSS resource in pervious articles.  In this article, we [...]

  3. [...] have learned 10 CSS Essential Skills before, the following is 10 useful CSS skills maybe you don’t know. Of course, if you are an [...]

Leave a Reply