How to Use CSS Templates


Cascading Style Sheets (CSS) templates are a huge time-saver when creating standards-compliant Web pages. CSS allows you to assign rules to control specific portions of your pages, such as text or margins, and bypass a lot of the HTML coding that can slow down page loads. You can use ready-made CSS templates by just linking the CSS file to your HTML documents and save yourself from having to do all the initial setup work.

Things You'll Need

  • CSS template
  • HTML text editor, such as BBEdit or Dreamweaver
  • Web server
  • File Transfer Protocol (FTP) application (optional)
  • Obtain a CSS template from an HTML text editor, such as Dreamweaver, or locate a third-party template on the Web that licenses the work for distribution (see Resources).

  • Create an HTML file or open an existing one in your text editor.

  • Name and save your CSS file with the ".css" extension and upload it to your Web server. Place the document in the same folder as your other Web files. Use an FTP application, such as Fetch, to upload the file, or follow your Web host's instruction for this process.

  • Locate the "<head></head>" tags in your HTML document and place a link to the CSS file in between these two elements. This task assigns the formatting rules to your document. For example:
    <head><link href="your.css" rel="stylesheet" type="text/css"></head>

  • Open your CSS file and make style rule adjustments, such as font style or background color, if preferred. Locate the specific rule and change the value found after the colon. For example, if the font color is currently set to gray and you want it to be black, change "{ color: gray }" to "{ color: black }".

  • Save both the CSS and HTML files and launch a Web browser, such as Safari or Internet Explorer, to preview the page. Use your browser's "Open File" function to select the file and launch the page.

Related Searches


Promoted By Zergnet



You May Also Like

Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!