How to Create a Master CSS File

Many designers create their own version of a master CSS file of HTML codes, which they then adapt to the needs of each individual site, to help speed the process of building a website from scratch.

As you build more and more websites, some styles will become a regular part of your standard design practice. For instance, you might always want to set your page margins to 0, specify a page background color, choose a default font for all text, create redefine styles for paragraphs and headings, specify style attributes for at least two (link and visited) hyperlink states, and make a custom bullet style.

Use this file to test the styles for your CSS as you create the master css file. The sample HTML file includes paragraph text, a heading 1, a heading 2, an unordered list, and a couple of functioning hyperlinks.

To create your own master CSS file, follow these steps:

  1. Create a new blank document, without any HTML coding, and save it with the filename master.css.

    Save this CSS file in the same location on your computer as your sample.html file.

  2. Inside the <head> area of your sample.html file, add a link to the new external css file that includes the media type set to all:

    <link href="master.css” rel="stylesheet" type="text/css" media="all">

    This link tells the sample.html file to use the style definitions in the linked external CSS.

  3. Inside the master.css file, create a Tag redefine style for the <body> tag that sets the top, left, bottom, and right page margins to 0px; the padding on all four sides of the page to 10px; and the background to a light peachy orange color with the hexadecimal value of #fc3bb6.

    Your style code should look like this:

    body {
     margin: 0px;
     padding: 10px;
     background-color: #fc3bb6;
    }

    When all four sides of an object use the same value, as with the margin spacing and padding shown here, the value needs to be specified in the CSS only once. However, when the value is different on one or more sides, you must specify values for each of the sides:

    body {
     margin: 10px 10px 0px 0px;
     padding: 20px 0px 0px 20px;
     background-color: #fc3bb6;
    }
  4. Create a tag redefine style in your CSS file for the <p>, <h1>, and <h2> tags by specifying the font, font size, and font color for each.

    Use any font, size, weight, and color you like because you can customize the values later to match any specific project. Here’s an example of the code you might use:

    p {
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 12px;
     color: #000000;
    }
    h1 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 36px;
     font-weight: bold;
     color: #000066;
    }
    h2
     font-family: Arial, Helvetica, sans-serif;
     font-size: 24px;
     font-weight: bold;
     color: #000066;
    }
  5. To change the default hyperlink style, you can create pseudo-class element styles for each of the four hyperlink states.

    You may specify any attributes you like for each of the four states, from changing the font or font weight, to modifying the text color or background color, to altering the default text decoration.

    Here’s an example of the code you might use for the four link states:

    a:link {
     font-weight: bold;
     text-decoration: underline;
     color: #0099cc;
     }
    a:visited {
     font-weight: bold;
     text-decoration: underline;
     color: #990000;
     }
    a:hover {
     font-weight: normal;
     text-decoration: none;
     color: #ffffff;
     background: #ff9933;
     }
    a:active {
     font-weight: normal;
     text-decoration: none;
     color: #ffffff;
     background: #cc0000;
     }
  6. To style the unordered list, you can either redefine the <li> tag or create a class style that can be selectively applied to any <li> tag with the class attribute. If desired, specify an image to replace the default bullets.

    The style definition looks the same whether you redefine the <li> tag or create your own custom class style; only the selector is written differently, as either li or perhaps as .bullet.

    Your code for the bullet li tag redefine style might look something like this:

    li {
     list-style-position: outside;
     list-style-image: url(images/bullet.gif);
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
    }
  7. Save your HTML and CSS files and launch your HTML file in a browser window.

    To view the page in a browser, you can either double-click the HTML file or drag and drop the file icon into any open browser window.

    The file should display with all the style attributes you just created in your master CSS file. If it doesn’t look quite right or if certain elements aren’t displaying properly, reopen the files and check the accuracy of all your code, fix any errors you find, and retest. Be sure you’ve remembered to add the period (.) before all your custom class names and a number symbol (#) before all your hexadecimal color values.

    image0.jpg
  8. Test your new hyperlink styles in the browser window by

    1. Mousing over a link to see the hover style.

    2. Clicking and holding the mouse over a link to see the active style.

    3. Clicking a link and returning to your sample page by clicking the browser’s Back button to see how the link changes from the normal to the visited link state.

Now that you have your first master CSS file, rather than reinvent the wheel each time you start a new web project, you can use this file as the starting point. Of course, for some projects, building the CSS from scratch might be easier or more practical, but if having a master CSS file saves you time, by all means use it as a design technique.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.