- 1). Locate the Blueprint kit folder wherever you extracted it on your hard drive and open it. Open the "screen.css" located in the "Blueprint" folder in your favorite HTML or text editor. This file contains all the styles provided by the Blueprint.
- 2). Open your HTML document. If you do not have one, a sample page is located in the template folder under "tests > parts." Save both files to a new location, such as a new folder on your desktop that you can call "Blueprint Tutorial."
- 3). Link the style sheet to your HTML document by adding a "link" tag to the top of the document, just below your "<title>" tags. If you are using the sample.html document, this tag will already be there, but you will need to fix the path. The tag should look like this:
<link rel="stylesheet" href="/links/?u=screen.css" type="text/css" media="screen, projection"> - 4). Return to the screen.css file. Scroll down to the "typography css" section, which is where the majority of your customizations will be made. Locate the "body" selector. This may be the first style you would want to customize, as it controls the default styles for background and fonts for the entire Web page. For example, change the "font-size" attribute to "14px" instead of the current value. If a font size is not defined for a given selector, this default will be used. You may also add a background color such as "background: #000000" which will make your background black.
- 5). Edit the H1-H6 heading sizes next, if desired. They are currently set to "ems" in the Blueprint, and should stay that way. The "em" unit tells the browser to scale the font a specific amount higher or lower than your base font size of 14px, which is equal to an em value of 1.0.
- 6). Find the "a" and "a:hover" selectors below the headings and set your desired link color. This link color will be the default for your web page unless you set a specific color for an element using a class declaration later.
- 7). Continue by building your Web page and applying the selectors and classes from the Blueprint to your design elements. You may preview your HTML in your editing tool or the Web browser and adjust each element accordingly. Using a tool such as Opera's Inspect Element or Firebug for Firefox will allow you to select a specific part of your Web page and view the associated CSS, which makes it easier to locate and change in your screen.css document.
- Advertisement -
- Advertisement -