Jump to content

  • Log in with Facebook Log in with Twitter Log In with Steam Log In with Google Sign In
  • Create Account

Tutorial info Visit support topic

  • Added on: Sep 02 2012 06:30 AM
  • Date Updated: Sep 02 2012 11:00 PM
  • Views: 1980
 


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

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

Posted by ajnl on Sep 02 2012 06:30 AM
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.

hexcolor.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>

picture1.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>

picture2.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 src='http://fearless-assassins.com/public/style_emoticons/<#EMO_DIR#>/smile.png' class='bbc_emoticon' alt=':)' /></p></div>

</body>

</html>

picture3.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;
}

picture4.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 }