Adding Css To HTML

Open up notepad and go along with the
slides. Lets start with what every page

needs.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Next, lets add some content to fill the page. Lets

create:
1. A bullet list
2. An ordered list
3. Bold words
4. Italicized words
5. Bold and Italic words
6. A page break
7. An underline page break
8. Paragraphs
9. Headings
10. A way to have the text shown as you typed it.
In this presentation you may choose

whatever subject matter you want. Just
follow along by adding the same tags
where they occur in the website.
For this example I am going to use the

subject of fantasy creatures.
<html>
<head>
<title>Creatures to Avoid</title>
</head>
<body>
<h1>Types of Creatures Ive Seen</h1>
<p>Ive been all around the world and I have seen many things. There
are things that I wouldnt want to see again, but there are also things
that intrigue me. I have had a slime as a pet, but the others, I wouldnt
even want to think about having them. Take a look at some of the
creatures I have seen.</p>
<ul>
<li>Slime<img src="slime.png" width="128" height ="96"></li>
<li>Ghost<img src="ghost.png"width="128" height ="96"></li>
<li>Giant Spider<img src="spider.png"width="128" height ="96"></li>
<li>Ghoul Dog<img src="ghoul.png"width="128" height ="96"></li>
</ul>
<h2>How to Catch a Slime</h2>

<p> If anyone would ever like to catch a slime and have
him as a pet, follow these directions carefully.</p>
<ol>
<li>Find an old Coliseum, this is a prime breeding ground
for these creatures.</li>
<li>Grab a gallon glass jar and some road kill (Its what a
slime eats.)</li>
<li>Cover yourself in <strong>honey</strong> while your
searching for the slime.</li>
<li>When you find the slime, <strong>throw</strong> the
road kill out and wait for it to start eating.</li>
<li>Scoop up the slime while its eating in the glass jar and
cover it with the lid. Now hes all yours.</li>
</ol>
<hr>
<h3>Slimes Take Over Household </h3>
<p>Earlier today a couple came to the police station to report a family
missing. They said <em>I went to the house and no one answered. I
opened the door to see if everyone was ok, and there was slime
everywhere.</em><p>
<p>Police went to the residents house to check on the owners. The
horror alone on their faces could shatter anyone's heart <a href=>
<em><strong>more</strong></em></a></p>
<h4>Send A Helping Hand</h4>
<p>To send letters or money to the family in need, use this address:
<br>
<br>
Amy Butterworth<br>
1234 East 7th Street<br>
Port Angeles, WA 98362<br>
</p>
</body>
</html>
Now that we have a page created, lets

add some style using some CSS
Open up another blank document in
Notepad. Call this document style.css.
We will use this document later on. Go
back to the document that we are
building the website it.
First to start some CSS we must declare

the style type. To do this, go under the
title tag and press enter. Type in <style
type =text/css>
Now we can start altering things. First
thing we will alter is the paragraphs.
Follow the next slide to alter the
paragraphs color.
Lets add just a little CSS first to see what happens. Notice
the style sheet is after the title tag.
<html>
<head>
<title>Creatures to Avoid</title>
<style type ="text/css">
p{
color: blue;
}
</style>
</head>
<body>
Save you file and view it on the web.

If your text changed blue for all your
paragraphs, then your code is working.
If not, scroll through the slides to see
what you missed.
Notice that your headings are all still
black and so are the lists.
Now that we have an idea what the CSS

does, lets take a look at several other
ways you can style your page.
Lets make some changes to the
headings.
<style type ="text/css">
h1{
font-family: sans-serif;
color: red;
border-bottom: 1px solid black;
}
h2{
border-bottom: 2px solid gray;
}
h3{
border: 3px dashed yellow;
}
p{
color: blue;
}
</style>
Save your document and check out the

results. Your first and second heading
should be underlined and your third
heading should have a dashed box
around it.
The colors should be what you specified.
When you have more than one item that

needs to be the same, such as the color
or the font, you should combine the CSS
so all of the changes will be made with
one command.
h1{
color: red;
}
h2, h3{
font-family: arial;
color: green;
}
h2{
}
h3{
}
Now check to see if your second and

third heading changed to green and
made the font type to arial. If so you
have successfully made a working style
sheet.
The style sheet we just created was an

internal style sheet. This is where we
have the style sheet in the index/home
page.
Lets take the style sheet out of the index
page and make it an external style
sheet.
Cut out the style sheet in your code and

paste it to a new document. Make sure
you take the style tag out of the index
page and get rid of it altogether. The
style tag is not needed in your external
file.
On your document you called CSS or style sheet, paste all of the style
you have so far. Your sheet should have this:
h1{
color: red;
}
h2, h3{
font-family: arial;
color: green;
}
h2{
}
h3{
}
p{
color: blue;
}
In your index page, we need to link your

style.css page to that page to create the
style.
Right under the title tag, just like the
internal style sheet, we will add this code.
<link type=text/css rel=stylesheet
href=style.css/>
Now check if you can see your style on

your index page.
If it works you have a successful external
style sheet.
Now lets check out some other things
using a style sheet.
In your style sheet add an h4

Change the font-family to script
h4{
font-family: script;
}
What if I only wanted to change a

certain paragraph and not the others?
What I need to do is create a class. Go
into your index page and create a class
on a p tag. To do so, find the paragraph
you would like to change. Type in this
code:
<p class =catch>
Once we have the class made, we will

now be able to style that class. To do
this, go into the style.css and create a
new style for the class catch.
p.catch{
color: purple;
}
Notice that the only paragraph that
changed is the one you had the class
name catch on.
Now that we have the basic ideas for

CSS, lets see what we can change with
it. In the paragraph, lets change the
background color and the margin.
In the p.catch, lets change the font size
and the alignment.
Lets create a style for the strong tag and
change the letter spacing.
Lets create a body style and change the
color
body{
background-color: gray;
}
strong{
Letter-spacing: 3px;
}
p{
color: blue;
background-color: #orange;
margin: 10px;
}
p.catch{
color: purple;
font-size: 10px;
text-align: center;
}
Take a look at the page. Notice how the

p catch has been centered and looks a
lot smaller now. Also notice how the
background is no longer white.
All of the paragraphs should now be
changed with a background color.
Now that we have a background color, lets take a

look at having an image instead. In the body section
on the style sheet, use this code.
background-image: url(col.png);
If you open your file now you should see that in your
background there will be an image. If your image is
to small, you will see several repetitions of the photo.
To fix this lets use this code
background-repeat: no-repeat;
You may also position your background with this
code
background-position: top left
If you dont want a photo on you

background, you can always us a
background color. Lets look at some
different ways in choosing that color.
When choosing your color for your font or

background, you may notice we have
been just typing the color. There are only so
many colors you can use that the code will
recognize. Lets take a look at some
different ways to specify the color you
want. Here are four different ways to
choose you color:
Name
Percentage
RGB
Hex
When choosing your color, one way is by

using the name. For example
background-color: orange
This will allow you to know what color you
are getting easily, but has a limited number
of choices.
The next 3 ways of choosing a color is a
way to get a more specific color and it has
millions of choices. The downfall is that you
will most likely have to look up the color
using some kind of program.
Another way in choosing your color is by

using percentages. To be more specific,
they are the red, green, and blue
percentages. An example of this would
be:
background-color: rgb(80%, 20% 70%)
You can find these percentages, rgb
numbers, and hex numbers on a color
chart or in Photoshop.
Another way of choosing a color is using

the number in the rgb section of a color
chart. An example would look like this:
background-color: rgb(204, 123, 17);
The final way you can use to choose a

color is using hex code. This would look
something like this:
background-color: #cc6600
Change your background color into a

gray color. Use all 4 different ways to
change your background to gray. After
trying one way, refresh your page to see
if the color stays the same.

1.
2.
3.
4.
5.
There are several reasons to having an external CSS

document.
Your code doesnt have a big chunk of style code in
it.
Your style sheet can be linked to several different
pages.
Linking the sheet to different pages allows for a
consistent look throughout the website.
Saves time on changing the style if needed
because you dont have to search through non
styling code.
If you need to change a style to multiple pages you
only need to change the style sheet.
Krug, S. (2006). Dont Make Me Think A

Common Sense Approach to Web
Usability. Berkeley: New Riders.

Adding Css To HTML

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Adding Css To HTML

Загружено:

Авторское право:

Доступные форматы

Open up notepad and go along with the

slides. Lets start with what every page

Next, lets add some content to fill the page. Lets

In this presentation you may choose

For this example I am going to use the

<h2>How to Catch a Slime</h2>

Now that we have a page created, lets

First to start some CSS we must declare

Save you file and view it on the web.

Now that we have an idea what the CSS

<style type ="text/css">

Save your document and check out the

When you have more than one item that

Now check to see if your second and

The style sheet we just created was an

Cut out the style sheet in your code and

In your index page, we need to link your

Now check if you can see your style on

In your style sheet add an h4

What if I only wanted to change a

Once we have the class made, we will

Now that we have the basic ideas for

Take a look at the page. Notice how the

Now that we have a background color, lets take a

If you dont want a photo on you

When choosing your color for your font or

When choosing your color, one way is by

Another way in choosing your color is by

Another way of choosing a color is using

The final way you can use to choose a

Change your background color into a

There are several reasons to having an external CSS

Krug, S. (2006). Dont Make Me Think A

Вам также может понравиться