A Guide to HTML5 and CSS3.0.

by Ashley Menhennett.
All images and Logos are the property of their respective
owners.
1
About The Author
Ashley Menhennett
is the Proud Owner
of HoofedCracker Web Services
by day and Web Developer by Niht.
http!""lorified.#e
While excelling in his studies in Australia,
Ashley has found it important to spread his
knowledge of good coding practice
and the foundation of Web Development,
which any one can learn
at any time.
$
With pecial !hanks to my "amily and Logan Wenger#
%
Part 1: The Basics of HTML and HTML5
1. &e'uire#ents.
$. Definition of H()*.
%. Structure.
+. No Output,
-. .alidation.
/. )ore 0rrors.
1. Co##ents.
2. H()*- structure revisited.
3. 4nspectin with 5ire6bu
17. 8ddin Content.
11. Notes.
+
Part : HTML !"e#ents
1$. (he Pararaph (a.
1%. Other 9lock level ele#ents.
1+. 4nline 0le#ents.
1+ a: *ine 9reak.
1+ b: (e;t )odifiers.
1+ c: 4#aes.
1+ c a: 8lternate (e;t.
1+ c b: Displayin 4#aes.
1+ c c: Specifyin the Si<e of an 4#ae.
1+ d: 8nchors and Hyperlinks.
1+ e: *inkin inside a H()* Docu#ent.
1+ f: 4nline 0le#ents in 8ction.
1-. 9lock *evel and 4nline 0le#ents in 8ction
1/. H()* (ables = 5or#s
-
Part 3: Main HTML5 S$ecific !"e#ents
11. Header = 5ooter
12. Nav
13. Section> 8rticle = 8side
$7. Proress 9ars" (he )eter (a
/
Part %: The Basics of CSS
$1. Definition of CSS.
$$. ?sin 4nline CSS.
$%. Color
$+. ?sin CSS in the Head.
$-. ?sin 4ds and Classes.
$/. Creatin 0;ternal CSS.
$1. *inkin to 0;ternal CSS.
$2. 4nefficient Selectors.
$3. 0fficient Selectors.
%7. H()* 0le#ent State
%1. ?nordered lists with icons
%$. (he CSS 9o; )odel
%%. 5onts
1
Part %: Main CSS3.0 S$ecific Pro$erties
%+. 8lpha Color Space = Opacity
%-. 9o; Shadow
%/. 9order &adius
2
Welcome to a Guide to HTML5 and CSS3.0
by Ashley Menhennett.
$ou can use this e%ook as your own personal &and %ook#
3
Part 1: The Basics of HTML and HTML5
&hat do ' need to start (ritin) and de*e"o$in) (ith HTML+
(here are absolutely no re'uire#ents to start learnin H()*> but you will need so#e tools to help
you alon the way. (here are two tools that are essential to beco#in an efficient and professional
Web Developer.
Firstly, you will need a Text Editor.
Secondly> you will need a browser to render your code. I recommend Firefox.
5or the purpose of this e9ook> o ahead and download and install )o<illa@s 5irefo; ACross6
platfor#: 9rowser and the 5ire6bu add6on for 5irefo;. (he 5ire6bu add6on will be your new best
friend as a learned web developer.
(he 5ire6bu 5irefo; add6on provides the ability to closely BinspectB the ele#ents of an H()*
docu#ent and see whatCs oin on behind the scenes6 this will play a bi part in your web
develop#ent careerD
,efinition of HTML
H()* stands for Hyper Te;t Mark6up Lanuae. H()* is the basis for all thins Web and is a
necessary skill for any Web Developer. 8l#ost every website is co#prised of H()* whether that
be a variation of H()* or plain old H()*.
Structure
*et@s start with a basic H()*- structure!
!-ercise one:
1. (ype out the above code into a new te;t file.
$. Save the file with an .ht#l e;tension Ai.e. structure.ht#l:.
%. Open the ht#l file with your 9rowser.
+. What do you see,
17
.o /ut$ut+
(he 9rowser didn@t see# to show us any content did it,
(he browser would not show us any content Aoutput: as we have not yet told the ht#l docu#ent to
output anythin to the browser. 8ll we have told the browser is that we have an H()* docu#ent.
0a"idation
Even though all we have created is a HTML structure and we are not seeing any results (yet), the
HTML document we have should validate with W!"s online HTML validation tool.
W%C is the World Wide Web Consortiu#6 they set the standards for H()* Aand #any other Web
9ased *anuaes: to provide a si#ilar cross6browser e;perienceE #eanin that web browsers will
be #ore inclined to output Aor render: data in a si#ilar fashion.
!-ercise t(o:
#. $o to W!"s online HTML validation tool,
$. Select the third tab alon6 B.alidate by Direct 4nputB>
%. Copy and paste your H()*- docu#ent code into the window and click @Check@.
+. Notice how the docu#ent passed validation with three warnins,
Let1s 2i- these (arnin)s:
1: (he warnin6 B?sin 0;peri#ental 5eature6 H()*- Confor#ance CheckerB is basically
tellin us that H()*- is not officially supported by all #aFor browsers yet.
$: (he ne;t warnin6 @No character encodin declared at docu#ent level@6 this is because we
havenCt declared our character encodin within the H()* structure.
%: (he final warnin is tellin us that no #atter what our character encodin is set to within
our H()* docu#ent that we are validatin> it is oin to assu#e and treat is as ?(562. (he
loical way to overco#e this last warnin is to use the file upload tool> rather than the Direct
4nput.
Now> lets try and use the W%C validation tool to upload our H()* docu#ent> by selectin the
second tab on the W%C@s online H()* validation tool pae and uploadin our H()* docu#ent.
11
More &arnin)s
4f you notice we still have our @'sing (xperimental "eature) &!ML conformance checker@ warnin
Awhich is perfectly fine> as we are usin H()*- and it is not yet fully supported by all browsers:>
the other $ warnins are related to our character encodin and so is the 0rror we are now seein.
*ets fi; this> by declarin our Character Set. We will be usin the ?(562 Character encodin and
we can do this by addin so#e si#ple #ark6up to our head section.
We have Fust added our first H()* #eta taD
(his #eta ta lets the browser know that we are usin ?(562 character encodin.
%TF&' is the most commonly used character encoding, (asically it )rovides a standard *ormat
(encoding) *or text (code) that will assist against the )ro(lems o* endianness, which could result in
incorrect or invalid characters dis)laying. (htt)+,,en.wi-i)edia.org,wi-i,Endianness )
(as inside the head ele#ent of a H()* docu#ent are often used to tell the browser infor#ation
about the H()* docu#ent that we don@t need to output as part of our content> such as our H()*
title and character encodin.
Co##ents
4n every prora##in lanuae co##ents are widely used to help re#ind other developers what is
happenin in the code> to #ake note of e;tra code that will be added to the web application at a later
date and notes to others who #ay be workin on the sa#e proFect.
4n H()*> co##ents are easily added to the docu#ent> by addin the openin co##ent ta!
and our closin co##ent ta!
8nythin placed inside the co##ent ta will be inored by our browser.
1$
!-a#$"e of Co##ents:
HTML5 Structure re*isited
*ets o throuh our H()* docu#ent and talk about the structure step6by6step> usin co##ents.
!-ercise three 3PA4T A5:
1. (ype the above code into a new file.
$. Save the file with an .ht#l e;tension Ai.e. te#plate.ht#l:.
%. Open the ht#l file with your 9rowser.
+. What do you see,
Nothin has been output by the 9rowser> as we have used co##ents to e;plain the structure and
have not yet added any Greal* content.
1%
'ns$ectin) (ith 2ire6bu)
!-ercise three 3PA4T B5:
1. Open up the 5ire6bu 5irefo; add6on. Hou can do this by riht clickin on the 5irefo;
9rowser window and selectin G4nspect 0le#ent with 5ire 9uI
$. Notice how we can see e;actly what we typed into out H()* docu#ent on the left6hand
side of the 5ire6bu window,
So ho( can (e te"" the bro(ser to out$ut so#e data+
4t@s actually 'uite si#ple. 9ut before we add any content to the docu#ent> let@s talk about the title
ta. (he title ta allows us to specify the na#e of the websiteE #ore specifically> the web pae 4t is
ood practice to be an relevant as you can when ivin your web pae a title.
8s you can see in the previous e;a#ples> the title ta is i#ple#ented into the head section of the
H()* docu#ent> like so!
Now> if we load up this H()* docu#ent in our 9rowser now> we donCt see any chanes to the
above e;a#ples. 9ut> have a look at the top of your browser window or current tab6 this is where
the (itle of your H()* docu#ent is shown.
Addin) Content
We can add so#e standard te;t in6between our body tas and we will start to see so#e output fro#
the browser> like so!
!-ercise four:
1. (ype the above code into a new file with your te;t editor.
$. Save the file with an .ht#l e;tension Ai.e. helloJworld.ht#l:
%. Open the ht#l file with your 9rowser and see what the browser is renderin.
+. &e#ove the GHello WorldI te;t and replace it with a sentence about your favourite season
and start to et co#fortable with codin in H()*.
-. )ake sure you view your ht#l docu#ent in your browser and validate it.
1+
HTML .otes:
.ll versions o* HTML re/uire the (asic HTML structure, (ut the version o* HTML
de)ict a vast di**erence in the re/uired elements and doc ty)e declarations. HTML0.1#,
2HTML and HTML3.
Notice how every ta is closed in order of which they were opened, (his is a very i#portant
ele#ent to valid H()*.
HTML3 is not currently su))orted (y all ma4or (rowsers, (ut )rovides )lenty o* extra
*eatures *or us to wor- with and stay ahead o* the curve. .lthough HTML3 is not
su))orted (y all ma4or (rowsers, $oogle"s !hrome, 5)era and FireFox are currently the
most use*ul tools *or Modern We( 6evelo)ment.
7* you are not seeing this 87ns)ect Element with Fire&(ug8 o)tion in the dro)&down menu,
when you right "clic-" on your (rowsers main area& Ta-e a loo- at this hel)*ul
documentation at mo9illa:ine.
1-
Part : HTML !"e#ents
The Para)ra$h ta)
4n H()*> the pararaph ta is part of the block level ele#ents roup.
9lock level ele#ents will enerally start on a new line> and any )ark6up under or after the block
level ele#ent will also start on a new line.
Here is an e;a#ple of a pararaph ta in H()*> followed by so#e te;t after the endin pararaph
ta. 0ven thouh all of the te;t is on one line> the pararaph ta Ablock level ele#ent: will place the
te;t after the closin pararaph ta on a new line.
+utput,
/ther B"oc7 Le*e" !"e#ents
(here are a variety of other block level ele#ents available in H()*E includin Headins> loical
Aor docu#ent: divisions> hori<ontal rules> ordered lists and unordered lists.
So> lets check out so#e of these block level ele#ents in action.
1/
+utput,
11
!-ercise fi*e:
1. (ake note of the code above.
$. (ype out the code into a new ht#l docu#ent.
%. Chane the content of the code to be about your favourite dessert.
+. 8dd an e;tra ordered list Acontainin 1 list ite#s: and a loical division Acontainin a
pararaph ele#ent: to the end of the pae.
-. Save the ht#l docu#ent as GblockJlevelJele#ents.ht#lI.
/. Open the docu#ent with your browser and #ake sure it appears as intended.
;. %)load the html document to the online validator and correct any warnings using the
s-ills you have learned thus *ar.
Line Brea7s *s. Para)ra$hs
(he break ele#ent or ta in H()* Aas you can uess: provides a break Aor new line:. So#e people
#ay like to @over6use@ this ele#ent> but 4 suest usin the pararaph ele#ent when dealin with
te;t Awhere possible:> to provide for#attin and appropriate spacin.
(xample,
-ote, !he line break tag is also something called a self closing tag. A self closing tag does not have
an additional .closing. tag appended to it.s content.
We could do the sa#e thin with the pararaph ta> but with a better for#at.
(xample,
12
!-ercise si-:
1. (ype out the above code into a new ht#l docu#ent.
$. 8dd so#e additional break and pararaph tas> containin te;t to the end of the pae.
%. Save the file with as Gbreak.ht#lI.
+. Open the ht#l file with your 9rowser and take note of how each ta perfor#s almost the
sa#e task.
'n"ine !"e#ents
Now we have an understandin of what block level ele#ents are> its ti#e to #ove on to so#e inline
ele#ents.
Te-t Modifiers6 /ntroducing the strong and em tags.
8s you #ay have uessed> the stron ta will render te;t as stron).
(he e# ta is a little harder to uess... (he e# ta renders te;t as /talic and is used to .emphasi0e.
te;t. (he Stron) and em tas are both part of the (e;t )odifiers roup.
(xample,
(e;t #odifiers can be a si#ple way to #ake certain te;t stand out or add character to a docu#ent.
Kust like this8
13
'#a)es
4#aes are an i#portant part of any for# of content> especially websites. 8s a web developer> you
will find it very helpful and necessary to be able to i#ple#ent i#aes onto a web pae
(he i#ae ta can be used as follows!
-ote, !he image tag is another self closing tag.
We would then put the ?&* for our i#ae inside the src Asource: attribute. (he ?&* could be
relative or absolute.
&ere is an example of using the src attribute with the img tag,
When Workin in a *ive or Develop#ent environ#ent it is ood Practice to use relative file Paths>
rather than absolute or full file Paths.
8 relative file Path can be defined as bein a localised linkE usin the current directory
Structure as a #eans of naviation between files.
8n absolute file Path is a direct link or ?&* to a file.
4f we had an i#ae titled @loo. pn@ in the Sa#e folder or directory as our Current ht#l file> we
Could Si#ply link to that file Fust by usin the files na#e!
4f our i#ae or file was in a directory titled Bi#aesB inside our Current folder or directory we
would then link to (he 4#ae usin
$7
So#e ti#es we need to naviate downwards Aas opposed to upwards: in our directory Structure. 4f
our directory Structure looked So#ethin like!
"ho#e"ht#l"Public"Current"
and our Current ht#l docu#ent is in Our BcurrentB folder> we could link to our 4#ae Awhich Could
be located at "ho#e"ht#l"Public"4#aes": by usin!
..1images1 basically tells the browser to naviate one directory down and then into our 4#aes
directory.
A"ternate Te-t
When an i#ae is unable to be displayed by a browser we need a fall6back #ethod. So the alt
Aalternate te;t: can be used as our fall6back #ethodE #eanin we will have so#e descriptive te;t to
display if the i#ae itself is unable to be displayed for any reason.
8n e;a#ple of an i#ae not displayin could be a H()* e#ail AL#ail will> by default hide any
i#aes and ask the user if they want to show i#aes: or the results in a search enine. Search
0nines cannot GreadI i#aes> so they can only render GalternateI te;t in Search 0nine &esult
Paes AS0&Ps:.
4t is ood to be descriptive and short with the alt attribute> like so!
$1
,is$"a9in) an '#a)e
So lets try out our i#ae ta with a real i#aeD
+utput,
&mmm.. / feel as though it would be a better idea to have the image a little smaller, wouldn2t you
agree3
S$ecif9in) the Si:e of an '#a)e
We can specify both heiht and with attributes inside our i#ae ta like so!
-ote, !he height and width values are in px 4pixels5.
So> lets try out this i#ae with the heiht and width attributes specified.
$$
/ am going to guess... /t looks a little more appropriate now#
!-ercise se*en:
1. Create a new H()* docu#ent.
$. ?sin the skills you have learned so far> add an i#ae Ayour choice: with a width and
heiht of your choosin.
%. Once you are able to render or output an i#ae within your ht#l docu#ent> o ahead and
create a docu#ent structure.
+. Open the ht#l file with your 9rowser and take note of how each ta perfor#s almost the
sa#e task.
Anchor Ta)s; H9$er"in7s
Now> lets #ove on to the ever6so i#portant hyper links or anchor tas.
We use an anchor tas like so!
(he above code will render as!
*et@s try a si#ple link to oole!
$%
(he above e;a#ple will render!
(ype out the above code and (ry it out> notice that the browser will now load LooleCs ho#epae
when you click on the link.
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 4so they don.t leave our interesting website53
(he above e;a#ple will render!
!ype out the above code and !ry it out, notice that the browser will now load 6oogle2s homepage in
a new window when you click on the link.
(he #ost i#portant attribute for the anchor ta is the href attribute. (he href AHyperte;t 4eference:
attribute will tell the anchor ta where to link to> or where to send the user once clicked on.
(his e;a#ple is slihtly different to the previous e;a#ples!
!-ercise ei)ht:
1. (ype out the above e;a#ple code into a new ht#l docu#ent and save it as anchorsM.ht#l.
$. Open your anchorsM.ht#l docu#ent in your browser and click on the link you have
created.
%. Notice how the link takes you nowhere. (his is because we donCt have a ?&* or valid
link for our href attribute.
$+
Lin7in) inside a HTML docu#ent
9asically> the @M@ sy#bol can also act as a pae anchor> when nothin is assined to the @M@ in the href
attribute of an anchor ta6 when the user clicks on it> as the link does not have a specific location6 it
will enerally o nowhere.
Now> we can assin id attributes to so#e of our ele#ents> to use our anchor tas to link to specific
parts in our H()*> rather than Fust havin the @M@ sy#bol> we would use!
4 have added a loical or docu#ent division at the start of the above e;a#ple with an id of top.
4ds are a very useful feature of H()*> but for now we are Fust oin to use it for an anchor link
Aso#ethin to link to:. We could assin our div with any id value> as lon as we reference it in our
href attribute of our anchor ta.
!ry it +ut#
When you click on the te;t @Lo to (op of Pae,@> you will o to the top of the pae Aprovided that
there is enouh te;t to actually cover the heiht of the pae:.
!he above code is 7ust a sample of how we would use anchors to link within our document.
$-
!#ai" Lin7s
4n H()* we can create a #atilto! link> when the user clicks on this link their e#ail client will open
and the #ailto! value Aour e#ail address: will be added to the (O! field.
(his #akes it easy and enticin for a user to 'uickly send us so#e e#ail> reardin our web pae.
Hou #ay have noticed that 4 have added @,SubFectN0#ail@> this will add G0#ailI to the subFect field
within the e#ail. Hou can chane the #ailto and SubFect values to suit your needs.
,irectories
Hou will often be usin a folder structure. (he folder structure is a crucial part of ood codin
practice and helps to tidy up our files A an i#aes folder and a ht#l folder:.
8 basic ht#l folder structure would look si#ilar to this!
5or the purpose of this e9ook> we are oin to assu#e we have one i#ae in our Gi#aesI
directory titled Gbird.FpI
-ote, When working with folder in Web Development, we refer to folders as directories.
8s you can see we have a few ht#l files in different locations. We have our inde;.ht#l file> whichE
when workin in a server environ#ent will auto#atically load once we naviate or load the specific
folder that inde;.ht#l resides in. 8s we are not workin in a server environ#ent this is not re'uired
knowlede at this point in ti#e.
We have an about.ht#l and a contact.ht#l file in our Ght#lI directory. (he content of these two files
are irrelevant at this point in ti#e. (he purpose of the followin e;ercise is to #ake sure you have a
rasp of @naviatin the directory structure@.
(xample of linking to the about.html page from index.html
$/
!-ercise nine:
1. Create three new ht#l docu#ents na#edE about.ht#l> contact.ht#l and inde;.
$. Create the sa#e directory structure as above and place your new ht#l files in the
appropriate directories.
%. Live each ht#l file an appropriate title ta and a level 1 headin Ah1:.
+. 8dd a pararaph of appropriate te;t to each of our ht#l paes and a #ailto! link to the
contact pae.
-. Now that we have so#e te;t and a headin for each ht#l docu#ent> we need to link to
and render or output our bird.Fp file Ayou can use any i#ae you would like: on each pae.
/. ?sin you skills> you can add the bird.Fp i#ae under the pararaph ta to each ht#l
docu#ent and a link to each other ht#l docu#ent in the directory structure under the i#ae.
Hou can link to a local file> al#ost the sa#e way we do with an i#aeE instead of usin the
src attribute Afor the i#ae ta:> we would use the href attribute of the anchor ta.
1. (est out your ht#l docu#ents by savin the# with the sa#e na#es as the detailed above.
)ake sure the i#aes in your ht#l docu#ents are appearin in the browser and when you
click the links under the i#aes> you are taken to the respective ht#l docu#ent Ai.e. a link to
about.ht#l should take you to the about.ht#l pae when you click on the link: in your
browser.
2. Now that you have co#pleted your % ht#l paes> o ahead and validate the# with the
online validator and fi; any errors that appear.
$1
'n"ine !"e#ents in Action
*et@s check out these inline ele#ents in action.
+utput,
Notice how the contents of the stron> e#> anchor and i#ae tas are bein displayed on the sa#e
line> rather than bein displayed on separate lines6 like the block level ele#ents.
'n"ine < B"oc7 !"e#ents in Action
o, lets try some block level and inline elements together.
$2
+utput,
Tab"es
So#eti#es when we have so#e infor#ation to display on our web pae> it #akes sense to display
that infor#ation or data in a table. (ables in H()* are relatively si#ple. We have the Openin
(able (a and (he closin (able ta. 4nside of our (able ele#ent> we have table rows. 4nside the
table rows we have table data or cells. 9ut> for our table headers> we will be usin the table header
tas inside our table row.
$3
2or#s
One of the #any thins you #ay have noticed on a web pae is a contact for# for e;a#ple. We can
create a for# in H()* by usin the for# openin and closin tas. 4nside of our 5or# ele#ent we
have inputs and a sub#it button. Our inputs will be of type te;t and our sub#it button will actually
be an input of type sub#it. When we work with H()* for#s in the real world> the are two
attributes that we need to add to our openin for# ta.
Method and Action:
(he scope of this course will not be coverin server6side processin of H()* data> but it is helpful
to know what these attributes do.
5or the action attribute> you will enter in the destination of the 5or# data. (he #ethod will take
either a POS( or L0( value. POS( an L0( are used with server6side processin.
!ype out the following code and enter and select some values from the form and click the submit
button. !ake a look in your '8L Address bar9 this is called a :uery string) the part following the .3..
%7
!-ercise Ten:
1. Create a new .ht#l file titled tables6for#s.ht#l.
$. 8dd a table A%;1: and type in your % favourite bands and seven of their best sons> to fill out
the table. 9y doin this si#ple e;ercise> you will learn how to create a H()* table of any
si<e.
%. ?nder the new table that you have createdE add a for#.
+. (his for# will have + radio inputs> % Check bo;es> 1 te;t and 1 password input field.
-. 8ppropriately na#e each input and test that you have done so correctly by enterin in te;t"
#akin selections and sub#ittin the for# Aclickin @sub#it@:. Pay close attention to the
'uery strin that has for#ed in your ?&* address bar.
$ou should be able to select one radio selection from group .radio;. and one from group .radio<..
$ou also should be able to select both check boxes.
-ote, you can only select one radio button at a time from a group, but you can select multiple check
boxes at the same time from the same group.
%1
PA4T 3: Main HTML5 S$ecific !"e#ents
So far we have only really learned about eneral H()* tas Aapart fro# the stron and e# tas:
and ele#ents> now it@s ti#e to et into so#e H()*- specific ele#ents. 8s you #ay notice when
you start to work with H()* and build so#e of your own web paes> it would be really helpful if
there was a loical way to define the header and footer of our web pae With H()*-> we can Fust
that with the header and footer tas!
Header < 2ooter:
8lon with these new header and footer ele#ents> there is also a few #ore i#portant ele#ents that
have been introduced with H()*-.
.a*:
We can now define a naviational ele#ent with the nav ta!
8s you can tell> we would use this ele#ent to hold our @naviational@ content> such as links.
Section:
We can now define a section of our H()* docu#ent> rather than usin standard loical divisions
Adiv@s:.
Artic"e:
We can now define an @article@ within our H()* docu#ent. Within a section> we could have several
articles in our docu#ent!
%$
Aside:
We can now define an @aside@> a part of our H()* content> that is @aside@ fro# our article@s content>
but is still related to our article!
Pro)ress Bars; The Meter Ta):
One of the really cool thins with H()*- is the ability to add proress bars or #eters. We define
the proress bars with the #eter ta.
(he H()*- #eter ta will take a few attributes> #in> #a; and value.
(he )in and )a; values will define a rane in which our value will be co#pared. 5or e;a#ple>
with a #in of 7 and a #a; of 177> a value of -7 will show a proress bar that is -7O co#plete!
(he te;t that 4 have entered in between the openin and closin #eter ta is fall6back te;t. (his fall6
back te;t will be rendered in older browsers that do not yet support the #eter ta.
%%
The ne( HTML5 !"e#ents in Action:
5or further reference> you can find the H()*- spec here! http://www.w3.org/html/wg/drafts/html/master/
!-ercise !"e*en:
1. ?sin only the new H()*- tas> create a .alid H()*- docu#ent with so#e content.
$. .alidate this H()*- specific docu#ent with the online validator and fi; any errors.
%+
Part %: The Basics of CSS
,efinition of CSS
CSS stands for Cascadin Style Sheets and provides H()* with layout and desin. 8lon with
#akin thins pretty and aesthetically pleasin> CSS also provides a eneral structure to H()*.
So#e of the #ost i#portant CSS properties Ain #y opinion: are Ain no order:!
color 6 specifyin te;t color.
font6fa#ily 6 specifyin font type.
font6si<e 6 specifyin font si<e.
te;t6decoration 6 specifyin te;t decorations> such as underline.
font6style 6 specifyin font stylin> such as italics.
font6weiht 6 specifyin font weiht> such as bold.
width 6 specifyin the width of an ele#ent.
heiht 6 specifyin the heiht of an ele#ent.
backround 6 specifyin the backround.
border 6 specifyin a border.
te;t6shadow 6 specifyin a shadow for our te;t.
float 6 specifyin the float of an ele#ent> such as left or riht.
position 6 specifyin the position of an ele#ent> such as absolute or relative.
<6inde; 6 specifyin the <6inde; of an ele#ent> such as 333E which would put that styled
ele#ent @on6top@ of all other ele#ents that either have a neative <6inde; specified or no
<6inde; specified.
paddin 6 specifyin paddin inside an ele#ent> such as paddin around te;t.
#arin 6 specifyin the #arin between ele#ents.
= can be implemented in three different ways to &!ML,
1. 4nline
$. 4nternal
%. 0;ternal
%-
=sin) 'n"ine CSS
So> lets use so#e inline CSS to chane a few thins in our H()* structure.
+utput,
Co"or:
8s you have probably noticed> we have used the 0nlish word we want to use. 9ut there are another
two ways we can define colors in CSSE (he rb color values and so#ethin called He;adeci#al.
8ll three types of definin colors in CSS are acceptable> you can read #ore about colors in CSS
here! http!""www.w%schools.co#"cssref"cssJcolors.asp
$ou will notice that we are using a mixture of the three different ways to define colors in =.
%/
=sin) CSS in The Head
8s you can see> our inline CSS is very effective> but perhaps not very efficient nor productive.
inline CSS is ood for addin sliht chanes or specifyin colors for different te;t ele#ents> but it
starts to et a little @wordy@ and #essy.
When we add CSS to HTML either; externally or in the head section, we can use selectors.
<electors allow us to "select" or ")oint" to a s)eci*ic element o* our HTML. !<< can use HTML
elements as selectors, such as the )aragra)h, anchor, em and strong tags (y sim)ly using ), a, em
and strong. 7* we re*erred to these elements as selectors in our !<< we would (e styling every
)aragra)h, anchor, em and strong element in our HTML.
Lets try the same thing, but this time adding our = to the head section of our &!ML document
and using selectors.
%1
=sin) ids in CSS
8s you #ay have uessed> we are usin a class to identify our botto# e# ta. (he dot notation
before the class na#e allows us to select or taret an ele#ent in our H()* by it@s class na#e.
We can use id.s like so,
8ll we have to do is chane @class@ to @id@ for the ele#ent we are referrin to> and chane the @.@ in
front of our CSS selector Ain the head ele#ent: to the @M@ sy#bol.
(he M sy#bol Awhen not used as href attribute: is enerally used to sinify an id within the H()*.
(he #aFor different between usin classes and id@s isE classes can be re6used ti#e and ti#e aain in
the sa#e H()* docu#ent> whereas id@s can only be used once in a sinle H()* docu#ent. Hou
can think of a class as a roup or #ultiple ite#s> and an id as a sinle identification.
(he output of the above code is the sa#e Awe have also set a font6si<e for the Mbotto# e# ta: as
the output for the previous code e;a#ple> we are ettin the sa#e results as we are basically tellin
the H()* or browser the sa#e thin> Fust in different ways.
%2
8s you can see> our code is all cleaned up and #uch easier to read and locate specific sections of
our H()*. Hou #ay have noticed for the last e# ta Abotto# line:> 4 have added a class.
When you use a selector in CSS> it auto#atically refers to and applies the specified styles to all
specified ele#ents in the H()*. (here are several ways to #ake these selectors @uni'ue@ or point to
only @so#e@ parts of H()* that contain the sa#e ele#ent or selector.
8 class is an effective way of referencin a specific part of our H()* code> we are basically pin6
pointin the section of our code that contains the class we have created in our style and applyin
that stylin to the section that is included in the section of code with the class i#ple#ented. We can
refer to classes with a @.@ at the start of the class na#e in our CSS and we can add a class to Fust
about any H()* ele#ent to effectively add stylin to our H()*.
-ote, When usin em in CSS it!s slihtly different to the em ta in HTML. In HTML the em ta renders
italic text, or to "e more #recise, text with !em#hasis!. In CSS the em $alue can "e used as a unit of
measurement. % font si&e with a $alue reater than 'em will enerate text larer than the default for that
we" #ae or (ser %ent, "ut does not render text as italic.
/ds must be uni:ue, we can only use the same id only once in our &!ML page.
With classes, we can .reuse. the class several times in our &!ML page.
Creatin) !-terna" CSS
(o add an e;ternal CSS to our H()*> we need to tell the H()* all about it6 what relation it has to
our H()*> the type of file it is and its location and na#e. &e#e#ber the #eta tas fro# before,
Well this is i#ple#ented in the sa#e way Aco#pletely different concepts:> by addin a line of code
into our head section of our H()* docu#ent. We use a rel value to tell H()* what the CSS file@s
relation is to the H()*> a type value to tell the H()* the type of file it is and a href value tellin
the H()* where the file is located and its na#e.
-ote, = files have a file extension of .=
We can add an e;ternal style sheet to our H()* by usin link ta.
So> lets create a s#all CSS file> to use e;ternally.
Lo ahead and save the above stylin into a new CSS file> titled style.css.
%3
Lin7in) to !-terna" CSS
4f our style sheet ACSS: was located in the sa#e directory Aor folder: as our H()* file> we would
add the ta to the head section of the H()* docu#ent> like so!
Kust as our CSS e;a#ples@ before> no #atter of its location Ainline> internal and e;ternal:> the CSS
will tell the browser to render the styles for our H()* in the sa#e way.
'nefficient Se"ectors
*ets have a look at so#e inefficient CSS selectors with so#e e;ternal CSS!
(he advantaes of usin e;ternal CSS is the ability to co#pletely separate the H()* fro# the CSS>
to reduce file si<e and lenth> #ake thins #ore readable and use effective selectorsE #eanin
+7
selectors that taret #ultiple ele#ents when re'uired> rather than havin / lines of CSS basically
sayin the sa#e thin we could Foin the# toether to create a s#aller file si<e Awhen workin with
#assive style sheets: or si#ply be #ore efficient with our use of CSS and taret specific parts of
our H()*> rather than lare pieces that we will later override with even )O&0 CSS. (hat would
be a bad idea.
o, lets fix this up#
!fficient Se"ectors
!-ercise T(e"*e:
1. Create your H()*- docu#ent structure and create a file titled style.css
$. 8dd the new H()*- ele#ents and style the H()* accordinly!
$ a: 8rticles within a section will have a font6si<e of $ ti#es the default font6si<e.
$ b: (he 5ooter and Header will have a te;t6decoration of underline and a color of red.
$ c: (he aside will have a font6weiht of bolder and a color of blue.
HTML !"e#ent State
With our new CSS abilities> we are able to style a H()* ele#ent> based on it@s @state@. H()*
0le#ent state refers to the @state@ that the ele#ents is inE so#e of these include! Hover and 8ctive.
Hou #ay have noticed that when you hover over a link on a web pae> that the link will chane
color Aa#on other aspects:. We can do this with al#ost any H()* ele#ents.
4n the above e;a#ple we have styled all @hovered@ over articles and the anchor tas> when the article
is bein @hovered@ over with a backround of red and a te;t color of white.
+1
8lon with definin hover style> we can define active style. 8ctive is defined by an ele#ent that is
@actively@ bein clicked on> i.e. if you are clickin a button> that button@s state is now active.
/n the above example, an article that is .active. will have a background color of almost black.
!-ercise Thirteen:
1. (ry out these H()* 0le#ent States
$. 8dd so#e styles that will taret specific ele#ents and add style> based on their @state@.
%. )ake sure to #ake use of the rb and he;adeci#al color values.
The CSS Bo- Mode"
One of the funda#ental understandins of CSS is the 9o; )odel. (he 9o; #odel helps us to
understand the layout and desin of H()* and CSS.
!he = %ox model is made up of content, >adding, %orders and Margins.
+$
So... (hat is Paddin)> Mar)ins and Borders+
As you can see, padding is the space that surrounds our content, borders are what surround the
padding and margins are what surrounds the borders.
B9 definition:
6(he paddin is the area that separates the content fro# the border.
6(he border is the area that separates the paddin fro# the #arin.
6(he #arin is the area that separates the surroundin ele#ents fro# our @bo;@ or ele#ent.
Ho( do (e define these+
4n the above e;a#ple> we have set the paddin for the top and botto# of the ele#ent to -7p; and
%7p; respectively. (he #arin has been set to 7p; for the top and botto# and the left and riht
#arin is set to auto. When we set a value of auto in our #arins> it will basically @centre@ the
ele#ent within the containin or parent ele#ent.
As you may have noticed, we have also set our border. +ur border is ;px wide for each side, is solid
and has a color of black.
(he above code renders the followin output!
+%
-ote that the rendered output will be ;?<px in height 4top and bottom padding, plus the width of
our borders and the specified height of our element5 and ?@<px in width 4left and right padding,
plus the width of our borders and the specified width of our element5.
2onts
When usin CSS we can chane the font6fa#ily of our te;t. We can specify #ultiple font6fa#ilies
for any iven ele#ent. 4f the user has the first specified font on their syste#> that is the font that will
be rendered. 4f the user does not have our first specified font on their syste#> the browser will
atte#pt to render the ne;t font and so on until one of the fonts are located on the users syste#.
(hese font6fa#ilies are separated with a co##a and are referred to as fall6back fonts.
4n the above e;a#ple we are sayin that our header should have a font6fa#ily of Helvetica Neue> if
that is not located on the users syste#> we will try Helvetica. 4f Helvetica is not located on the user@s
syste#> we will @fall6back@ to a eneric sans6serif font.
$ou can find out more about sans)serif fonts here, http,11en.wikipedia.org1wiki1ans)serif.
++
Part %: Main CSS3.0 S$ecific Pro$erties
/$acit9
4n CSS%.7 we can easily specify an opacity for an ele#ent!
4n the above code we are sayin that every article within a section should have an opacity of -7O.
(his is will #ake all of our articles within a section appear transparent. When we set the opacity of
an ele#ent> we are also settin the opacity of the contents@ opacity as well and this can have
undesired effects.
A"$ha Co"or S$ace
4nstead of usin the opacity property in CSS> we can set an 8lpha Color Space. We can do this by
specifyin the color or backround6color of an ele#ent usin the rb color values.
Now> to specify the 8lpha Color Space> we si#ply add an e;tra value to our rb color valuesE what 4
#ean by that is we chane rb to rba and have four values for the colors> instead of the usual three.
(he 8lpha Color Space value will take a value of between 7 and 1.
!he Alpha =olor pace will specify the opacity of that element.
+-
4n the above e;a#ple we have set all of our articles within a section to have a backround6color of
red. When these articles are hovered over> we are settin usin the sa#e color> but with a 8lpha
Color Space value of 7.-. 4n other words> when we hover over our article ele#ents we will have a
backround6color that will be slihtly transparent.
4n the above e;a#ple you #ay have noticed the border6radius and bo;6shadow properties.
We can specify a bo;6shadow for #ost of our H()* ele#ents and this will literally ive our @bo;@
Aor ele#ent: a bo;6shadowE ivin the ele#ent a %D like appearance. (he bo;6shadow property will
take % para#etersE the h6shadow value> the v6shadow value> the blur6distance and the color of the
bo;6shadow.
(he border6radius property will set a @border radius@ for each of out ele#ents cornersE resultin in
rounded corners.
+/
!his will be the resulting output when we hover over our element.
8s you can see we have rounded corners Aborder6radius:> a bo;6shadow and we have an al#ost pink
backround6color. (he backround6color is set to red> but when we hover over it> we are settin the
backround6color to be -7O transparent or opa'ue.
!o learn more about =A.B, check out the =A.B 8oadmap, http,11www.wA.org1!81<BB;1WD)
cssA)roadmap)<BB;B?<A1
+1
!his concludes the e%ook) CA Guide to HTML5 and CSS3.0*, but this is 7ust the start of your
7ourney as a web developer#
Ashley Menhennett
Email: ashley=glori*ied.me
Website: htt)+,,glori*ied.me
%ird /mage was obtained from http,11pixabay.com1en1bird)bird)of)prey)raptor)@<@D@1