How to override css property

Leave a comment

To override

.btn {
margin-bottom: 0;
}

go

input.btn {
  margin-bottom: 15px;
}

This works because the new css you define is more specific than the previous.

http://stackoverflow.com/questions/20954715/how-to-override-the-properties-of-a-css-class-using-another-css-class

Advertisements

Refactoring css

1 Comment

css is one of those things I am desperately trying to get good at, and a big part of that is knowing how to structure and refactor your css files.

Here’s a good example of some ugly css from Christian Heilman’s design chapter in Smashing Book#2.

#pagetitle {
  color: black;
  text-align: left;
  border-top-width: 2px;
  border-top-color: black;
  border-top-style: solid;
  border-width-bottom: 2px;
  ...
}

The first thing you can do to clean this up is logically order elements and use the shortcut notation.

#pagetitle {
  color: black;
  text-align: left;
  line-height: 1.3em;
  border: 2px solid white;
  border-color: black white white black;
  padding: 1em 2em;
  ...
}

The next thing you can do is move common denominators out of their specific selectors and collate them. For example you could refactor this:

h1  {
  font-family: helvetica, arial, sans-serif;
  color: #000;
  margin: 0.5em;
  padding: 1em;
  font-size: 150%;
  background: #ccc;
}

h1  {
  font-family: helvetica, arial, sans-serif;
  color: #000;
  margin: 0.5em 0;
  padding: 1em;
  font-size: 120%;
  background: #999;
}

Into this:

h1, h2, h3, h4 {
  font-family: helvetica, arial, sans-serif;
  color: #000;
  margin: 0.5em 0;
  padding: 1em;
}

h1 {
  font-size: 150%;
  background: #ccc;
}

h2 {
  font-size: 120%;
  background: #999;
}

See the difference? All the common stuff is up top, and only the difference are showing below. Way better.

How not to name your css classes and id’s

3 Comments

Continuing on with Christian Heilmann’s excellent chapter ‘Red flags in web design’ I loved this section about how not to name your css class and ids.

Here are some examples of really bad class and id names:

greenMessage
largeBoxRight
redIntroText

Basically anything that describes what the element looks like, and not what is it doing.

Here would be some better names:

greenMessage -> confirmation
largeBoxRight -> leanSideBar
redIntroText -> warning

See the difference? Applying this simple check will make your code a lot more readable and easier to maintain and understand. Thx Chris!

For more good tips on design and development checkout Smashing Book#2.

How and when to use a css class

2 Comments


The Smashing Book #2 has a great section by Christian Heilmann on how and when to use css classes.

“Classitis” as Christian calls it is when classes are used everywhere. Instead of just using classes selectively to make certain elements standout, people add classes to everything and then let jQuery do it’s magic.

This can quickly turn into a maintenance nightmare because as soon as a class name changes, you’ll have to search your entire code base for all changes.

Here’s an example Christian gives on how NOT to use css classes:

<ul class="shopping-list first">
  <li class="list-item">Cucumber</li>
  <li class="list-item important">Apple</li>
  <li class="list-item">Orange</li>
</ul>

Christian’s main rule for applying css classes is:

add a class to mark the odd one out and to group elements not already grouped.

Here is how to do it right:

<ul class="shopping-list first">
  <li>Cucumber</li>
  <li class="important">Apple</li>
  <li>Orange</li>
</ul>

Instead of using .shopping-list .list-item to style, all you need is .shopping-list li.

You modify the important one with .shopping-list li.important, and then you don’t have to worry about the class specificity of .important versus list-item.

For more good examples of does and don’t about web and design, be sure to check out the excellent Smashing #1 and #2 books.

How to nice corporate background webpage

3 Comments

Ever wonder how some websites get that nice, subtle background going? I did. Turns out it’s really easy.

Just make an image (say 4 pixels high with a single dark pixel at top and three light ones below)


And repeat it as a background image over your page.

css

body {
    background-image: url(../images/background.gif);
}

html

<html>
<head>
    <title>Repeated background</title>
    <link href="css/repeatedBackground.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

And voila.

It’s subtle, but nice for corporate style look and feel work or in any enterprise as a background to a table or TPS report.

Another approach is to apply the same idea with a gradient. Take a longer gradient image (say 1×500 pixels) and repeat it along the x-axis with a darker background color for where the gradient runs out :

css

body {
    background-color: #091A3A;
    background-image: url("../images/background-darkblue-1x500.gif");
    background-repeat: repeat-x;
}

and you get something like this:

Cool eh? These are just a web design tips I am picking up no my current project. Thanks to Jonas Claesson for point these out.

CSS Hack for making your own drop shadows

9 Comments

Jonas Claesson showed me this cool hack for simulating a drop shadow effect on a document in css.

Basically it takes drop shadow images, and repeats them around the border of your display image by placing in in north, south, east, west corners of your image.
You then plop them in using css ids and background images.

The result looks something like this:

And the code looks something like this:

html

<!DOCTYPE html> 
<html> 
<head> 
  <title>dropShadowViaClassBackgroundImage</title>
  <link href="css/classBackgroundImg.css" media="screen" rel="stylesheet" type="text/css" />
</head> 

The following is an example of how you can use classes to place background images.

<table cellspacing="0" cellpadding="0" id="previewTable">
<tr>
    <td id="nw"></td>
    <td id="n"></td>
    <td id="ne"></td>
</tr>
<tr>
    <td id="w"></td>
    <td id="previewContent">

    <div id="previewForm">

        <table style="margin-top:15px">
            <tr >
                <td><span class="headerBold">Summary:</span></td>
                <td><div  class="header">Do your stuff here</div></td>
            </tr>
        </table>

    </div>

    <td id="e"></td>
</tr>
<tr>
    <td id="sw"></td>
    <td id="s"></td>
    <td id="se"></td>
</tr>

</table>
</html>

css

#previewTable
{
    margin: 20px auto;
    width: 900px
}

#previewForm *
{
    font-family: verdana, serif
}

/* This is for the drop-shadow effect around the document*/
#nw, #ne, #sw, #se
{
    height: 15px;
    width: 15px;
}

#nw {background-image: url('../images/nw.png');}

#n {background-image: url('../images/n.png');}

#ne {background-image: url('../images/ne.png');}

#w {background-image: url('../images/left.png');}

#e {background-image: url('../images/right.png');}

#sw {background: url('../images/sw.png') repeat-x;}

#s {background: url('../images/s.png') repeat-x;}

#se {background: url('../images/se.png') repeat-x;}

You can download the code and check it out here:

git@github.com:rasmus4200/webtips.git

%d bloggers like this: