Resources :: Web Design Tutorial
CSS and Web Templates – Part 1
Whether you're working with a simple or robust website template, CSS (Cascading Style Sheets) code makes it easier to style web pages.
CSS is a language that's used by web designers and developers alike. Why? Because it saves time and file space and helps web pages load faster. It's also simple to learn and implement into a pre-existing layout. You can use CSS to format text on a web page, customize fonts, change background colors and add borders to images and objects.
To access the code for your web template, use a web editor, such as Notepad, to open the HTML file for the page you want to edit.
There are three types of Cascading Style Sheets you can apply to your web template. They are:
- External style sheets
- Inline styles
- Header styles
External style sheets are created in a separate CSS file. They are then linked to the web page where they will be used. Instead of modifying the code in individual web pages, you can modify the external file only. The updates in the style are applied to each page the file links to.
Here's a sample code you can use to link to an external CSS file. In this case, add the link to the HEAD tag of your web template's HTML file:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>some title</title>
<link rel="stylesheet" href="style.css" text="text/css">
</head>
Here's a sample of the content of the actual CSS file. In this example, the CSS file is called, "style.css." The end result displays the text in Arial or Sans-Serif font and italicizes it on all web pages that link to the CSS file.
body
{
font-style: italic;
font-family: arial, sans-serif;
}
Inline styles are inserted into the HTML code. The style only affects the HTML code attached to it. For example, you can insert an inline style that changes the font within a paragraph.
Here's a sample code of an inline style that's applied to a paragraph <p> tag in an HTML file. The end result italicizes the text within the paragraph and displays it in an Arial or Sans-Serif font.
<p style="font: italic arial, sans-serif;">text is displayed here</p>
Header styles are inserted into the HEAD tag of an HTML file. The CSS code only affects the individual web page that includes the code. On most occasions, it's not beneficial to use header styles unless you need a style that's different from other pages on your website.
Here's a sample code of a header style that's applied to a single HTML file. It should be inserted between the <HEAD> tag of your web template.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>some title</title>
<style type="text/css">
p
{
font-style: italic;
font-family: arial, sans-serif;
}
</style>
</head>
If you've found this web design tutorial informative or helpful, please spread the word by linking to Dollar Templates and Fonts. Thank you.
Return to Resources