Section Styling - Gerry Kruyer`s courses

Transcription

Updated: 14 May 2015
Level 1 HTML5 / CSS 3
Written by Gerry Kruyer
http://www.gerrykruyer.com
Teach Yourself HTML5 & CSS 3: Task 7 – Independent Classes and In-line Styling
Firstly this week we will finish off the work that we did not get to last week on the topic: “Styling Particular
Sections”. After this we will be looking at defining classes for dissimilar tags and then finally we will look at “inline” styling.
Before we start this task properly:
 Open up your folder from the SPAN student drive.
 Make a copy of task6-yi.html
recall that yi is replaced with your initials.
 Rename the copy as task7-yi.html
 Open task7-yi.html in Notepad++ to re-familiarise yourself with the work covered last week. While you are
looking at the code make sure you are familiar with what each HTML tag and CSS attribute/value pair does.
 Also open task7-yi.html in a browser to re-familiarise yourself with your webpage.
Section Styling: Part II
Last week we looked at using <span> … </span> to style groups of words. We will now look at how to go about
styling groups of paragraphs using <div> … </div>.
As an example of how the <div> tag is used you will style the background colour of each poem (but not the
headings) in a teal background colour:
 Place a <div> … </div> tag at the very start and very end of both poems but not including the heading tags or
the analysis/commentary sections as shown below.
Note: I have used the Tab key and a Notepad++ feature called block editing to set the code out neatly
making it easier to follow.
To insert a tab at the start of every line of a block of text in Notepad++:
1. Highlight the text block;
2. Press the Tab key on your keyboard.
(You could insert any keyboard character using this block editing method.)
C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-1\tasks\task7\TYHTML7.docx
Page 1
<body>
<h1>Poems by Emily Dickinson</h1>
<h2>Love, Poem 18: Apotheosis</h2>
<div>
<p><span>Come</span> slowly, Eden!<br>
lips unused to thee,<br>
Bashful, sip thy jasmines,<br>
As the fainting bee,</p>
<p><span>Reaching</span> late his flower,<br>
Round her chamber hums,<br>
Counts his nectars --enters,<br>
And is lost in balms!</p>
</div>
<p class = "review">Analysis of <mark>Come Slowly, Eden!</mark>:<blockquote cite =
"https://sites.google.com/site/emilydickinson101/analyze-10-poems">In the first stanza, “Eden” could
be understood as paradise, a place, and a beloved person. Sometimes, people would refer to someone as
the place from where they came from. For example, she sometimes referred to herself as Amherst,
because that is where she was born. Emily Dickinson also uses dashes and random capitalization in
Come Slowly-Eden. In the poem, she uses a metaphor and devotes a lot of the poem to the image of a
bee.</blockquote></p>
<h2>Love, Poem 15: Resurrection</h2>
<div>
<p><span>'T</span> was a long parting, but the time<br>
For interview had come;<br>
Before the judgment-seat of God,<br>
The last and second time</p>
<p><span>These</span> fleshless lovers met,<br>
A heaven in a gaze,<br>
A heaven of heavens, the privilege<br>
Of one another's eyes.</p>
<p><span>No</span> lifetime set on them,<br>
Apparelled as the new<br>
Unborn, except they had beheld,<br>
Born everlasting now.</p>
<p><span>Was</span> bridal e'er like this?<br>
A paradise, the host,<br>
And cherubim and seraphim<br>
The most familiar guest.</p>
</div>
<p class = "review">Analysis of <mark>Love, Poem 15: Resurrection</mark>:<blockquote>This
seems to be a poem about the moments after death where you meet your maker.</blockquote></p>
</body>
</html>
Page 2
 Save your additions.
 Refresh your webpage using a browser. You will not see any browser changes for task7-yi.html because you
have not styled the <div> tags yet.
 Now add the following styling to the bottom of your CSS section of code. You may have to alter your image
file name.
div
{
background: rgba(0, 255, 0, 0.2) url(images/back4b.png) repeat-y 30%;
/* The background will be 80% transparent green */
}
 Save your addition.
 Refresh your webpage using a browser and you will see a change to all of the stanzas section in each poem
because you have styled the <div> tags enclosing each poem. Now each poem should have a green transparent
background as well as your tiny background image repeated 30% out from the left of the browser window
going vertically down each poem but not in the headings or analysis sections as shown below:
Question 1/
Why should all webpage images including background images have small file sizes?
Page 3
Practice What You Have Learnt
 Place a <div> … </div> around the entire web page just inside the <body> … </body> tags
 Give the <div> tag a class name of container.
 Now use CSS code on the <div> tag to give the entire webpage a margin of 4% of the browser window space.
 Save the additions.
 View your webpage in a browser. It should look like the one shown below:
This border effect is often used by website developers to add space between the content of each page and the edges
of the browser window. Generally you would not add this large amount of space because it is taking up too much
of the window real-estate – perhaps 1% would have been a better margin size.
Question 2/
If you look closely at my diagram above you can see that my vertical pink squiggle has doubled
up in two spots. Why has this happened?
Page 4
HTML Tag Layout
A common cause of problems for beginner webpage coders is that
they do not place their HTML tags in their correct order. Opening
and closing tags must be correctly nested like Russian Babushka
dolls where each doll fits inside the next sized doll up. This means
that if a certain tag sits on the outside at the start of a group of tags
then its closing tag should also appear on the outside at the end of the
group of closing tags.
If you do not nest your tags properly then your CSS styling will produce unexpected results.
E.g.: <p><span> la la la </span></p>
<p><span> la la la </p></span>
Question 3/
is set out correctly.
(Lines drawn underneath can connect opening and closing
corresponding tags without crossing and so the setup is correctly
nested.)
is not set out correctly. (The lines underneath cross.)
Which of the following two sections of code is correctly set out and why?
<body>
<p><div>la la la</p></div>
</body>
or
<body>
<p><div>la la la</div></p>
</body>
Independent Classes
Last week you found out how to use CSS classes on a tag. For example the code in task7-yi.html styles all of the
<p> tags that have the added class = "review" attribute i.e. <p class = "review"> are styled using the
following code in the style sheet section:
p.review
{
…
}
You can however style classes that do not depend on a particular tag. This type of CSS styling code uses what is
called an independent class. Independent classes can then be used with any tag with one proviso - the attribute
used must work with the tag that you use.
Page 5
To define an independent class type the following into your Style Sheet:
.classname
{
attributes/values for independent class;
}
E.g.
.large
{
font: normal bold 30pt/50pt Arial, sans-serif;
}
You can now use this independent class with any type of tag you like so long as it is appropriate to that tag.
 Add the following to the end of your CSS code:
.bright
{
color: yellow;
font-weight: bold;
}
To demonstrate the use of independent classes you will use the .bright class to highlight one of your headings, one
of your paragraphs and a single word:
 Apply the independent class to one of your <h2> tags.
i.e.
<h2 class = "bright">
 Refresh and view your webpage in a browser. One of your <h2> headings should be bold and yellow.
 Apply the independent class to one of your <p> tags in both poems.
 Refresh and view your webpage in a browser. One stanza from each poem should be bold and yellow.
 Apply the independent class to one of your <span> tags in only one stanza of only one of your poems.
 Refresh and view your webpage in a browser. One stanza from one poem should be bold, yellow and the first
word should be slightly bigger than the rest because it is also taking on your CSS styling for the span tag that
came before it in your CSS code.
 Apply the independent class to a few words within one of your <blockquote> tags by using a
<span> … </span> around the words and applying your independent class to the <span> tag.
 Refresh and view your webpage in a browser. Your selected words in the <blockquote> should be bold and
yellow.
Page 6
I think that both you and I have had enough of making a mess of task7-yi.html. It looks like a dog’s breakfast. You
would never allow a webpage that was formatted like this to be published on the web as it would ruin your
reputation as a website designer!
Nested Styling
You can define the properties of one tag that is nested within the code of another tag by placing a space between
the tags as shown in the following example:
p span
{
color: brown;
}
This means that all text that is between <span> … </span> tags that are nested inside <p> … </p> tags will have
a brown text colour.
You need to be careful that you do not place a comma when you mean to use a space between the tags. If you did
use a comma then all of text in the paragraphs as well as all of the text in the span sections would have a brown text
colour.
You will try this on a completely new HTML5 webpage:
 From my website download the laguna-beach HTML/CSS code.
 Copy the code and paste it into a new Notepad++ document. The code is also shown below:
Page 7
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Laguna Beach</title>
<style type = "text/css">
h1, h3
{
color: lime;
font-family: Georgia, serif;
}
p, div
{
font: normal bold 14pt/20pt Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Laguna Beach</h1>
<br>
<p>I really like the TV reality show called Laguna Beach because it has really rings with my life.</p>
<h3>What I watched on Laguna Beach yesterday</h3>
<p>I saw Season 3 Episode 11 yesterday. It was titled The Three Day Rule and starts off like this:
<blockquote cite =
"http://www.mtv.com/shows/laguna_beach/season_3/episode.jhtml?episodeID=107786#moreinfo">Even
though they called it quits, the drama between Alex and Rocky is escalating. Rocky tells Tessa she's
agreed to go on a date with Nick W even though she's heartbroken over her breakup. Meanwhile, Tessa
vents about Derek's inability to talk about his feelings and says that she feels like the world is passing her
by. Alex tells his friend Stephen he's happy that he ended things with Rocky and confesses to flirting with
Lexie at the bonfire. When he finds out that Rachel and Lexie are going to the Open Air Stereo show,
Alex makes tentative plans to meet up with them. The girls agree to hang out but both think it's weird that
Alex is creeping on Lexie right after his break up.
<div>And Then</div>
At the beach, Derek admits that he isn't really into Tessa anymore and wants to move on. Later when
Tessa tells Chase and Raquel that she thinks Derek has been ignoring her, Chase consoles her by
explaining the three-day rule: a guy must ignore a girl for at least three days in order for it to mean he's not
interested; if it's any less than three days, he might just be tired or busy. Tessa takes little comfort in the
advice and says she may not be able to wait three days to find out.</blockquote></p>
</body>
</html>
Page 8
 Save the code in your space on the SPAN Level 1 Web Development folder naming it:
laguna-beach.html
(Remember to include the .html extension.)
 Have a look at laguna-beach.html using a browser. It contains two paragraphs, two headings: a <h1> and a
<h3> heading with a lime font colour and hopefully a Georgia type font (otherwise it will have a generic
serif font family font). The second paragraph contains a <blockquote> and inside this is a <div> section.
 Add <span> … </span> tags around Laguna Beach in the first paragraph.
 Add <span> … </span> tags around Rachel and Lexie which is inside the <blockquote> …
</blockquote> section.
 Add the following nested style sheet code to the bottom of your current CSS code:
span
{
color: orange;
}
 Refresh and view your webpage in a browser. All of your <span> … </span> tagged sections should have
orange coloured text.
 Now alter your CSS code that you just added above to the following:
blockquote span
{
color: orange;
}
 Refresh and view your webpage in a browser. Now only the <span> … </span> sections of text within the
<blockquote> … </blockquote> should be orange.
Question 4/
Explain what the following section of CSS code does:
p blockquote div
{
font-size: 18pt;
}
</style>
Question 5/
Explain what the following section of CSS code does:
p, blockquote, div
{
font-size: 18pt;
}
</style>
Page 9
In-Line Styling
In Teach Yourself HTML5 & CSS3: Week 2 - Basics Part 2 you read that there were three methods of applying
CSS to your HTML code:
 Internal style sheets
 External style sheets
 In-line styles
So far we have only looked at internal style sheets. You have found that it is easy to change the look of all similar
HTML tags in a webpage all at once.
But what if you want to change the appearance of just one occurrence of a particular HTML tag? You already
know that giving that tag an individual class name and then adding the extra CSS code for just this tag could do
this. There is however another way that you can do this using an in-line style.
To add an in-line CSS style to any individual HTML tag you include the style = "…" attribute inside the HTML
tag replacing the … with CSS attribute/value pairs you want. You still place a semicolon after each CSS
attribute/value pair.
What if you want to change the appearance of just the second paragraph using an in-line style so that the text is
purple with a Rockwell font and if the user’s browser does not have this then just use a serif generic font? No
problem! Just add it as an attribute inside that second <p> tag as shown below:
Page 10
<body>
<h1>Laguna Beach</h1>
<br>
<p>I really like the TV reality show called <span>Laguna Beach</span> because it has really rings with
my life.</p>
<h3>What I watched on Laguna Beach Yesterday</h3>
<p style = "color: purple; font-family: Rockwell, serif;">I saw Season 3 Episode 11 yesterday.
It was titled The Three Day Rule and starts off like this:</p>
<p><blockquote cite =
"http://www.mtv.com/shows/laguna_beach/season_3/episode.jhtml?episodeID=107786#moreinfo">Even
though they called it quits, the drama between Alex and Rocky is escalating. Rocky tells Tessa she's agreed
to go on a date with Nick W even though she's heartbroken over her breakup. Meanwhile, Tessa vents
about Derek's inability to talk about his feelings and says that she feels like the world is passing her by.
Alex tells his friend Stephen he's happy that he ended things with Rocky and confesses to flirting with
Lexie at the bonfire. When he finds out that <span>Rachel and Lexie</span> are going to the Open Air
Stereo show, Alex makes tentative plans to meet up with them. The girls agree to hang out but both think
it's weird that Alex is creeping on Lexie right after his break up.
<div>And Then</div>
At the beach, Derek admits that he isn't really into Tessa anymore and wants to move on. Later when Tessa
tells Chase and Raquel that she thinks Derek has been ignoring her, Chase consoles her by explaining the
three-day rule: a guy must ignore a girl for at least three days in order for it to mean he's not interested; if
it's any less than three days, he might just be tired or busy. Tessa takes little comfort in the advice and says
she may not be able to wait three days to find out.</blockquote></p>
</body>
</html>
Note: You may be wondering how to code a font like Gill Sans MT using an in-line style as this font has two
spaces in it and so you are supposed to use double-quotes around the font name. In-line styles already uses
double-quote marks so in that case, use single-quote marks around the font name. For example:
<span style = "font-family: Raavi, 'Gill Sans MT', Verdana, sans-serif;">Bla bla bla</span>
In this in-line style example, the user’s computer will display your page in Raavi font if it is installed.
If Raavi is not installed it will display your webpage in Gill Sans MT font.
If Raavi and Gill Sans MT are not installed it will display your page in Verdana font.
If none of the fonts named are installed it will use a sans-serif generic font family font and this will
probably be Arial.
 Make the changes to the second paragraph as shown above.
 Save your change.
 View laguna-beach.html using a browser.
Page 11
 Look closely at the output on your screen, in particular look at the styling of the first paragraph.
 Using an in-line style, alter the font size of only the first paragraph to 20 points.
 Save your change.
 Refresh and then
view
your
webpage in a
browser to make
sure your first
paragraph has a
larger font size.
It should look
like that shown
on the right:
Using in-line CSS attributes on individual tags is very useful because this method overrides the CSS code that you
have included in your <head> section (or in an external style sheet which we will look at in a later task.)
In laguna-beach.html the in-line CSS code for the first paragraph overrides the CSS code for paragraphs in the
<head> section and this is why it is styled differently to how it was styled previously.
 Back up everything that you have done in this class to your USB stick. You should do this at the end of every
class that you take here at SPAN so that you have a backup of your files and so that you can revise what you
have covered at home over the coming week.
 Have you backed up all of your work at the end of this lesson to your USB thumb drive including your
images folder?
 Have you been saving your work to the SPAN student drive every 10 minutes?
 Show your webpage to Mr Kruyer for assessment. Also hand in the answers to the questions next week.
Due Dates:
All questions from this task and task7-yi.html should be completed by next week’s
lesson.
Page 12

Section Styling - Gerry Kruyer`s courses

Transcription

Similar documents

Microsoft.Braindumps.70-480.v2014-04-14.by

PERPUSTAKAAN SULTAN ABDUL SAMAD CUSTOMER

CSS for Page Layout

Here - The Times

Resume - Designwave

The Longest Lasting, Most Durable Stainless Steel Outdoor Furnace

HTML Handout - Chajewski`s

Presentation - The Nest i/o

Designing CSS Layouts for the Flexible Web

Retailigence - Sizmek Ad Feature

Interacting with web pages

here - OldFramlinghamian.com

trophy bipe. - RCGroups.com