How to Make a CSS Template
CSS style sheets allow a great deal of flexibility and functionality to be applied to a website. Used in conjunction with XHTML 1.0, CSS formatting can achieve a wider range of formatting options than was possible with earlier versions of HTML code. Many web designers create CSS templates for use on multiple websites. A CSS style sheet template contains the basic formatting of a website, which can be tweaked or added to later. A basic CSS style sheet shows how to begin developing with CSS code.
Other People Are Reading
Instructions
-
Create A Simple CSS Template
-
1
Right-click on the "Start" menu. Then right-click on "All programs." Next click on "Accessories." Right-click on "Notepad."
-
2
Right-click on the "File" tab in the navigation menu. Then right-click on "New." A new document will be presented. Right-click on the "File" tab again. Then right-click on "Save as." Name the text file "samplecss.css" and right-click on "OK."
-
-
3
Type in "/*This is a comment*/". Click on the "Enter" key. Next
type "body{ background-color: white;}". Next click on the "Enter" key.
-
4
Type in "p { color: blue; }" in the editing area. Click on "Enter."
-
5
Type in "h3{ color: black; }". Next click on "Enter." Right-click on the "File" tab. Then right-click on "Save."
-
6
Type in "#paragraph1" and click on the "Enter" key.
Next type "{" and again click on the "Enter" key.
-
7
Type in "text-align:center;" and click on the "Enter" key. Next type in "color:red;" and click on the "Enter" key. Finally type in "}" and click on the "Enter" key.
-
8
Right-click on the "File" tab on the navigation menu. Then right-click on "Save." Right-click on "File" again. Then right-click on "Exit" to close out Notepad.
-
1
Tips & Warnings
A CSS style sheet can be lengthy with multiple ID sections. Comments can be placed throughout the style sheet to help guide other coders when analyzing the CSS code.
Always check the XHTML and CSS style sheet code with major web browsers to ensure cross compatibility. One web browser may not display the code the same as another one.
References
Resources
- Photo Credit Scott Olson/Getty Images News/Getty Images
