A Guide to HTML5

and CSS3
Table of Contents
PART 1: THE BASICS OF HTML AND HTML5....................................................................................................... 5

REQUIREMENTS........................................................................................................................................................5
DEFINITION OF HTML...............................................................................................................................................5
STRUCTURE............................................................................................................................................................. 6
VALIDATION............................................................................................................................................................ 6
FIXING THE WARNINGS..............................................................................................................................................8
COMMENTS.............................................................................................................................................................9
HTML5 STRUCTURE REVISITED.................................................................................................................................10
ADDING TITLE........................................................................................................................................................11
ADDING CONTENT..................................................................................................................................................11

PART 2: HTML ELEMENTS............................................................................................................................... 13

THE PARAGRAPH TAG..............................................................................................................................................13

OTHER BLOCK LEVEL ELEMENTS................................................................................................................................14
LINE BREAKS VS. PARAGRAPHS..................................................................................................................................16
INLINE ELEMENTS...................................................................................................................................................17
IMAGES................................................................................................................................................................ 18
ALTERNATE TEXT....................................................................................................................................................20
DISPLAYING AN IMAGE............................................................................................................................................21
SPECIFYING THE SIZE OF AN IMAGE............................................................................................................................22
ANCHOR TAGS/ HYPERLINKS....................................................................................................................................23
HYPERTEXT REFERENCE............................................................................................................................................24
LINKING INSIDE A HTML DOCUMENT.........................................................................................................................25
EMAIL LINKS..........................................................................................................................................................26
DIRECTORIES......................................................................................................................................................... 27
INLINE ELEMENTS IN ACTION....................................................................................................................................29
INLINE & BLOCK ELEMENTS IN ACTION.......................................................................................................................30
TABLES.................................................................................................................................................................32
FORMS.................................................................................................................................................................33

PART 3: MAIN HTML5 SPECIFIC ELEMENTS..................................................................................................... 38

HEADER & FOOTER................................................................................................................................................ 38

NAVIGATION......................................................................................................................................................... 39
SECTION............................................................................................................................................................... 39
ARTICLE................................................................................................................................................................39
ASIDE...................................................................................................................................................................40
THE METER ELEMENT.............................................................................................................................................40
THE NEW HTML5 ELEMENTS IN ACTION....................................................................................................................41
VIDEO.................................................................................................................................................................. 42
AUDIO..................................................................................................................................................................43
PART 4: THE BASICS OF CSS............................................................................................................................ 44

DEFINITION OF CSS................................................................................................................................................44
USING INLINE CSS..................................................................................................................................................45
COLOR................................................................................................................................................................. 45
USING INTERNAL CSS.............................................................................................................................................46
USING IDS IN CSS...................................................................................................................................................47
CREATING EXTERNAL CSS........................................................................................................................................49
LINKING TO EXTERNAL CSS......................................................................................................................................50
INEFFICIENT SELECTORS...........................................................................................................................................51
EFFICIENT SELECTORS..............................................................................................................................................52
HTML ELEMENT STATE...........................................................................................................................................53
THE CSS BOX MODEL.............................................................................................................................................54
FONTS..................................................................................................................................................................56

PART 5: MAIN CSS3.0 SPECIFIC PROPERTIES................................................................................................... 58

OPACITY...............................................................................................................................................................58
ALPHA COLOR SPACE..............................................................................................................................................58
BOX SHADOW AND BORDER RADIUS..........................................................................................................................60

ALL HTML TAGS LIST...................................................................................................................................... 62

Welcome to A Guide to HTML5 and CSS3.0

By Inno Tech

Your own personal Hand Book for Web Development

Part 1: The Basics of HTML and HTML5

Requirements

What do I need to start developing with HTML?

There are two tools that are essential to become an efficient and professional Web
Developer:

1. Text Editor
 A Text Editor supports Syntax highlighting and more efficient ways to code your
programs.
 Syntax highlighting allows you to easily see certain elements of your code in a
designated color. E.g., text editors may render the HTML structure as blue, comments
as grey and attributes and values as different colors.
 Allows you to easily distinguish between the sections of code, elements and
comments.

2. A browser
 To render your code.
 Any browser that supports HTML5 – Mozilla Firefox, Safari, Google’s Chrome,
Opera.

Definition of HTML

 HTML stands for Hyper Text Mark-up Language.

 The basis for all website related things and is a necessary skill for any Web
Developer.
 Almost every website is comprised of HTML whether that is a variation of
HTML or plain old HTML.
Structure

Let's start with a basic HTML5 structure:

1.1

No Output?

The Browser didn't seem to show any content?

The browser would not show any content (output), as the html document includes nothing to
be displayed in the browser. The browser has only been told that an HTML document is
created.

Validation

Even though all we have created is a HTML structure and we are not seeing any results (yet),
the HTML document should be validated with W3C's online HTML validation tool.

W3C (World Wide Web Consortium) is an organization that sets the standards for HTML (and
many other Web Based Languages) to provide a similar cross-browser experience; meaning
that web browsers will be more inclined to output (or render) data in a similar fashion.

1.2
1. Go to W3C's online HTML validation tool,
2. Select the third tab along- "Validate by Direct Input",
3. Copy and paste the HTML5 document code into the window and click 'Check'.
4. The document will pass validation with two warnings.

The warnings:

1) Consider adding a lang attribute to the html start tag to declare the language
of this document.

This warning is because the overall language to be displayed in your website has not been
declared.

2) Element title must not be empty.

This is because the name to be displayed for the page should be declared here,
and this can’t be empty.

Also try and use the W3C validation tool to upload the HTML document, by selecting
the second tab on the W3C's online HTML validation tool page and uploading the
HTML document.

Fixing the Warnings

Let’s fix the errors by declaring the character set and language. We will be using the UTF-8
Character encoding and English language for display. We can do this by adding some simple
mark-up to our head section.
We have just added our first HTML meta tag and lang attribute.

 Meta tag lets the browser know that we are using UTF-8 character encoding.
 The lang attribute declares that the language used for display in our website would be
English.

UTF-8

 The most commonly used character encoding

 Provides a standard format (encoding) for text (code)
 Will assist against the problems of endianness, which could result in incorrect or
invalid characters displaying (http:// [Link]/wiki/Endianness).

Adding language attribute is optional, since we will only be using English, the default display
language.

Comments

 Used widely in every programming language

 To help remind other developers what is happening in the code,
 To make note of extra code that will be added to the web application at a later date
 As notes to others who may be working on the same project.
 In HTML, comments are easily added to the document, by adding the opening and
closing comment tags.
The browser will not render anything placed inside the comment tag.

Example of Comments

HTML5 Structure revisited

Let’s go through our HTML document and talk about the structure step-by-step, using
comments.
 1.3

1. Type the above code into a new file.

2. Save the file with an .html extension (i.e. [Link]).
3. Open the html file with a browser.
4. What do you see?

Ans: Nothing has been output by the browser, as we have used comments to explain the
structure and have not yet added any “real” content.

Adding Title

So how can we tell the browser to output some data?

 Before we add any content to the document, let's talk about the title tag:

 It allows the specification of the name of the website – more specifically, the web
page.
 It is good practice to be as relevant as you can when giving your web page a title.
 The title tag is inserted into the head section of the HTML document.

If this HTML document is loaded in the browser now, no changes will be observed in the
webpage. But, have a look at the top of the browser window or current tab – the title of the
HTML document is shown.

Adding Content

The content can be added in-between the body tags:

1.4
Exercise four:

1. Type the above code into a new file with the text editor.
2. Save the file with an .html extension (i.e. hello_world.html)
3. Open the html file with a browser and see what the browser is rendering.
4. Remove the “Hello World” text and replace it with a sentence about your favourite season
and start to get comfortable with coding in HTML.
5. Make sure the html document is viewed in a suitable browser and validate it.

HTML Notes:

• All versions of HTML require the basic HTML structure, but the version of
HTML depicts a vast difference in the required elements and doc type
declarations. HTML4.01, XHTML and HTML5.
• Notice how every tag is closed in order of which they were opened? This is a
very important element for valid HTML.
Part 2: HTML Elements

The Paragraph tag

 The paragraph tag is part of the block level elements group.

 Block level elements will generally start on a new line
 Any Mark-up under or after the block level element will also start on a new line.

Here is an example of a paragraph tag in HTML, followed by some text after the ending
paragraph tag. Even though all of the text is on one line, the paragraph tag (block level
element) will place the text after the closing paragraph tag on a new line.

Output:

Other Block Level Elements

There are a variety of other block level elements available in HTML:

 Headings,
 logical (or document) divisions,
 horizontal rules,
 ordered lists and unordered lists.

So, let’s check out some of these block level elements in action.
Output:
 2.1

Exercise three:

1. Take note of the code above.

2. Type out the code into a new html document.
3. Change the content of the code to be about your favorite dessert.
4. Add an extra ordered list (containing 7 list items) and a logical division (containing a
paragraph element) to the end of the page.
5. Save the html document as “block_level_elements.html”.
6. Open the document with your browser and make sure it appears as intended.
7. Upload the html document to the online validator and correct any warnings using the
skills you have learned thus far.

Line Breaks vs. Paragraphs

 The break element or tag in HTML provides a line break (or new line).
 Some people may like to 'over-use' this element
 But when dealing with text, the paragraph element is recommended (where possible),
to provide formatting and appropriate spacing.
We could do the same thing with the paragraph tag, but with a better format .

Inline Elements

Now we have an understanding of what block level elements are, it’s time to move on to
some inline elements.

Text Modifiers- Introducing the strong and em tags.

 The em tag renders text as Italic

 Used to 'emphasize' text.
 The Strong and em tags are both part of the Text Modifiers group.

Example:
Text modifiers can be a simple way to make certain text stand out or add character to a
document. Just like this.

Images

Images are an important part of any form of content, especially websites. As a web
developer, it is very helpful and necessary to be able to place images onto a web page.

Then the URL is included for the image inside the src (source) attribute. The URL could be
relative or absolute.

Here is an example of using an absolute URL with the src attribute of the img tag:

When working in a Live or Development environment, relative file Paths are more suitable,
rather than absolute or full file Paths.

• A relative file Path can be defined as being a localized link; using the current directory
Structure as a means of navigation between files.
• An absolute file Path is a direct link or URL to a file.
 If we had an image titled '[Link]' in the same folder or directory as our Current html file,
we could simply link to that file just by using the files name:

If our image or file were in a directory titled "images" inside our Current folder or directory we
would then link to the image included.

Sometimes we need to navigate downwards (as opposed to upwards) in our directory

Structure. If our directory Structure looked something like:

/home/html/Public/Current/

And our Current html document is in our "current” folder; we could link to our Image (which
Could be located at /home/html/Public/Images/) by using:

../images/ basically tells the browser to navigate one directory down and then into our Images
directory.
Alternate Text

 When an image is unable to be displayed by a browser we need a fallback method.

 The alt (alternate text) can be used as a fallback method
 Some descriptive text to display if the image itself is unable to be displayed for any
reason.

An example of an image not displaying could be a HTML email (Gmail will, by default hide
any images and ask the user if they want to show images) or the results in a search engine.
Search Engines cannot “read” images, so they can only render “alternate” text in Search
Engine Result Pages (SERPs).

It is good to be descriptive and short with the alt attribute, like so:

Displaying an Image

So, let’s try out our image tag with a real image.

Output:
Specifying the Size of an Image

We can specify both height and width attributes inside our image tag like so:

Note: The height and width values are in px (pixels).

So, let’s try out this image with the height and width attributes specified
 2.2

1. Create a new HTML5 document.

2. Using the skills, you have learned so far, add an image (of your choice) with a
width and height of your choosing to your HTML5 document.
3. Load your HTML5 document in your browser and make sure it renders as
expected.
4. Head over to the W3C’s HTML Validator and validate your HTML5 Document.
Correct any errors you receive.

Anchor Tags/ Hyperlinks

Anchor tags are very important in web development.

An anchor tag could be used in this way:

The above code will render as:

Let's try a simple link to Google:

The above example will render:

Type out the above code and Try it out, notice that the browser will now load Google’s
homepage when the link is clicked.

We have covered how to link to a page, but what if we want our users to go to our linked
page, but in a new window (so they don't leave our interesting website)?

We can do just this by using the target attribute of the anchor tag and passing in a value of
‘_blank’.

Opening in a New Window:

The above example will render:

Type out the above code and Try it out

Notice that the browser will now load Google’s homepage in a new window when you click on
the link.

Hypertext Reference

The most important attribute for the anchor tag is the href attribute. The href (Hypertext
Reference) attribute will tell the anchor tag where to link to, or where to send the user
once clicked on.

This example is slightly different to the previous examples:

Linking inside a HTML document

 Basically, the '#' symbol can also act as a page anchor

 When nothing is assigned to the '#' in the href attribute of an anchor tag
 When the user clicks on it, it will generally go nowhere as the link does not have a
specific location.

Now, we can assign id attributes to some of our elements, to use our anchor tags to link to
specific parts in our HTML, rather than just having the '#' symbol, we would use:
A logical or document division is added at the start of the above example with an id of top.

Ids are a very useful feature of HTML, but for now we are just going to use it for an anchor
link (something to link to). We could assign our div with any id value, as long as we reference
it in our href attribute of our anchor tag.

2.3

1. Create a new HTML document and save it as anchors#.html.

2. Add a logical division with an id of ‘top’ and an anchor tag with a href value of
‘#top’.
 3. Head on over to [Link] and generate some ‘dummy text’, copy it and
paste it in between the logical division and the anchor tag you have placed in your
HTML document. Save your document.
4. Open your anchors#.html document in your browser, scroll down to the bottom
of the page and click on the link you have created.
5. Notice how the link takes you to the top of the page (The logical division with
an id of ‘top’).

Note: Make sure that there is enough text to actually cover the height of the page.

Email Links

 In HTML a matilto can be created

 A link, when the user clicks on this link their email client will open
 the mailto: value (our email address) will be added to the TO: field.

This makes it easy and enticing for a user to quickly send us some email, regarding our web
page.

You may have noticed that I have added '?Subject=Email', this will add “Email” to the subject
field within the email. You can change the mailto and Subject values to suit your needs.

Directories

You will often be using a folder structure. The folder structure is a crucial part of good coding
practice and helps to tidy up our files (an images folder and an html folder).

A basic html folder structure would look similar to this:

Note: When working with folder in Web Development, we refer to folders as directories.

Example of linking to the [Link] page from [Link]:

The purpose of the following exercise is to make sure you have a grasp of 'navigating the
directory structure'.

2.4

1. Create three new html documents named; [Link], [Link] and [Link].
2. Create the same directory structure as shown above and place your new html files
in the appropriate directories.
3. Give each html file an appropriate title tag and a level 1 heading (h1).
4. Add a paragraph of appropriate text to each of our html pages and a mailto: link to
the contact page.
5. Now that we have some text and a heading for each html document, we need
place an image (you can use any image you would like) on each page.
6. Using your skills, you can add an image under the paragraph tag to each html
document and a link to each other html document in the directory structure under
the image.
7. Test out your html documents by saving them with the same names as detailed
above. Make sure the images in your html documents are appearing in the browser
and when you click the links under the images, you are taken to the respective html
document (i.e. a link to [Link] should take you to the [Link] page when
you click on the link) in your browser.
8. Now that you have completed your three html pages, go ahead and validate them
with the online validator and fix any errors that appear.
Inline Elements in Action

Let's check out these inline elements in action.

Output:

Notice how the contents of the strong, em, anchor and image tags are being displayed on the
same line, rather than being displayed on separate lines- like the block level elements.
Inline & Block Elements in Action

So, let’s try some block level and inline elements together.

Output:
Assignment 1
Isa who’s a client asked you to build her a new website for New York Fashion Week!
Use your newly learned HTML knowledge to create the basic structure of this blog. It is
important to include pictures, links, lists and other HTML elements for this website.

 Create a new HTML file for the blog, build the basic HTML structure.
(check if the file type is correctly declared and document encoded)
 Title of webpage = Everyday with Isa
 Right below the opening tag -
-<h1> heading that says “An Insider’s Guide to NYFW”
-<h2> heading that says “Getting Tickets & Picking the Shows”
-<h2> heading that says “Dressing for the Shows”
 Now for the blog content, add a paragraph between <h1> and first <h2> tag that says -
“NYFW can be both amazingly fun & incredibly overwhelming, especially if you’ve
never been. Luckily, I’m here to give you an insider’s guide and make your first show a
pleasurable experience. By taking my tips and tricks, and following your gut, you’ll
have an unforgettable experience!”

 Between the two <h2> tags, post a paragraph that says -

“If you’re lucky or connected you can get an invite, sans the price tag. But I wasn’t so
lucky or connected my first 2 years so I’m here to help you out. First, plan out which
shows are most important to you and make a schedule and this is a biggie: SET A
BUDGET. If you’re worrying about blowing your cash the whole time you won’t have
fun. Then check out prices, days, and times and prioritize the designers you want to
see most. Lastly, purchase your tickets and get excited!”
 After the last <h2> element, add the last paragraph that says –
“Always be true to your own sense of style, if you don’t you’ll be uncomfortable the
whole time and it will show. Remember, NYFW is about expressing yourself and taking
in what the designers have chosen to express through their new lines. Also, it’s
important to wear shoes you’ll be comfortable in all day. Obviously you want to look
good, but you’ll be on your feet all day long, so be prepared.”
 The fashion blog need many images and so, above each paragraph, add an image
with the link as the following in order

[Link]
[Link]

[Link]
[Link]
 [Link]
[Link]

 Your very first blog is pretty much finished, but let’s say something about Isa, so her
readers get to know her
-Add an image with the source below the opening body tag

[Link]
structure/[Link]

 Below her profile picture, add an <h3> that says “by Isabelle Rodriguez|1 day”
-Isa wrote more than one fashion blog, as to let her readers know beneath the add a
<h4> that says “Related Content”

 Below that header tag, create an unordered list with following four items
-“How to Style Boyfriend Jeans”
-“When Print is Too Much”
-“The Overalls Trend”
-“Fall’s It Color: Blush”
 Now to link our blog to the web, turn the word ‘NYFW’ into
[Link]
(note that the link should be opened in a new page)
 For her fans to get in touch with her, the blog needs contact info
-add a <div> block at the bottom of the html’s body and set its id = ‘contact’
-inside that block, add a paragraph that with follow contact
Email:isa@[Link] | phone :917-555-1098 |address: 37 284th St, New
York, NY, 10001
 Inside the contact <div>, make the words “email”, “phone”, “address” bold,
 Let’s link the profile picture with the contact block, wrap the profile image with a link
and set href = “#contact.”
 And make sure your new blog is validated and error free.

CONGRAULATIONS!! Now compare your blog with the final product.

Tables

 Sometimes, it is more relevant to display information or data in a table.

 Tables in HTML are relatively simple
 Opening Table Tag and the closing Table tag.
 Inside of Table element, we have table rows.
 Inside the table rows we have tabular data or cells.
 But, for our table headers, we will be using the table header tags inside our table row.
Forms

When we work with HTML forms in the real world, there are two attributes that we
need to add to our opening form tag.

Method and Action:

 For the action attribute, you will enter in the destination of the Form data.
  The method will take either a POST or GET value.
 POST and GET are used with server-side processing.
 You would generally be using POST to submit most forms of data.
 The main difference between POST and GET is that POST sends data to the server
'behind the scenes', whereas GET will form a query string.
 A query string consists of name attribute values and the values input by the user.
 If we were submitting sensitive data to the server we would definitely not use GET; in
the case that we did, all information input by the user would be clearly visible in the
URL address bar.

Type out the following code and select some values from the form and click the submit
button. Take a look in your URL Address bar; this is called a query string- the part following
the '?'.

Again, type out the following code, load it up in your browser, enter some text into the inputs
in the form and click the submit button. Take a look in your URL Address bar.
The label tag allows us to add descriptive text regarding the input expected from the user and
when the user clicks the label text, focus will be drawn to the input.
 Commonly used input types would be-

[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]

To use labels properly, you must give the label a ‘for’ attribute and a value of the ‘for’ attribute
that corresponds to the input’s id.

The password field will mask this to prevent prying eyes when a user is entering in a
password. By using GET, you have just seen (in the query string) that the input entered into a
password field remains plain text.
Assignment 2
1. Create a new .html file titled [Link].
2. Add a table (4x7) and type in 4 of your favorite artists and seven of their best songs,
to fill out the table. By doing this simple exercise, you will learn how to create a HTML
table of any size.
3. Under the new table that you have created; add a form.
4. This form will used to fill out first name, last name, email, password, date of birth,
nationality(dropdown), gender(radio), and address(textarea) and buttons to transport
data.
5. Appropriately name each input and test that you have done so correctly by entering in
text/ making selections and submitting the form (clicking 'submit'). Pay close attention
to the query string that has formed in your URL address bar.
PART 3: Main HTML5 Specific Elements

So far we have only really learned about general HTML tags and elements, now it's
time to get into some HTML5 specific elements. As you may notice when you start to work
with HTML and build some of your own web pages, it would be really helpful if there was a
logical way to define the header and footer of our web page. With HTML5, we can just do
that with the header and footer tags:

Header & Footer

 The header element defines a header for our html document.

 We could also have multiple headers in our html document, to define headers for
different parts of our html.
 The footer element defines a footer for our html document; just as we can with the
header element
 we can also have multiple footer elements within our html document- defining footers
for different parts of our html.

Along with these new header and footer elements, there are also a few more
important elements that have been introduced with HTML5.

Navigation

We can now define a navigational element with the nav tag:

We would use this element to hold our main navigational content.

Section

We can now define a ‘section’ of our HTML document. Do keep in mind that the contents of a
section should be related.
Article

We can now define an 'article' within our HTML document. Within a section, we could have
several articles:

Aside

We can now define an 'aside'; a part of our HTML content that is 'aside' from our main
content, but is still related:

The Meter Element

 We define the meter element with the opening and closing meter tags.
 The HTML5 meter tag will take a few attributes, min, max and value.
 The Min and Max values will define a range in which our value will be compared.
 For example, with a min of 0 and a max of 100, a value of 50 will show a ‘gauge’ that
is 50% complete:
The text entered in between the opening and closing meter tag is fallback text. This fallback
text will be rendered in older browsers that do not yet support the meter tag.

The new HTML5 Elements in Action

3.1

1. Using only the new HTML5 tags, create a Valid HTML5 document with some
content about your favorite holiday.
2. Validate this HTML5 specific document with the online validator and fix any
errors.
Video

One of the greatest features of HTML5 is the ability to implement a fully featured Video with
Controls.

 Start out with the opening Video tag, passing in a height & width and the controls
attribute, so the video player will have controls.
 Next, add the source tag and actually add the Video URL to the src attribute of the
source tag.
 This can be an absolute or relative URL.
 Along with our actual video src, we need to tell the browser the mime-type.
 A mime type basically lets the browser know what kind of format or media type to
expect.
 To provide a similar cross-browser experience you will need to supply multiple
formats, contained within separate source tags.

Here we have the video Element set to 640x480px with controls displayed, some fallback text
(to display some text in a browser that doesn’t support the video element) and two sources-
each have a different format and mime-type.

Audio

As you have just learned about HTML5 Video, HTML5 Audio isn’t going to be all that difficult
to grasp.

 HTML5 audio isn’t all that different from HTML5 Video (apart from the fact that it’s
audio and not video).
 With the audio element, size is not needed, but it is ALWAYS good practice to use the
controls attribute so your users can actually operate the Audio Player.
 Just as we can have multiple sources in our video element, we do the same thing with
our audio element; passing in audio files and appropriate mime-types.
Part 4: The Basics of CSS
Definition of CSS
CSS stands for Cascading Style Sheets and provides HTML with layout and design. Along
with making things pretty and aesthetically pleasing, CSS also provides a general structure to
HTML.
Some of the most important CSS properties (in my opinion) are (in no order):
♠ Color - specifying text color.
♠ Font-family - specifying font type.
♠ Font-size - specifying font size.
♠ Text-decoration - specifying text decorations, such as underline.
♠ Font-style - specifying font styling, such as italics.
♠ Font-weight - specifying font weight, such as bold.
♠ Width - specifying the width of an element.
♠ Height - specifying the height of an element.
♠ Background - specifying the background.
♠ Border - specifying a border.
♠ Text-shadow - specifying a shadow for our text.
♠ Float - specifying the float of an element, such as left or right.
♠ Position - specifying the position of an element, such as absolute or relative.

♠ Z-index - specifying the z-index of an element, such as 999; which would put
that styled element 'on-top' of all other elements that either have a negative z-
index specified or no z-index specified.
 ♠ Padding - specifying padding inside an element, such as padding around text.

♠ Margin - specifying the margin between elements.

CSS can be implemented in three different ways to our HTML:

1. Inline
2. Internal
3. External

Using Inline CSS

So, let’s use some inline CSS to change a few things in our HTML structure.
Output:

Color

 We have used the English word for the color that we want to use.
 But there are two other ways we can define colors in CSS; the rgb color values
and something called Hexadecimal.
 All three types of defining colors in CSS are acceptable; you can read more
about colors in CSS here: [Link]

We will be using a mixture of the three different ways to define colors in CSS.
Using Internal CSS

As you can see, our inline CSS is very effective, but perhaps not very efficient. Inline CSS is
good for adding slight changes or specifying colors for different text elements, but it starts to
get a little 'wordy' and messy.

When we add CSS to HTML either; externally or in the head section, we can use selectors.

Selectors allow us to 'select' or 'point' to a specific element of our HTML. CSS can use HTML
elements as selectors, such as the paragraph, anchor, em and strong tags. If we referred to
these elements as selectors in our CSS we would be styling every paragraph, anchor, em
and strong element in our HTML.
Using ids in CSS

We are using a class to identify our bottom em tag. The dot notation before the class name
allows us to select or target an element in our HTML by its class name.

We can use ids like so:

  All we have to do is change 'class' to 'id' for the element we are referring to, and
change the '.' in front of our CSS selector (in the head element) to the '#' symbol.
 The # symbol (when not used as href attribute) is generally used to signify an id within
the HTML.
 The major different between using classes and id's is; classes can be re-used time
and time again in the same HTML document, whereas id's can only be used once in a
single HTML document.
 A class can be regarded as a group or multiple items, and an id as a single
identification.
 The output of the above code is the same (we have also set a font-size for the
#bottom em tag) as the output for the previous code example, we are getting the
same results as we are basically telling the browser the same thing, just in a different
way.

There are several ways to make selectors 'unique' or point to only 'some' parts of the HTML.

Creating External CSS

To add an external CSS to our HTML, we need to tell the HTML all about it- what relation it
has to our HTML, the type of file it is and its location and name.

Remember the Meta tags from before?

Well this is implemented in the same way (completely different concepts), by adding a line of
code into our head section of our HTML document. We use a rel value to tell HTML what the
CSS file's relation is to the HTML, a type value to tell the HTML the type of file it is and a href
value telling the HTML where the file is located and its name.

Note: CSS files have a file extension of .CSS

We can add an external style sheet to our HTML by using link tag.

So, let’s create a small CSS file, to use externally.

Go ahead and save the above styling into a new CSS file, titled [Link].

Linking to External CSS

If our style sheet (CSS) were located in the same directory (or folder) as our HTML file, we
would add the tag to the head section of the HTML document, like so:

Just as our CSS example before, no matter of its location (inline, internal and external), the
CSS will tell the browser to render the styles for our HTML in the same way.
Inefficient Selectors

Let’s have a look at some inefficient CSS selectors with some external CSS:

The advantages of using external CSS include

 the ability to completely separate the HTML from the CSS,

 to reduce individual file size and length,
 make things more readable and use effective selectors; meaning selectors that
target multiple elements where necessary.
  Rather than having a large portion of CSS repeating and applying the same styling
to different elements, we could ‘join’ the selectors together to create a smaller file
size or to simply be more efficient with our use of CSS.

We can target or select multiple elements by separating the selectors with a comma in the
CSS.

Let’s fix this up

Efficient Selectors

4.1
 1. Create your HTML5 document structure and create a file titled [Link]
2. Add the new HTML5 elements and style the HTML accordingly:
- Articles within a section will have a font-size of 2 times the default font-size.
- The Footer and Header will have a text-decoration of underline and a color of red.
- The aside will have a font-weight of bolder and a color of blue. (rgb and
hexadecimal color values)
3. Save your CSS and HTML files and load them into your browser, checking that they
render as expected.

HTML Element State

With our new CSS abilities, we are able to style a HTML element, based on its 'state'.
HTML.

 Element state refers to the 'state' that the elements are in

 Some of these include: Hover and Active.

You may have noticed that when you hover over a link on a web page, that the link will
change color (among other aspects). We can do this with almost any HTML elements.

In the above example we have styled all 'hovered' over articles and the anchor tags, when
the article is being 'hovered' over with a background of red and a text color of white.

Along with defining hover style, we can define active style. Active is defined by an element
that is 'actively' being clicked on, i.e. if you are clicking a button, that button's state is now
active.

In the above example, an article that is 'active' will have a background color of almost black.
 4.2

1. Create a new HTML document with an external Style sheet.

2. Add some styles that will target specific elements, based on their 'state'.
3. Make sure to make use of the rgb and hexadecimal color values.
4. Test your work in your browser and make sure it renders as expected.

The CSS Box Model

One of the fundamental understandings of CSS is the Box Model. The Box model helps us to
understand the layout and design of HTML and CSS.

The CSS Box model is made up of content, Padding, Borders and Margins.

By definition:

-The padding is the area that separates the content from the border.

-The border is the area that separates the padding from the margin.
 -The margin is the area that separates our box from surrounding elements.

How do we define these?

In the above example, we have set the padding for the top and bottom of the element to 50px
and the left and right to 30px. The margin has been set to 0px for the top and bottom and the
left and right margin is set to auto. When we set a value of auto in our margins, it will
basically 'center' the element within the containing or parent element.

As you may have noticed, we have also set our border. Our border is 1px wide for each side,
is solid and has a color of black.

The above code renders the following output:

Note that the rendered output will be 152px in height (top and bottom padding, plus the width
of our borders and the specified height of our element) and 562px in width (left and right
padding, plus the width of our borders and the specified width of our element).

4.3

1. Create a new HTML file and an external Style sheet.

2. Using your knowledge of the CSS Box Model, create a ‘box’ that has a height of 60px,
a width of 260px, a solid border of 3px (you can pick any color you wish), top and
bottom padding of 55px, left and right padding of 25px and a top and bottom margin
of 0px and a left and right margin set to auto.
3. Save, test your work in your browser and calculate the exact size of your box.

Fonts

 When using CSS, we can change the font-family of our text.

 We can specify multiple font-families for any given element.
 If the user has the first specified font on their system; that is the font that will be used.
 If the user does not have our first specified font on their system, the browser will
attempt to render the next font and so on until one of the fonts are located on the
user’s system.
  These font-families are separated with a comma and the proceeding fonts are
referred to as fallback fonts.

In the above example we are saying that our header should have a font-family of Helvetica
Neue, if that is not located on the user’s system, we will try Helvetica. If Helvetica is not
located on the user's system, we will 'fallback' to a generic sans-serif font.

You can find out more about sans-serif fonts here: [Link]

Part 5: Main CSS3.0 Specific Properties

Opacity

In CSS3.0 we can easily specify opacity for an element:

In the above code we are saying that every article within a section should have opacity of
50%. This will make all of our articles within a section appear transparent. When we set the
opacity of an element, we are also setting the opacity of the contents as well and this can
have undesired effects.

Alpha Color Space

 Instead of using the opacity property in CSS, we can set an Alpha Color Space.
 We can do this by specifying the color or background-color of an element using the
rgb color values.
 Now, to specify the Alpha Color Space, we simply add an extra value to our rgb color
values; what I mean by that is we change rgb to rgba and have four values for the
colors, instead of the usual three.

The Alpha Color Space value will take a value of between 0 and 1. The Alpha Color Space
will specify the opacity of that element.
In the above example we have set all of our articles within a section to have a background-
color of red. When these articles are hovered over, we are setting using the same color, but
with an Alpha Color Space value of 0.5. In other words, when we hover over our article
elements we will have a background-color that will be slightly transparent.

In the above example you may have noticed the border-radius and box-shadow properties.
Box Shadow and Border Radius

 We can specify a box-shadow for most of our HTML elements

 This will literally give a 'box' (or element) a box-shadow; giving the element a 3D like
appearance.
 The box-shadow property can take 4 arguments: the h-shadow value, the v-shadow
value, the blur-distance and the color of the shadow.

The border-radius property will set a 'border radius' for each of our element’s corners;
resulting in rounded corners.

This will be the resulting output when we hover over our element.

As you can see we have rounded corners, a shadow and we have an almost pink
background-color. The background-color is set to red, but when we hover over it, we are
setting the background-color to be 50% transparent.

To learn more about CSS3.0, check out the CSS3.0 Roadmap: [Link]

TR/2001/WD-css3-roadmap-20010523/
 5.1

1. Create a new HTML file and an external Style sheet.

2. Using all of the techniques, concepts and code that you have learned; create your
first Website It doesn’t have to be glamorous. The point of this final exercise is to get
you started with HTML5 and CSS3.0- in the real world
3. Good Luck

All HTML Tags List

Tag Description In HTML5?

<!--...--> Describe a comment text in the source code

<!doctype> Defines a document type

<a> Specific a anchor (Hyperlink)

Use for link in internal/external web documents.

<abbr> Describes an abbreviation (acronyms)

<acronym> Describes an acronyms REMOVE

<address> Describes an address information

<applet> Embedding an applet in HTML document REMOVE

<area> Defines an area in an image map

<article> Defines an article NEW

<aside> Describes contain set(or write) on aside place in page contain NEW

<audio> Specific audio content NEW

<b> Specific text weight bold

<base> Define a base URL for all the links with in a web page

<basefont> Describes a default font color, size, face in a document REMOVE

<bb> Define browser command, that command invoke as per client NEW/ REMOVE
action

<bdo> Specific direction of text display

<big> Defines a big text REMOVE

<blockquote> Specifies a long quotation

<body> Defines a main section(body) part in HTML document

<br /> Specific a single line break

<button> Specifies a press/push button

<canvas> Specifies the display graphics on HTML web documment NEW

<caption> Define a table caption

<center> Specifies a text is display in center align REMOVE

<cite> Specifies a text citation

<code> Specifies computer code text

<col> Specifies a each column within a <colgroup> element in table

<colgroup> Defines a group of one or more columns inside table

<command> Define a command button, invoke as per user action NEW

<datagrid> Define a represent data in datagrid either list wise or tree wise NEW/ REMOVE

<datalist> Define a list of pre-defined options surrounding <input> tag NEW

<dd> Defines a definition description in a definition list

<del> Specific text deleted in web document

<details> Define a additional details hide or show as per user action NEW

<dfn> Define a definition team

<dialog> Define a chat conversation between one or more person NEW/ REMOVE

<dir> Define a directory list REMOVE

<div> Define a division part

<dl> Define a definition list

<dt> Define a definition team

<em> Define a text is emphasize format

<embed> Define a embedding external application using a relative plug- NEW

in

<eventsource> Defines a source of event generates to remote server NEW/ REMOVE

<fieldset> Defines a grouping of related form elements

<figcaption> Represents a caption text corresponding with a figure element NEW

<figure> Represents self-contained content corresponding with a NEW

 <figcaption> element

<font> Defines a font size, font face and font color for its text REMOVE

<footer> Defines a footer section containing details about the author, NEW
copyright, contact us, sitemap, or links to related documents.

<form> Defines a form section that having interactive input controls to

submit form information to a server.

<frame> Defines frame window. REMOVE

<frameset> Used to holds one or more <frame> elements. REMOVE

<h1> to <h6> Defines a Headings level from 1 to 6 different sizes.

<head> Defines header section of HTML document.

<header> Defines as a container that hold introductory content or NEW

navigation links.

<hgroup> Defines the heading of a section that hold the h1 to h6 tags. NEW/ REMOVE

<hr /> Represent a thematic break between paragraph-level tags. It is

typically draw horizontal line.

<html> Define a document is a HTML markup language

<i> Defines a italic format text

<iframe> Defines a inline frame that embedded external content into

current web document.

<img> Used to insert image into a web document.

<input> Define a get information in selected input

<ins> Used to indicate text that is inserted into a page and indicates
changes to a document.

<isindex> Used to create a single line search prompt for querying the REMOVE
contents of the document.

<kbd> Used to identify text that are represents keyboard input.

<keygen> Used to generate signed certificate, which is used to NEW/ REMOVE

 authenticate to services.

<label> Used to caption a text label with a form <input> element.

<legend> Used to add a caption (title) to a group of related form

elements that are grouped together into the <fieldset> tag.

<li> Define a list item either ordered list or unordered list.

<link> Used to load an external stylesheets into HTML document.

<map> Defines an clickable image map.

<mark> Used to highlighted (marked) specific text. NEW

<menu> Used to display a unordered list of items/menu of commands.

<meta> Used to provide structured metadata about a web page.

<meter> Used to measure data within a given range. NEW

<nav> Used to defines group of navigation links. NEW

<noframes> Used to provide a fallback content to the browser that does not REMOVE
support the <frame> element.

<noscript> Used to provide an fall-back content to the browser that does

not support the JavaScript.

<object> Used to embedded objects such as images, audio, videos,

Java applets, and Flash animations.

<ol> Defines an ordered list of items.

<optgroup> Used to create a grouping of options, the related options are

grouped under specific headings.

<option> Represents option items within

a <select>, <optgroup> or <datalist> element.

<output> Used for representing the result of a calculation. NEW

<p> Used to represents a paragraph text.

<param> Provides parameters for embedded object element.

<pre> Used to represents preformatted text.

<progress> Represents the progress of a task. NEW

<q> Represents the short quotation.

<rp> Used to provide parentheses around fall-back content to the NEW

browser that does not support the ruby annotations.

<rt> Specifies the ruby text of ruby annotation. NEW

<ruby> Used to represents a ruby annotation. NEW

<s> Text display in strikethrough style.

<samp> Represents text that should be interpreted as sample output

from a computer program.

<script> Defines client-side JavaScript.

<section> Used to divide a document into number of different generic NEW

section.

<select> Used to create a drop-down list.

<small> Used to makes the text one size smaller.

<source> Used to specifies multiple media resources. NEW

<span> Used to grouping and applying styles to inline elements.

<strike> Represents strikethrough text. REMOVE

<strong> Represents strong emphasis greater important text.

<style> Used to add CSS style to an HTML document.

<sub> Represents inline subscript text.

<sup> Represents inline superscript text.

<table> Used to defines a table in an HTML document.

<tbody> Used for grouping table rows.

<td> Used for creates standard data cell in HTML table.

 <textarea> Create multi-line text input.

<tfoot> Used to adding a footer to a table that containing summary of

the table data.

<th> Used for creates header of a group of cell in HTML table.

<thead> Used to adding a header to a table that containing header

information of the table.

<time> Represents the date and/or time in an HTML document. NEW

<title> Represents title to an HTML document.

<tr> Defines a row of cells in a table.

<track> Represents text tracks for both the <audio> and <video> tags. NEW

<tt> Represents teletype text. REMOVE

<u> Represents underlined text.

<ul> Defines an unordered list of items.

<var> Represents a variable in a computer program or mathematical

equation.

<video> Used to embed video content. NEW

<wbr> Defines a word break opportunity in a long string of text. NEW

All the HTML elements list - [Link]

All the styling of CSS - [Link]
This concludes the eBook- “A Guide to HTML5 and CSS3.0”, but this is just the
start of your journey as a web developer