Jump to content
ajnl

First Steps Into HTML Part 3 - Using CSS to style HTML

Recommended Posts

Last tutorial First Steps Into HTML Part 2. Which was mainly about hyperlinks and images. This one will explain how to use CSS to style HTML webpages.

 

There are three ways you can use CSS.

  • Inline: using style attributes within HTML elements
  • Internal: using style element inside the head tags which is located in the beginning of

    the webpage

  • External: using an external CSS file, which is linked to the webpage at the beginning of the webpage.
===================================

 

1. Example of CSS Inline styles:

 

 <p style="color:red;">This is a paragraph</p>
Located above is how you used the style atribute. Within the style attribute, is where color, margin, padding, etc can be used. Each is spaced using a semicolon ";".

 

<p style="color:blue; margin-top:50px;">This paragraph is blue and has a margin from the top of 50 pixels.</p>
For the color, it is possible to either write "blue" or use HTML hex colors. It is possible to find which code matches the color on google.

 

post-23508-0-70717900-1522443918_thumb.gif

 

 

For example: ffffff is white.

The first two represents red, the second two is green, and the last two are blue. Each can go from 0 to f

 

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

 

So since #ffffff is white, #000000 is black.

 

It is also possible to use these inside the style attributes:

 

font-family (changes font type)

font-size

background-color

text-align (left, right, or center)

 

There are many more, which can be found, just search it on google.

 

===================================

 

2. Examples of Internal CSS

 

<!DOCTYPE html>
<html>

<head>
<title>Hello World - CSS</title>
<style type="text/css">
body {
background-color:#000066;
}

p {
color: #ffffff;
margin-top:10px;
}
</style>
</head>

<body>
<p>Here is a paragraph, the internal CSS located in the head, makes this white (#ffffff)
and everything in between the body tags has a dark blue (#000066) background.</p>

<p>All paragraphs are going to be white, with a margin on top of 10 pixels.</p>
</body>

</html>
post-23508-0-99019700-1522443918_thumb.jpg

 

In this case, all the CSS styles are located in between the head tags. These stylse effect everything on that webpage. This is why both paragraphs are the same, using one paragph style. It is possible to make one paragraph different then the other. An example of this is located below.

 

<!DOCTYPE html>
<html>

<head>
<title>Hello World - CSS</title>
<style type="text/css">
body {
background-color:#000066;
}

p.one {
color: #ffffff;
margin-top:10px;
}

p.two {
color:#ff6600;
margin-top:20px;
}

p#three {
color:#000000;
background-color:#ffffff;
}
</style>
</head>

<body>
<p class="one">1. This is the first paragraph.</p>

<p class="two">2. This is the second paragraph.</p>

<p id="three">3. This is the third paragraph.</p>

<p class="one">4. This paragraph uses the same styles as paragraph one.</p>
</body>

</html>
post-23508-0-24315400-1522443919_thumb.jpg

 

Notice how with the first two paragraphics the CSS code uses p.one and p.two respectively. The last one uses p#three. Also, in the HTML code it changes; class="one", class="two", and id="three".

 

When using p.one, the HTML code HAS to have class="one", to identify which styles go with the paragraph.

When using p#three, the HTML code HAS to have id="three", to identify the correct styles.

 

Each way do basically the same thing. There are some differences, when deciding which one to use. A class can be used several times within the same webpage, while the id can only be used once in each webpage. So if you are going to use it more then once in a webpage, then make sure to use class.

 

===================================

 

3. Example of using External Style Sheets.

Now instead of having CSS inside the webpage, it will be in a CSS file. This file is then linked to the HTML webpage, to change the styles of the webpage.

 

HTML code:

 

<!DOCTYPE html>
<html>

<head>
<title>Hello World - CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<h1 id="header1">This is a header</h1>
<p class="paragraph">Here is a paragraph.</p>

<hr />

<div id="box"><p class="paragraph">Here is some text inside a box. [img=http://fearless-assassins.com/public/style_emoticons/default/smile.png]</p></div>

</body>

</html>
post-23508-0-58817800-1522443919_thumb.jpg

 

CSS code: (remember save it as "styles.css")

 

h1#header1 {
color:#444444;
font-size:50px;
}

p.paragraph {
font-family:arial, verdana, sans-serif;
margin:10px;
}

div#box {
width:150px;
background-color:#999999;
border:1px solid #000000;
}
post-23508-0-70689200-1522443920_thumb.jpg

 

The HTML div tag is one of the most important HTML tags to use when styling webpages. This will become more apparent in the next tutorials. Before CSS, table tags were used to arrange information on a webpage. But now using div tags and CSS, it is possible to arrange the webpage without any tables. This is a much better way to style webpages and is common practice now.

 

 

===================================

 

Recap

  • Three types of CSS
  • When to use class and id
Reminder
  • When using CSS, remember to open and close the styles: { and }
Edited by Fearless Staff

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site, you agree to our Terms of Use.