How to Design Web Pages With CSS
Since the first web browsers became available, web page designers have struggled to make the way pages look and act on the screen match what they see in their heads. The advent and acceptance of Cascading Style Sheets (CSS) has gone a long way to making that possible. Advantages of CSS include its ability to make complex looking sites, sometimes with only a few simple steps, and the way it helps untangle the website's content from its overall appearance. CSS can also allow designers to create a beautiful website that is still functional for those who are visually impaired.
Other People Are Reading
Instructions
-
-
1
Build the content of the website. Open a document in your favorite text editor and create the content for the web page. Content includes the words and pictures displayed in the browser. The content should be wrapped in HTML tags such as <a> or <p>. Each piece of content (or object) should be assigned a class or id by specifying the class="" or id="" property. An example: <a class="link" href="http://www.ehow.com/">eHow</a>. This would create a link to the eHow.com home page with a class of "link." It is important to note that there can be only one id per object (markup tag) and id names cannot be used more than once. Objects can have multiple classes, and many objects can share one class. The page you create should be saved with a file name that ends with a ".html" extension.
-
2
Make the CSS page. Open a new document and save it with file name that ends with a ".css" extension. This is the file that describes the look of a site. By applying CSS markup from a CSS reference manual, a designer can change the size, color, orientation and behavior of content throughout the page. Assigning attributes to class and id names allows designers to make global changes in one spot. A typical CSS entry might look like this:
#header {
font-weight: bold;
font-size: larger;
color: blue;
}This would make text within markup tags that have an id property of "header" larger than normal, using a bold font displayed in blue. CSS markup can be applied to HTML tags and class names the same way. To apply CSS to an HTML tag, use the tag without the <> braces. For class names, use a period before the class name--".news" for example. You can even combine the two. A class named "p.news" would be applied only to paragraph sections (the p tag) assigned to the "news" class.
-
-
3
Add a reference to the style sheet in your HTML document. In the header section of the HTML document, place a link to the style sheet as follows:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
The "href" attribute should point to the location of the CSS file. While it is possible to include CSS in the header section without creating an external style sheet, using a separate file as described here--an external style sheet--is the approach recommended by the World Wide Web Consortium (W3C), the authority on web standards.
-
1
