Está en la página 1de 2

Creating Web Pages with CSS3 Formatting in HTML5

Learning Objective

After completing this topic, you should be able to

describe the relation that CSS3 has with HTML5

1. Creating web pages using CSS3 formatting

CSS is a powerful page-description language that unleashes the power of your creativity.
It's part of the HTML development that gives you incredible power over a web page and its
elements. Whether its HTML elements like text and tags, page objects like spans and divs,
CSS controls it all. So in this video, I'll introduce you to the CSS3 and provide you with
some examples of its power. CSS stands for cascading style sheets and don't get too caught
up in the cascading part of it. Really what we talked about here is styles in HTML, applying
styles to standard text. Now, here we see a standard HTML document and if you were just
to put it in the way that I put it in here, then of course that's where you're going to see.
You're going to see just the plain old Times New Roman text and certain standard sizes, but
let's go ahead and take these styles that I've created. And I'll just do a select all by Ctrl+A,
Ctrl+C to copy, and paste them into this document. Now, they always go in the head
section anywhere after the title. So Ctrl+V to paste, and Save that style sheet. Now, if I
Refresh the page, you can see suddenly we've really done a lot to change the look, not very
pretty but that's not really the point. The point is that you can do amazing things with CSS.
You can mix and match style selections, you can have consistent styles throughout all your
web pages,

[The index.html file in the Microsoft WebMatrix window and its corresponding web page
are open. The file contains two sections, head and body. The head section contains two
tags, meta and title. The meta tag reads "meta charset="utf-8" />". The title tag encloses
the text, HTML5. The body section contains six tags: one h1, three p, one span, and one
div. The h1 tag contains the text, Heading. Each of the three p tags contains different class
names and the standard Lorem ipsum text. The first p tag class name is "regpara", the
second p tag class name is "italpara", and the third p tag class name is "boldpara". The
span tag contains the text, This is a span. The div tag contains the text, This is div 1. The
web page contains four sections: title, body, span, and div1. The title section contains the
text, Heading; the body section contains three paragraphs of the standard Lorem ipsum
text; the span section contains the text, This is a span; and the div section contains the text,
This is div 1. To change the look and feel of the web page, the presenter opens the style.css
file in the WebMatrix window, copies the styles, and pastes them in the head section of the
index.html file. The contents of the style tag are as follows: <style> body { font-family:
Calibri; background-color: #808080; } h1 { font-family: Arial; font-size: 50pt; color: #f00;
} .regpara { font-style: normal; } .italpara { font-style: italic; } .boldpara { font-weight:
bold; } #div1 { width: 150px; height: 150px; text-align: center; line-height: 150px;
background-color: #ffd800; position: relative; float: left; } #output { font-family: Consolas;
font-size: 20pt; } </style> As a result of these changes, the background-color of the web
page turns gray, the black heading turns red, the size of the heading text increases, the
font-style of the second paragraph text turns italic, and of the third paragraph text turns
bold. In addition, the color of the div1 section turns yellow and its width and height
changes. The span section shifts to the right-side of the web page and its text becomes
bold.]

you can even animate and do very interesting transformations using CSS. It's almost like a
programming language. As a matter of fact, in CSS3, which is new to HTML5, there are all
sorts of new features that you can use that really make it super powerful and there is a lot to
learn. But the more you learn about CSS, the more interactive and attractive your web page
is going to look. Now, CSS has a number of different ways of including information. The
way that I just showed you is actually to put the style sheet right inside the HTML
document and that's certainly has its own benefits. But there is also another way of actually
using inline CSS styles, where you actually apply them to HTML tags. And there is a third
method, which is the very popular and pretty useful method of attaching external style
sheets. You see here, I've a file called styles.css and there is a way to attach that style sheet
to an HTML document and there is a lot of benefits to that. Most obvious is to be able to
attach common set of styles to a number of different HTML pages. Rather than having to
put all this information that we pasted in here into every single HTML document or web
site, we could just have one style sheet. And that way it saves both on space in the HTML
and allows us to change styles universally or globally throughout a web site. So there is a
lot of different ways to use CSS styles and attach them to your HTML.

[He keeps the file open as he discusses the new features in CSS3.]

Now, there is a couple of rules about CSS that you need to be aware of. The order of the
styles is unimportant. So it doesn't matter what order you put them in here and it doesn't
matter what order you put in these various styles here. Okay, so ordering is unimportant.
The syntax rules of CSS are fairly strict, okay. So in other words, if I were to, for instance,
take out this semicolon right there and Save this page and Refresh. Okay, you see we have
broken something and so CSS is very specific or the browser is very specific rather in the
way they expect CSS to be notarized. And so let's go ahead and put that semicolon back in,
Save it and Refresh the page, and you can see there we go. We have changed it back and
fixed it. So again remember, CSS can be used for any number of things. The more you
learn about them, the more you're going to be just blown away really by what it can do.
And you can apply them to unique one time elements that you create, you can apply them
to elements that can be reused throughout an entire web site, or you can apply them to
standard HTML tags. So once you get familiarized with CSS and how to use it, you're
really going to be impressed with what you can do with it.

[To show the importance of the syntax in the CSS file, the presenter removes the semicolon
of the font-family attribute and the background-color of the web page disappears. Then he
reverts the action and the gray background-color appears again.]