How to Create Css for a Website
Jul 02, 2012, by admin
A Cascading Style Sheet (CSS) is a system for website coding that allows designers to manipulate several features at once by assigning certain elements to groups. For instance, by using a code for the website background, designers can change the background color or image on all pages of the website with one change to the CSS file. Here’s how to create CSS for a website.
Easy Steps
1.Launch the Notepad program in Microsoft Windows, moreover by locating it within the list of installed programs or by clicking the Start button, typing “Notepad” in the search field and pressing “Enter.”
2.Click “File” and “Save as” from the main toolbar.
3.Type a short file name in the suitable field of the Save As window, followed by the extension “.css” and choose “All Files” as the Save as type.
The CSS file name should be directly related to the website in question in order to assign style rules. For example, if your website domain name is www.createcss.com, use “createcss.css” as your CSS file name.
4.Open the index.HTML file for your website in Notepad.
5.Enter the following code before the “head” end tag: < link rel=”stylesheet” type=”text/css” href=”createcss.css” >.
This tells your web page where to look for definitions of your CSS rules for this website.
6.Define the CSS elements in your web page, in the HTML files, that will rely on CSS to determine their look or style.
CSS elements are things like < DIV >, used to create sections; < P >, used to create a paragraph, and < H1 >, which identifies a large header.
You can create CSS definitions for the font style and size of paragraph text and headlines, the background image or color and for anything that is placed between the beginning and ending DIV tags.
7.List your CSS elements in your “createcss.css” file, following each with a set of braces containing the style rules. Braces are the curly brackets, “{ }.”
CSS style rules all consist of a property and a value; the property identifies what you will be changing, such as the background color. The value gives the name or numeric value of the color used. The syntax is {property: value; }, with the colon, semi-colon and brackets used as shown.
If you choose to create the background color of all pages in your website blue, for case, you can type “page { background-color: blue;}.”
8.Add any ID or CLASS distinctions.
An ID will be preceded by “#,” while a CLASS will be preceded by a period.
If you want the footer of your web page to have a separate look, create a #FOOTER ID in your HTML document by typing < div id=”footer”> at the beginning of the section. Close the section with an end tag, < /div >.
In your “createcss.css” file, create a style rule by typing #FOOTER {font-size: x-small;}. That will make all type within your footer have a very small font.
