Welcome to the first in a line of tutorials on how to change CSS coding on your own. Fun, right?
What is CSS?
It stands for Cascading Style Sheets. Style sheets are an easier way to maintain and change color, font, and even pictures on your sites. You upload an additional all text file with design rules that will tell your webpages what to do. There are rules that can be applied to all parts of your website, or only a few. It’s up to you how much CSS you want to include into your site.
Okay, so how do we change stuff?
The very first things everyone seems to ask about changing are background color, link color, text color, and fonts. I will go through each one and explain how the CSS translates from HTML so you may better see why this language is so popular.
In HTML, the <body> tag used to house all your rules for background colors and usually the overall text color. It used to look like this in your page:
<body bgcolor=”black” text=”yellow”> which would render a page like this:
Now we would use something similar, but placed and worded slightly different. The following would be put either in its own file, or at the top of the webpage you are working on. If you are only changing a few aspects, it is easier to leave the styles right on the page you are working with. If you end up having a long style sheet, then it is best to put all the style into their own text file. So now that we have decided to keep our styles within our page, all we need to do is find the right place within the code to add our style list.
Look for this at the top of your HTML coded page:
<html>
<head>
<title>Whatever your webpage is called</title>
</head>
<body>
We will add our style between the <head> </head> tags like this:
<html>
<head>
<title>Whatever your webpage is called</title>
<style>
</style>
</head>
<body>
Now we are ready to add in our styles, removing them one by one from the actual HTML in the <body> tag or wherever else these rules have been placed.
First, let’s change the background color. We will go from <body bgcolor=”black”…> to this:
<style>
body {
background: black;
}
</style>
The body tag tells the stylesheet where to apply the styles. You leave <body> but delete the bgcolor=”black”. Why? The <body> tag is a label. Everything in the stylesheet must match up with a label tag somewhere in your webpage or it will not show up correctly.
Sidenote: I am using the color name, but you can also use the hexadecimal number in its place. Black is #000000. White is #FFFFFF. There are lists of hexadecimal colors all over the internet. My favorite one is here.
Next we will want to change the color of the text within the box. It’s fairly simple. All you need to do is take font=”yellow” and place it in the stylesheet like this:
<style>
body {
background: black;
color: yellow;
}
</style>
Finally, we can change the colors of the links in the document with a simple addition of another rule.
<style>
body {
background: black;
color:yellow;
}
a {
color:green;
}
</style>
The a is derived from the link code <a href=”link.html”> where a is seen as the label.
Next time we will get more into depth about the different aspects that you can change within these two style rules.
Happy coding!
Which constitutes this code being placed between the body tags:
Recent Comments