Free CSS Code and Tips

Charlie R. Claywell
Reviewed by Vikki Olds
css

Creating a cutting-edge website can be a massive undertaking, unless you work smarter by using ideas others have already perfected. The techniques listed here can save you valuable time while also enabling you to build a high quality professional-looking site.

Controlling Fonts

It is obvious that the type of font you choose, as well as its size and color, can define the look of your site. In the past, though, designers were somewhat restricted in font choice since default fonts displayed when the chosen font was not present on the user's machine, potentially destroying the design. This also created problems for designers in situations where fonts used by a company on other publications needed to be used on the website. All of this can be solved by using the font-face rule, which lets designers display any font they want in the user's browser.

To display a font, first convert the .tff to an .eot format. This can be done with a free online converter. Once the file is converted, upload both files to your site.

To display the font in the user's browser, use this CSS snippet:

@font-face

{font-family: myFont;

src: url('MyFont.ttf'),

url('MyFont.eot'); /* IE9 */ }

You can adjust how the font displays with any of the optional properties of font-stretch, font-style or font-weight.

Color Codes

If you are not comfortable with color schemes, don't fret - there is a way around the issue. Using the Colors Palette Generator on CSSdrive.com is an interesting way to to create a color scheme based on an image you have uploaded. Once you upload your favorite image (keep it under 1 MB), the tool will create the hex color codes you need to use in your style sheets.

Background Color

You can set the background color for any of the various elements on your site from your style sheet. Depending on your preference, you can set a color by using the hex value, the RGB value or by using the color's name (if applicable). To set the background color, use the appropriate element:

  • body {background-color:yellow;}
  • h1 {background-color:#000000;}
  • p { background-color:rgb(255,0,255);}

Rounded Corners

When styling boxes or borders on your site, rounded corners tend to look better than square ones and with CSS3, creating them is easy. To create a rounded corner simply use the border-radius property. You can control each of the four corners using this method -- allowing for some interesting options.

To create a box with the top two corners rounded, use this snippet of code:

#Top_Corners_Rounded {height: 65px;

width:260px;

-moz-border-radius-topleft: 50px;

-moz-border-radius-topright: 50px;

border-top-right-radius: 50px;

border-top-left-radius: 50px;}

Controlling Competing Styles

If you need to control competing styles -- that is make sure one is always implemented in certain situations use the !important declaration. This simple rule will ensure whatever is declared !important is given precedence. For example, in the normal order of CSS if you had the following styles (possibly on two separate style sheets), the last one would be implemented, in this case, a paragraph would be red.

#style-test p {

color: blue; }

#style-test p {

color: red;}

However, by adding !important to the first p style, blue will be the color displayed.

#style-test p {

color: blue !important; }

#style-test p {

color: red;}

3D Buttons

Make your navigation buttons pop by giving them a 3D effect. The illusion is created with the box-shadow attribute. By using a shallow depth when the button is in its active state and a deeper depth when it is inactive, you create the impression that the button is actually being pressed when the mouse is clicked.

Creating a 3D button involves two steps:

  1. Place this snippet inside your HTML
    <a href="to_your_link.html" class="button">Go!</a>
  2. Place this code inside your stylesheet

    .button {
    color:#fff;
    background-color:#F5B800;
    padding:7px;
    position:relative;
    text-align:center;
    font-size:48px;
    text-decoration:none;

    box-shadow:
    5px 5px 5px 0 #000000;

    -webkit-box-shadow:
    5px 5px 5px 0 #000000;

    -moz-box-shadow:
    5px 5px 5px 0 #000000;

    border-top-right-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-top-right-radius: 20px;

    border-bottom-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-bottom-left-radius: 20px;

    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    }

    .button:active {
    box-shadow: 1px 1px 5px 0 #000000;
    -webkit-box-shadow: 1px 1px 5px 0 #000000;
    -moz-box-shadow: 1px 1px 5px 0 #000000;
    top: 4px;
    left: 4px;
    }

    .button:hover { background-color: #FFCC33;}

If you want all the corners of the button curved, instead of just the top right and bottom left ones, then use border-radius:20px, instead of border-top-right-radius: 20px and border-bottom-left-radius: 20px.

Accordion-Style Table

A cool way to save real estate on a page is to create collapsible boxes. You can use the headline or title of a subject to entice the user to click, but you do not have to waste valuable space to display all the text. Creating an accordion-style box to hold your content is a little involved since it uses JavaScript and CSS, but you basically create a .js file to control the opening and closing of the box and a CSS file to control how the text displays.

Generators and Tutorials

A good way to learn more CSS tricks or find out how a particular style works is to try out the various online CSS generators. These tools can create coding for everything from borders to drop-down menus. If you want to gain a more complete appreciation for CSS, read CSS Basics, an online publications that breaks out the subject into 18 chapters. Each section is filled with practical examples and easy-to-understand explanations.

Free CSS Code and Tips