Static Websites - INFT 269 Assignment 1: Static Websites

1. CIT012753
12/10/2012
Static Websites – INFT 269
Assignment 1
Formatting in HTML5 using CCS

2. With the advent of HTML5 and the World Wide Web being
utilised by more and more people, web page design has
never been more important.
The most popular and simple way of that many designers use
is Cascading Style Sheets or CCS.
Cascading Style Sheets

3. Websites like
http://www.csszengarden.com/,
dedicated solely to CCS
based design are a testament
to this fact.
CCS design at its best

4. In this presentation, I'm going
to talk about how you can use
CCS to liven up the
commonly overlooked
paragraph tag.
Even something as small as
this can make or break the
whole page.
Over to the left, you can see
some basic code in HTML5.
HTML5 in the Raw

5. And this is what it looks like in
Google Chrome.
Not very exciting.
Without any CCS, this has
turned out to be a pretty
boring page.
So, let's spruce it up a bit.
Pretty Basic Stuff

6. First, we will will add the line
below to Header of our code.
This will allow the page to call
the formatting from our CCS
code.
<link rel="stylesheet"
type="text/css"
href="JoanOfArc.css"
media="all" />
Linking to a CCS Style Sheet

7. Now we can start playing
around with the formatting in
our newly linked CCS
document.
First off, I've centred the
heading and floated the
image to the right.
I have also given the page a
light blue background.
CCS Basics

8. See. Looking better already.
Next, we will look at sprucing
up the text in the main body
of the page.
So I can really show the
formatting off, I've added two
additional paragraphs. This is
so I can style each of them
differently.
I'm using classes to
differentiate the paragraphs.
CCS in Action

9. We will start with colour. This
can be applied in a number of
ways.
Using basic colour names...
p.first
{
color:DarkRed
}
Making Beautiful Words

10. Or an RGB value...
p.second
{
color:rgb(47,79,79)
}
Making Beautiful Words

11. And for the extra keen, even
as a hex value.
p.third
{
color:#8B4513
}
Making Beautiful Words

12. We can also add some
decoration to make give the
text an overline, underline or
a strike-through.
text-decoration:overline
text-decoration:underline
text-decoration:line-through
Adding Some Decoration

13. I'll remove this, however. Text
decoration usually renders
the text difficult to read and
tends to breach accessibility
standards.
Adding Some Decoration

14. Text can also be transformed.
This can be as simple as
transforming all the
characters to uppercase...
p.first
{
text-transform:uppercase
}
More Than Meets The Eye

15. Or maybe lowercase...
p.second
{
text-transform:lowercase
}
More Than Meets The Eye

16. Even just capitialising the first
letter of each word.
p.third
{
text-transform:capitalize
}
More Than Meets The Eye

17. But what would text editing be
without fonts.
Lets have a look at some
now.
font-family:"Times New
Roman"
font-family:Arial
font-family:"Lucida Console"
Fonts Galore

18. But not just style. Font size as
well.This can be done with
absolute or relative sizing.
However, absolute is bad for
accessibility
font-size:16px
font-size:125%
font-size:0.875em
Fonts Galore

19. And that's just a few ways
that you can transform a
bunch of plain text into
something that your web
page deserves.
Just with this...
20% Cooler

20. You can turn this...
Before

21. Into this...
After

22. Even after having heaps of
fun playing around with CSS,
it is important to ensure that
your code (both HTML and
CSS) validates. Mine did.
Testing in other web browsers
is also important.
This is the page in Google
Chrome...
Just One Other Thing

23. In Internet Explorer...
Just One Other Thing

24. And even in Mozilla Firefox.
Just One Other Thing

25. Keep it up, practice hard
and one day your work
may be up there with
the masters on
ZenGarden.
What are you waiting for?