HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)
Chapter 11: Introduction to CSS
Now on to the fun stuff. Designing and styling your elements. Cascading Style Sheets or CSS is the code that you will use to change the look and feel of your web pages. Everything from font, background color, text color, and positioning of your pages content. You can even add some animations to your page. There are three ways to add CSS style to your HTML files. We will go over each of them and what the best ways to use them are. And we'll be learning some more HTML code in the process. Some of the HTML stuff had to come after we began CSS because there are certain HTML elements that kind of need CSS code behind it to work properly. We'll be learning CSS by using the HTML elements that we already created in the previous chapters. And what we'll do is kind of bounce around styling different things to get you used to using CSS. And later when we work on an actual layout things will be easier to understand because you'll have some experience with the most common stuff. You can delete the code that we used to make all of our forms to clean up your page a little bit because we aren't going to be adding any style to those elements. But it's okay to leave them there for future reference as well and before we make our website layout you can just Save as again and rename this index.html file that we are using to something like training.html. Then create another folder on your desktop and drag it in there. You wouldn't want this document saved in your website folder if you didn't want to include it in your website. We are still going to be using it for a while so you can leave it as it is for now. If you don't care about the learning code just delete all of the <form action="" method=""></form>elements. And you should be left with the image as the first thing displayed on the top of your page.
Example of CSS code
Below is visual example of CSS code just so that you can get an idea of what the code we'll be working with looks like:
body{
background-color: blue;
font-family: tahoma;
font-size: 14px;
}
h1{
color: white;
text-align: center;
}
p.news{
background-color: gray;
color: black;
text-align: left;
font-size: 120%;
}
footer{
positon: fixed;
background-color: black;
color: white;
}
As you can see it's not too difficult to understand. And it looks like a list of instructions. Which is exactly what it is. Your just telling the browser exactly what you want your elements to look like.
Adding CSS With An Internal Style Sheet
The first way that we are going to add style to our HTML elements is by using an internal style sheet. And the way we set this up is by adding <style></style> tags inside of the head element. So right after your meta tags (if you have any in your code) add these tags. Make sure you put them inside of your head tags. Also know that these <style></style> tags are HTML tags but the code inside of them will be CSS.
<head>
<meta tags if you have any./>
<style>
</style>
</head>
Okay, So now when we style something the code for it will go inside of our style element. If you had multiple HTML pages you would embed these tags in the head element for each page. So each page would have it's own internal style sheet.
Let's begin with something simple. We're going to add a background color and change the color of the text for your h1 element used above your first paragraph.
<h1><a name="gaming stuff article"></a>Gaming Stuff</h1>. Add the code below inside of your style tags and we'll go over the new code we just learned.
<style>
h1{
background-color: blue;
color: white;
}
</style>
·h1{ This is called the selector. It tells the browser that we want to add style to this HTML element. Notice that there are no <,> less than or greater than signs. We don't need them here because these are not HTML tags. One other thing to point out that's important is that even though we are using CSS code in our document we still save it as .html because the style element is an HTML element. Since you already have your page saved as a .html document you will just save and run in the same way you have been. Now all of your styles for this h1 element will go in between the curly brackets { }.
·background-color: blue; First we have a property and it is the background-color property for the h1 element. After you type in the property that you want to change you add a : colon. Then we have our value and that is blue. So in total this line of code means "Hey browser, take my h1 element and change the background color to blue. After we enter the value we add a ; semicolon. This semicolon tells the browser that we're done with this property and to go to the next one. The semicolon also means that this is the end of a statement. So basically our instructions are called statements. There are many ways to describe our code. This is a few of the technical terms used when one programmer talks to another. And some programmer's will refer to things differently.
·color: white; color is the property that we use for changing font color. I'm not sure why they named this property color instead of text-color or font-color but just remember this for the future. Anytime you want to change the color of font for anything the property that you want to use is color. We set this property to white and ended with a semicolon. You can add as many properties as you want in here. So you change the font, bold the text, italicize the text and many other things.
·} We add our closing curly bracket. All of this code from the h1 selector h1{ to the closing curly bracket } is called a CSS rule. As you code more you'll refer to things in your own way, but this is the technical term used.
The code that we just added in the above lesson is exactly how all of your CSS will look for the most part. Very simple. It's just:
selector{
property: value;
}
Let's save and run our code. Now if you scroll down to your h1 element heading "Gaming Stuff", you'll see that the font has changed to white and we now have a blue background for the heading that spans the entire width of the page. There are many things that you can do to this background as well like change the width, add a border, and so on. We'll learn all of that in future lessons. We can also add multiple selectors to our rules. So for example if we wanted our h1 and h2 headings styled in the same way we could just add a comma and the h2 selector. Add this to your h1 rule and then save/run your code:
<style>
h1,h2{
background-color: blue;
color: white;
}
</style>
Now both our h1 and h2 headings have a blue background and white font. We'll end this chapter here so that you don't get overwhelmed with too much information at once.
Quiz Chapter 11
1.What is CSS code used for?
2.When using an inline style sheet for your CSS code, Where do you put your <style></style> tags?
3.Your properties and values have to go between what symbols?
4.What does a CSS rule consist of?
5.What is the name of the property used to change the font color?
6.How do you add multiple selectors?
7.A semicolon in a CSS rule means what to the browser?