Creating and Using external Cascading Style Sheets
This tutorial is designed to give you the tools to create your own unique stylesheet. For ease I am going to give you a stylesheet to begin with. It should open in a new window. Click on FILE and SAVE as to save it as a css file to your computer :)
Download a stylesheet foundation here :)
Now so you can learn HOW to edit that stylesheet...
What is a cascading style sheet ?
A cascading style sheet is an external text file created to make updating your website layouts quicker and easier. By just editing one text file, you can change the links , fonts, backgrounds and more on all of your pages containing a link reference to the stylesheet.
First and foremost, your must remember the reference link between the head tags of the page you want the stylesheet to apply to.. It should look something like this :
style.css being the name & location of your stylesheet :)
So if your stylesheet is in a folder called "layouts" on your server you would link it with "layouts/style.css" rather than just style.css.
Now let's make your stylesheet :) Open a new text file ( with NOTEPAD or the php editor of your choice ) and name it style.css
The following is a partial screenshot of the stylesheet I just created for my cartoon dollz website which you downloaded above :
As you can see it is pretty big but that is only half of it. At this point, the only thing I need to do to my actual pages when I change the layout, is change the graphics. All my fonts and what not are changed in the style sheet . Im going to try to show you how to do this too.. Lets look at the first part of this stylesheet :
The area encased in the pink rectangle, represents the object on your page that is being altered. In this case it is the BODY of your page. Then there are the brackets ( which are important and MUST be exact ). They tell the computer where the style for that part of your page begin and ends. They look like this { } Remember that they are the curvy brackets because anything else will make your stylesheet fail. The area fp;;pwomg that first bracket are the styles themselves. The styles are what parts of your page you are changing and how.
The first style is the background color ( there is a background image style available as well which you will see later ) Remember the colons ( encased in grey ) Do not get them confused with equal signs like we use in php or your stylesheet wont work . As you can see my background color is #DCEDFC which is a blue teal color. Followed by the color is a SEMI COLON. This is very important as it seperates one style from another. DO NOT FORGET THE SEMICOLONS :)
The next style is background-attachment. Most of your probably don't even need to worry about this style. It basically decides whether the background of your page will scroll with it or not. Mine is always set to fixed, I just don't like scrolling backgrounds =Þ But if you want to keep for future reference, but want it to scroll just set it to scroll :)
Most of you probably already recognize these scrollbar styles from in page stylesheets. No need for those style snippets in each of your pages anymore :) Just set the colors in your style sheet :)
Color is where you set the color for the text of your page. Keep this in mind as the "color" style always represents the text color of whatever area of your page you are working with.
Font-size and font-family should be pretty self explanatory :) Just remember to set a generic family at the end in case your first choices are not available on the viewers computer.. ( for me it is sans serif ) Lets move on to the next section...
This is where you define what your links will look like. "a" represents all links. I dont like having visted or active links look different from a regular link so the only link item I customize is what it looks like when you go over it with the cursor. To make your visited and active links different colors just use a:visited and a:active the same way we use a:hover above :) As far as the styles, we went over font and color already, text-decoration could be changed to underline, italic, bold or strikethrough, among others :) It represents what style you want your text to be.
And to my favoritest part :) Classes !
Classes are the way to go to set styles for specific parts of your page. To call classes you have to add the class="classname" attribute to your tags, or if you want to create a style for just a small portion of a page use a span tag. Create a span tag and add it to the item you want to add a style to -
To create styles for classes in you stylesheet, remember to put a dot in front
of your class name. Then set the same attributes that you would for anything
else. Remember you can name classes whatever you like. I try to make them abbreviations
of what I am trying to achieve. For instace for areas of tiny text I use the
span tag and the class tx-tiny. As you can see by the styles above, this means
any text within the span tags will be 9 pixels tall in the font Trebuchet
MS and colored #28638D. For my mediums sized bold text, I use span and class
tx-med-bold which makes that text 14 pixels tall, bold and a colored #5290C5
..
Then I created classes for my tables. For the border table I created the class tbl-brdr. I added the class to the table tag so it would look like this :
Once you become proficient in css you will no longer need to use tables at all =) Tables (especially nested tables - tables inside of tables) make your pages much larger than they need to be and add a lot of trash code to your pages that you have to wade through to get to things you would like to edit.
Ok so a quick review of how to use classes: Add them to any tag, or use them in a span tag.
Learn more about CSS properties on this page or at this site , which is where I learned to do CSS :)
Ok I think that is it lol. I hope so :)
~Link Hearts Enchanted~
Links are definitely appreciated! Please feel free to right click to save one of these images to your hard drive and link them back to:
http://www.heartsenchanted.com
Thanks for your support!
