How to Create a Linked Cascading Style Sheet (CSS)
Begin by opening a simple text editor such as Notepad (in the Accessories folder of the Windows programs menu)., The first style modifications you will make are going to affect the entire web page so you will begin by adjusting the background color...
Step-by-Step Guide
-
Step 1: Begin by opening a simple text editor such as Notepad (in the Accessories folder of the Windows programs menu).
First type body { , The color code can be entered in several ways.
Hexadecimal notation
- a six-digit alpha-numeric code that lists the red, green and blue values, in that order, for that color. (i.e. #000000 is black, #FFFFFF is white, #FFFF00 is yellow).
Red, Green, Blue percentage
- uses a percentage value to denote how much of each color is represented (i.e. rgb(100%, 100%, 0%) is yellow and rgb(100%, 50%, 0%) is orange).
Red, Green Blue values
- this technique is similar to the percentage but the value used is from 0 to 128 (i.e. rgb(128,128,128) is white and rgb(64,64,64) is grey).
Color name
- certain colors can be entered as a text value like black, white, red, blue, green. , Use any of the techniques listed above for changing the background-color. ,,, Here we will be using the verdana font which is one of the default fonts installed with most Windows operating systems.
A good rule of thumb is to list two desired font-types and then a font class.
You would implement this by typing font-family: verdana, arial, sans serif; However, as we've shown here, you can simply chose just one font. , The size can be defined in pixels and ems.
For now, define the text size at 22px. , In this example we're making the text grey by typing the hexadecimal color codecolor: #CCCCCC -
Step 2: The first style modifications you will make are going to affect the entire web page so you will begin by adjusting the background color and text color of the entire page.
,, In this case we will save the file as styles.css though you can actually name the file as you chose so long as it ends in .css (i.e. mystyle.css, myfile.css, sitestyle.css).
For people using Windows Notepad, make sure that the "Save as type" drop down box says "All files" or an additional .txt file extension will be added.
For this example, we will also save our CSS in the same folder as the web page we are working on. ,, href="styles.css"
- the path to the location of the style sheet. media="all"
- specifies the type of media the link tag is referencing. , -
Step 3: Now try changing the background color by typing background-color: immediately followed by the color code and ending the line with a semicolon (each line within a style tag must be ended by a semicolon).
-
Step 4: To affect the text color type color: followed by the desired color.
-
Step 5: Close the body tag by typing an ending }
-
Step 6: In this example
-
Step 7: we will make similar changes to the <h1> tag (Header 1) by next typing h1 {
-
Step 8: Modify the font that will be used by the browser to render any text contained in this tag.
-
Step 9: To modify the size of the text
-
Step 10: type font-size: followed by the desired size.
-
Step 11: Change the color of the text using the same methods defined above for affecting the body style.
-
Step 12: Don't forget to close the h1 style definition by typing }
-
Step 13: To modify the paragraph tag begin by typing p { and make changes similar to those made in the h1 style definition.
-
Step 14: Once you are satisfied with your style definitions you must save the file in a format that the browser will recognize.
-
Step 15: Still using your text editor
-
Step 16: open the html file where you wish to link the CSS.
-
Step 17: Insert the following line of code somewhere between the <head> tags: '''<link rel="stylesheet" type="text/css" href="styles.css" media="all">''' link rel="stylesheet" (The link relationship with the document
-
Step 18: is a stylesheet) type="text/css" - tells the browser what type of document you are linking to.
-
Step 19: Refresh or open your browser to see the changes you've made to your web page.
Detailed Guide
First type body { , The color code can be entered in several ways.
Hexadecimal notation
- a six-digit alpha-numeric code that lists the red, green and blue values, in that order, for that color. (i.e. #000000 is black, #FFFFFF is white, #FFFF00 is yellow).
Red, Green, Blue percentage
- uses a percentage value to denote how much of each color is represented (i.e. rgb(100%, 100%, 0%) is yellow and rgb(100%, 50%, 0%) is orange).
Red, Green Blue values
- this technique is similar to the percentage but the value used is from 0 to 128 (i.e. rgb(128,128,128) is white and rgb(64,64,64) is grey).
Color name
- certain colors can be entered as a text value like black, white, red, blue, green. , Use any of the techniques listed above for changing the background-color. ,,, Here we will be using the verdana font which is one of the default fonts installed with most Windows operating systems.
A good rule of thumb is to list two desired font-types and then a font class.
You would implement this by typing font-family: verdana, arial, sans serif; However, as we've shown here, you can simply chose just one font. , The size can be defined in pixels and ems.
For now, define the text size at 22px. , In this example we're making the text grey by typing the hexadecimal color codecolor: #CCCCCC
,, In this case we will save the file as styles.css though you can actually name the file as you chose so long as it ends in .css (i.e. mystyle.css, myfile.css, sitestyle.css).
For people using Windows Notepad, make sure that the "Save as type" drop down box says "All files" or an additional .txt file extension will be added.
For this example, we will also save our CSS in the same folder as the web page we are working on. ,, href="styles.css"
- the path to the location of the style sheet. media="all"
- specifies the type of media the link tag is referencing. ,
About the Author
Mark Freeman
Brings years of experience writing about crafts and related subjects.
Rate This Guide
How helpful was this guide? Click to rate: