So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 41
Chapter 3 — Semantic HTML Tags
Exercises
Word Search
a
Free b b r h e a d e r g i t
e e a t b f e d f n l e a
eBook
s e m a s s l t i s r s m
i d s p e e i o e s s e a
n m e h h m c s w i t a r
a m c r c a e n m m r g k
v i t a s n s r m e o t e
f a i s m t a i f t n c t
s s o i a i m n s a g i r
Edition
c i n n l c s a f d e t f
k d r g l s r f e a d e h
a e a r t i c l e t o r l
a f o o t e r l s a o n a
abbr, article, aside, cite, dfn, emphasis, flow, footer,
Please support this work at
header, mark, metadata, nav, phrasing, section, semantics,
small, strong
http://syw2l.org
Problems
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 42
Chapter 4 — Anchors and URLs
Free
Chapter 4 — Anchors and URLs
One of the most powerful features of HTML is the ability to link documents together. In fact, this
linking of documents is what creates the interconnected web of knowledge, that we call the Web.
The links on a page are called anchors. Anchors have the address of the other resource as an
attribute, encoded as a Uniform Resource Locator (URL).
eBook
Learning Outcomes for this Chapter
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
• • explain the various parts of an URL,
differentiate between an absolute URL on a server and a relative path to a local item,
Edition
create a relative path URL to a local file in a sub-folder,
•
use the id attribute to place a unique identifier on a HTML tag,
•
create an anchor, with text, that will take the user to a page on a remote server, a relative
•
create an anchor to a PDF or other non HTML file.
• page, or to a specific tag on the current page,
Please support this work at
URL
If you recall from Chapter 1, the original purpose of an HTML document was to link resources,
http://syw2l.org
which we can achieve by using Uniform Resource Locators (URL or URLs). URLs are
71 72
actually a subset of URIs (Uniform Resource Identifiers). A URL can can be used to point to
web-pages, text, pictures, and media. You have most likely used thousands of URLs during your
Free
time on the Web, all the buttons and links that takes you from one webpage to another. Though
all URLs serve the same function, they can be categorized into the Absolute and Relative
categories, which are based on the location of resources that they retrieve.
Absolute URL
An Absolute URL is an identifier that usually makes links between resources on other web
eBook
73
servers or websites. You can think of these URLs as long distance phone calls that connect with
faraway places. Writing external links to other sites is simple as long as you know the direct
extension to where you are trying to reach.
An external URL is written as http://server_name_or_number, and may be followed
by one or more /page_name, /resource, or /folder_name depending on the final
71 http://www.ietf.org/rfc/rfc3986.txt
72 http://en.wikipedia.org/wiki/Uniform_resource_locator Edition
73 https://url.spec.whatwg.org/#url-writing
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 43
Chapter 4 — Anchors and URLs
destinstion. Here are some examples of external links:
Free
http://www.yahoo.com — A link to the www server at Yahoo
•
http://www.cnn.com/WORLD/ — A link to CNN's World News folder
•
http://openclipart.org/assets/images/images/openclipart-
•
banner.png — a link to the banner picture in a sub-sub-folder at OpenClipart. Note
eBook
the hierarchy of the folders in the link. The picture openclipart-banner.png is within the
folder images, which is within another folder titled images, which is within the folder
assets. All folders must be listed to properly target a URL.
URLs can become quite complex, including server port numbers, server names, folders, pages,
query strings, and even anchors within a single page. Many of these uses are beyond the scope of
this book and will not be discussed in depth. It is, however, important to be able to recognize and
Edition
understand a complex URL when you see one.
Illustration 12: Uniform Resource Locator (URL)
Please support this work at
URLs are made up of several sections. They are:
http://syw2l.org
• Scheme: This tells the program, often a web browser, what type of resource this URL
points to. In the context of this book you will see http which stands for Hyper Text
Transfer Protocol and https which stands for Hyper Text Transfer Protocol Secure.
Free
• Authority: In a URL an authority starts with two slashes and usually contains the server
name (www) a period followed by the domain name of the server. It may also contain
user authentication and port numbers.
• Path: In the examples above you have seen that this may contain the folders (if there are
folders) and the name of the final page to be displayed or other resource.
• Query: The optional information following the question mark represents data being sent
from the web browser back to the server. eBook
• Fragment: The fragment will tell the browser to jump to a specific element on the page
when the URL is processed. How to use fragments within your URLs will be discussed
later in this chapter.
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 44
Chapter 4 — Anchors and URLs
Relative URL
Free
In contrast to an Absolute URLs, Relative URLs make links to resources that are on the same
server as your webpage. These URLs can be thought of as local phone calls made between
74
people who are in the same office. There are several ways to express a Relative URL depending
on the location of the link. Here are a few examples given the following file system:
eBook
.
media
|
smile.ogg
|
|
...
|
|
|
| www page.html
|
|
image.png
|
Edition
...
|
|
|
images
|
pix.jpg
|
|
|
|
|
…
|
image.png — A link to a picture in the same folder as the HTML page "page.html".
Please support this work at
•
This can also be written as ./image.png
• images/pix.jpg — A link to a picture in a sub-folder "images" in the folder where
http://syw2l.org
the HTML page exists
• ../media/smile.ogg — A link to a movie in a sibling folder. ../ refers to the
parent folder where you can then find the sibling folder that houses your HTML
document.
Creating Anchors Free
An anchor refers to any element on a webpage that allows you to link from one place to another.
We can do this using the <a>...</a> tag. The URL that is pointed to by an <a>...</a>
eBook
tag can lead to a website, a specific location on a page, an image, or a downloadable file. 75
There are two attributes that are commonly used in an anchor.
• href="enter URL here" — The URL within this attribute may be an absolute or
relative path and may contain fragments that will cause the browser to jump to anchors of
the destination page. This will be the most commonly used attribute.
Edition
74 https://url.spec.whatwg.org/#urls
75 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 45
Chapter 4 — Anchors and URLs
target="context" — This attribute tells the browser to open the link inside another
•
Free
browser window (target="_blank") or other context (iframe) which can open
documents within your HTML document.
Notice that the text or image inside the <a>...</a> tag becomes a link that you can click on.
<!DOCTYPE html>
eBook
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page with Links</title>
</head>
<body>
<main>
Edition
<h1>Sample page with few different links:</h1>
<p>
<a href="other.html">Other</a>
- The "other" page in the same folder.
</p>
<p>
<a href="media/nothing.pdf">PDF</a>
Please support this work at
- The "nothing" pdf from the folder media.
</p>
<p>
<a href="media/Seashell20-300px.png">
http://syw2l.org
<img src="media/Seashell.png" alt="Sea Shell">
</a>
</p> - A bigger shell from the folder media.
Free
<p>
<a href="http://topsailbeach.org">
<img src="media/Seashell.png" alt="Sea Shell">
</a>
- Paradise in the Outer Banks of North Carolina.
</p>
<p>
eBook
<a href="http://openclipart.org/detail/261551/sea-shell-20">
<img src="media/Seashell.png" alt="Sea Shell">
</a>
- The Open Clip Art page where the sea shell image was
found.
</p>
</main>
</body>
Edition
</html>
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 46
Chapter 4 — Anchors and URLs
Free
eBook
Edition
Please support this work at
Illustration 13: Simple Page with Links
http://syw2l.org
<!DOCTYPE html>
<html lang="en">
<head> Free
<meta charset="utf-8">
<title>Other Page</title>
</head>
<body>
<main>
eBook
<h1>The Other Page</h1>
<p>
<a href="links.html">links</a>
- Back to the "links" page in the same folder.
</p>
</main>
</body>
Edition
</html>
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 47
Chapter 4 — Anchors and URLs
Free
eBook
Illustration 14: Page with a Relative Link
Using Fragments to Jump to a Tag on a Page
Edition
By assigning an id="name" to an element you can then reference that element later. You must
be careful to only assign one element on your page a specific identifier. Like your drivers-license
number or student ID number only one person can be assigned a number or the world gets very
confusing.
By assigning an id to an element we have created a way to anchor to that element. In the URL
referencing the page, either absolute or relative, you can have the web browser jump to that
Please support this work at
element by specifying its id as a fragment on the end. A fragment begins with a pound sign "#",
is followed by an id. The fragment must be at the end of the URL. If you are referencing an
anchor on the same page, the relative URL would begin with the pound sign "#" and just contain
the fragment. http://syw2l.org
Let's say that you are creating a webpage that lists all the employees in your company or students
in your class. If a user were to try looking for person whose name begins with the letter R, they
would have to scroll down the entire page just to find what they are looking for. This is where
anchors to fragments come in. Free
Setting up this behavior is a two part process. First, you must give the section that you are
targeting a unique identifier. Using the example above, if the R section began in an article, you
might write it as <article id="letterr">...</article>. Then, when you are
eBook
setting up your index at the top of your page, you would set up your enchor as <a
href="#letterr">Jump to Letter R</a>. Clicking that text "Jump to Letter R"
would then allow the user to instantly view the specified section.
Below is an example of URLs, hyperlinks, and anchors being used properly within an HTML
document.
Edition
<!DOCTYPE html>
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 48
Chapter 4 — Anchors and URLs
<html lang="en">
Free
<head>
<meta charset="utf-8">
<title>Links Demo</title>
</head>
<body>
<header style="background-color: pink;">
<h1>Some Site</h1>
eBook
<h2>A page with links</h2>
<p><a href="#personallinks">Personal</a> <a
href="#generallinks">General</a></p>
</header>
<main>
<section id="personallinks">
<h2>Personal Links</h2>
<p><a href="http://www.goldstarchili.com">Gold Star Chili</a>
Edition
- Cincinnati style goodness.</p>
<p><a href="http://www.primantibros.com/">Primanti Brothers</
a> - A great sandwich.</p>
</section>
<section id="generallinks">
<h2>General Links (opened in a new window or tab)</h2>
<p><a href="http://www.google.com" target="_blank">GOOGLE</a>
Please support this work at
- Need I say more.</p>
<p><a href="http://www.yahoo.com" target="_blank">Yahoo!</a>
- News and stuff.</p>
<p><a href="http://www.cnn.com/TECH" target="_blank">Tech
http://syw2l.org
News from CNN</a> - Ride the tech tsunami.</p>
</section>
</main>
<footer style="background-color: LightSteelBlue;">
<p><a href="about.html"><img src="media/question_75.png"
alt="about"></a>
<p><small>All external links Free
are provided only as an illustration of what can be done.
The authors and publishers of this material assume no
responsibility
for the content of the external sites.</small></p>
eBook
</footer>
</body>
</html>
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 49
Chapter 4 — Anchors and URLs
Free
eBook
Edition
Please support this work at
Illustration 15: Page with Many Types of Anchors
<!DOCTYPE html>
<html lang="en">
<head> http://syw2l.org
<meta charset="utf-8">
<title>About Page</title>
</head>
<body>
<header style="background-color: pink;"> Free
<h1>Some Site</h1>
<h2>About</h2>
<p><a href="main.html">Links</a></p>
</header>
eBook
<main>
<section>
<h2>About This Site</h2>
<p>This site is demonstrating the concept of the
<em><a></em> tag and what a hyperlink is.</p>
</section>
</main>
<footer style="background-color: LightSteelBlue;">
<p><a href="about.html"><img src="media/question_75.png"
alt="about"></a>
</footer> Edition
</body>
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 50
Chapter 4 — Anchors and URLs
</html>
Free
eBook
Edition
Illustration 16: About Page
Please support this work at
Linking to Files
http://syw2l.org
The <a>...</a> tag can also create an anchor to files that are not other HTML pages. For
instance if you have a PDF file that you want the user to download you would use an HTML
statement like <a href="somefile.pdf">pdf</a>. You may include links to almost any
Free
type of file you have on your server. When the user clicks on the hyperlink, either another
application will open the file or a dialog be presented to ask the user what they want to do with
the file (open it or save it).
Advanced Topics for Exploration
eBook
Vocabulary
• . • fragment
• .. • href
• _blank • hyperlink
Edition
• absolute • path
• authority • query
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 51
Chapter 4 — Anchors and URLs • target
relative
•
Free
scheme
•
Exercises
Word Search
u e a t a o a h a h a r t
e r m r u a _ h b y y l t
o t l t t r b c s p p e y
eBook e l s o e a e a
h n a h h
m p h n o l a c l r n g y
u p r p r a n h u l c t e
r e e a i t k e t i h r i
l r f t t i t m e n o r o
r i t h y v r e e k r h n
Edition e m e t n b t r
l o r e e
n d c b f r a g m e n t p
Please support this work at
r c t a r g e t t t a a h
e i i a q u e r y y r e m
_blank, absolute, anchor, authority, fragment, href, hyperlink,
http://syw2l.org
path, period, query, relative, scheme, target
Problems
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 52
Chapter 5 — Internal and External Style Sheets
Free
Chapter 5 — Internal and External Style Sheets
Style is how we tell our browsers how to display the information we have encoded in HTML. In
Chapter 2, inline style was shown as a way to add style directly into your HTML document.
While inline style is useful for making small, quick additions to your webpage, it is much more
eBook
effective to organize your style into internal or external style sheets. Doing so will allow your
style to be easily maintained and potentially applied throughout multiple pages.
Learning Outcomes for this Chapter
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
Edition
create an external style sheet and link that sheet back to one or more HTML documents,
•
create an internal style sheet in the head of a page,
•
cse the tag, id, and class selectors to target style to elements on a page,
•
implement selectors with more than one style in them.
•
External Style Sheets
Please support this work at
An external style sheet is simply a list of style rules for the web browser to read and apply that
76
are saved into a separate file or document. Just as an HTML document uses the file extension
http://syw2l.org
.html, an external style sheets uses the .css extension. As discussed in Chapter 2, CSS stands
for Cascading Style Sheet, and refers to the hierarchical way that style elements are applied in a
document. The more specific the rule/selector is, the more precedence it takes should it conflict
Free
with another.
The plain text CSS file contains a list of rules that are formatted with a selector, curly-braces
("{" and "}"), and within them the style commands. So, for example, a rule for changing the
font color of all instances of <p>...</p> to blue in a CSS document would appear as such:
eBook
p {
color: blue;
}
Linking an external style sheet to your HTML document is a necessity, and is added simply by
using the void element <link> tag inside of the <head>...</head> of your document. The
Edition
<link> tag requires the href, rel, and type attributes, and is written like: 77
76 https://html.spec.whatwg.org/multipage/semantics.html#the-style-element
77 https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 53
Chapter 5 — Internal and External Style Sheets
Free
<link href="sheet.css" rel="stylesheet" type="text/css">
The href attribute stands for "hypertext reference" and is used to load or "reference"
•
your external style sheet. Most style sheets will end with the .css extension. You can
name your CSS document however you'd like, but be sure to spell it the same way in
eBook
your HTML as it is saved, and be wary of capitalization.
rel is short for relation and communicates to the HTML document what kind of item it
•
is reading.
• The type attribute communicates to the HTML document what kind of characters it can
Edition
be expected to read.
Here is an example of an external style sheet and the accompanying HTML document. Note that
anything written within a /* */ will not be interpreted by the web browser, and can be used to
make notes for yourself or others that are working with you:
Please support this work at
/* sample.css - Sample CSS Sheet for Chapter 5 */
/* a rule for the body that cascades to all of the child elements */
body {
font-family: Tahoma, Verdanda, Arial, sans-serif;
} http://syw2l.org
/* a rule for the h1 tags */
h1 {
font-family: "times new roman", serif;
color: red; Free
}
/* this rule just changes the element with the id mainmenu */
#mainmenu {
background-color: grey;
color: blue;
} eBook
/* apply this style to all tags with the class "bright" */
.bright {
background-color: yellow;
color: orange;
Edition
}
/* apply this style to all tags with the class "dull" */
.dull {
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 54
Chapter 5 — Internal and External Style Sheets
background-color: #e0e0e0;
Free
color: #808080;
}
<!DOCTYPE html>
<html lang="en">
<head>
eBook
<meta charset="utf-8">
<title>title</title>
<link href="sample.css" rel="stylesheet" type="text/css">
</head>
<body>
<header id="mainmenu">
<h1>Sample Page with External CSS</h1>
<nav>
Edition
<p><a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.ubuntu.com">Ubuntu</a></p>
</nav>
</header>
<section id="centersection">
<h2>Center Section</h2>
Please support this work at
<p>This is a <em class="bright">paragraph</em> with special
<em class="dull">text</em> that is bright and dull.</p>
</section>
<footer>
http://syw2l.org
<p><small class="dull">All external links
are provided only as an illustration of what can be done.
The author and publisher of this material assume no
responsibility
for the content of the external sites.</small></p>
</footer>
</body> Free
</html>
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 55
Chapter 5 — Internal and External Style Sheets
Free
eBook
Edition
Illustration 17: Page with External Style Sheet
Please support this work at
Internal Style Sheets
http://syw2l.org
An internal style sheet functions much like an external style sheet, however it is contained within
the <style>...</style> tag that lies within the <head>...</head> of an HTML
document. While more organized than inline style, it must be included in every document of your
website, making is far less convenient than external style. For this reason we recommend using
external style sheets for more complex Web pages. Free
Selectors
There are several ways to select tags and items in internal and external style sheets, but for now
eBook
we will discuss the main three that you will use most often, which are tags, IDs, and classes.
Using these selectors properly allow for complex style that can be applied to an entire website.
Tag Selectors
Take a look at the previous example of an external style sheet and make a note of the body and
h1 selectors. This is an example of a tag selector, named that way because it selects tags within
Edition
your document to apply style to. A tag selector will apply the specified style to each and every
instance of that tag throughout your entire document. Referencing the example above, all
instances of <h1>...</h1> tags on the page will have red text.
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 56
Chapter 5 — Internal and External Style Sheets
Using the body as a selector is a useful way to apply style quickly to an entire page, as all
Free
visible content is contained within it. Anything that you want to all of the tags on the page,
should be there. You may override this rule simply by creating a selector that is more specific
that overrides the prior selector. In the example above, though the body selector specifies that
all font will be Tahoma, the h1 child selector, which is written below, overrides the parent and
makes all <h1>...</h1> tags display their font as Times New Roman.
eBook
ID Selectors
In previous chapters you have seen the id attribute that is optionally defined on some tags.
Adding an id to an element gives it a unique name that can later be easily accessed in places
such as anchors, style sheets, and JavaScript. An ID selector in a CSS document assigns style to
the tag with the specified id. Keep in mind that identifiers are unique to a webpage and each
Edition 78
identifier should not be used more than once in an HTML document.
An ID selector in a CSS document begins with a # (referred to as a hash tag, pound sign, number
sign, or octothorp depending on the use), and is followed by the id assigned to the tag. In the
above example you can see the id selector #mainmenu refers to the tag with the id mainmenu
which has been assigned to the <header>...</header> tag. Any style that is applied to this
Please support this work at
selector will affect only the single tag that has that ID.
Class Selectors
http://syw2l.org
The class selector functions differently from the id selector, because a class can select one or
more tags and a tag may have zero or more classes. In CSS a class selector is written with a
period as its first character. You can see the class selector at work in the above example as the
.bright and .dull selectors specify different background and font colors for text within a
<p>...</p>. Free
Validating your CSS
Validating your CSS document is crucial as one error can alter your webpage in ways that you
did not intend. Thankfully the W3 provides an easy way to quickly check your documents, which
can be found at: eBook
• http://jigsaw.w3.org/css-validator/
Edition
78 http://en.wikipedia.org/wiki/Number_sign
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 57
Chapter 5 — Internal and External Style Sheets
Advanced Topics for Exploration
Free
Vocabulary
selector
class selector
• • • class • • • internal
eBook • tag selector
style sheet
curly braces
external
•
id selector
•
Exercises
Word Search
c a r e x t e r n a l x r
c u s y s
Edition e l e c t o r s
t s r a e l i h r t s a s
Please support this work at
d t l l r l l l a a n a h
h y s c y i n t e r n a l
t l l s r l r e u y
http://syw2l.org
a e s t e i b s a t b t s
g t t s s t r r e t y a
l s s c t h a x a e e o r
e h c l l g e t a c h i d
Free
l e o a s o y r s l e a h
l e h s a l i e g b e s a
i t l s o c e s l e l t y
class, curly braces, external, id, internal, selector, style
sheet, tag
eBook
Problems
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 58
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
Free
Chapter 6 — The CSS Box Model: Borders, Margin,
and Padding
In Chapter 3, Phrasing and Flow HTML tags are used to define the meaning of the text. They
also have a default way they are displayed. Flow elements usually form "building blocks" that
stack upon one another and dictate height, and phrasing elements sit right next to each other and
eBook
dictate width. Throughout this chapter we will be discussing what each of these elements mean
within CSS. Keep in mind as you read that phrasing elements are always contained within flow
elements and come flow elements are valid inside of other flow elements.
Learning Outcomes for this Chapter
Edition
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
explain the relationship between content, border, margin, and padding in the CSS box
•
recall and use the most common CSS dimensional units,
• • model,
set a margin and padding to an element,
Please support this work at
add a border to an element,
•
use the descendant combinator in a style sheet to select specific elements,
•
• use display to change a phrasing element to display like a flow or an inline flow element,
http://syw2l.org
• use text-align style to change the alignment of text elements.
The CSS Box Model
Free
The CSS Box Model refers to how an HTML element's structure is displayed on a webpage.
79 80
Imagine that each HTML element is contained within a box inside of a box inside of a box inside
of a box. These "boxes" dictate not only the height and width of the element, but how far away it
is from other elements or the edge of the page. The four boxes that hold an element (starting
from the inside box) are:
eBook
• Content — This is the default box and contains the content of your HTML element. The
height and width of your content will be determined here.
• Padding — The next layer wraps around the element's content and determines how far the
background color extends past it.
• Border — If you choose to specify a border, this box will wrap around the content and
Edition
padding box.
79 http://www.w3schools.com/css/css_boxmodel.asp
80 http://www.w3.org/TR/CSS2/box.html
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 59
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
Margin — The Margin is made up of a transparent background and will determine how
•
Free
far your element is spaced from other elements or edges.
eBook
Edition
Illustration 18: CSS Box Model
Please support this work at
Keep in mind that aside from the content box, all the other boxes are optional. You can choose to
have padding and a margin without a border, however the order will always remain the same,
with the padding coming after the content and the margin being last.
http://syw2l.org
Using Style to Adjust the Box
Free
Content
The width and height styles are used to determine the size of flow elements and phrasing
elements that have been replaced with media or images. After the height or width style you must
define a size in CSS units.
Common CSS Units
eBook
px — Pixels
The size of a single dot on the screen. This is the smallest unit of measure.
pt — Point
Approximately 1/72 of an inch.
% — Percent
Percent of the containing tag's size Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 60
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
em — Size of Capital M
Free
This represents the size of the capital letter M. Usually this is one of the widest letter in a
font
ex — Size of Lower x
This represents the size of a lower case x. In most fonts this represents the average size of
a letter.
eBook
In addition to the CSS dimensions listed above there are many others you may use in your pages.
These include: in, cm, mm, and more.
81
Point and pixel dimensions may cause problems, as screen sizes can vary greatly between users
and devices. Percentages, however, are very effective when dividing up a screen. For example,
Edition
lets say you have a section in your HTML document that you want to span exactly half of your
webpage. This can be done easily in CSS, and is written as such:
section {
width: 50%;
Please support this work at
}
For phrasing elements containing text the height and width CSS attributes are often ignored
because of the behavior of "inline" elements as they build flow. This may be changed by adding
http://syw2l.org
the style display: inline-block; or display: block; to the elements. This will be
discussed in detail later in this chapter.
Free
Padding
Padding surrounds the content of an element and contains the same background color. Padding is
used to create a buffer between the edge of your content and the end of the background color,
and creates a nice, professional effect that is easy on a user's eyes.
There are a multitude of different ways to specify padding in CSS. If you only want padding on
one side of your content, you can use any of these properties:
• padding-top eBook
• padding-bottom
• padding-right
Edition
• padding-left
81 http://www.w3.org/TR/css3-values/#lengths
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 61
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
If you would like to add padding to more than one side of your content, it is generally more
Free
effective to use the short-hand version of the property. There are four values that can be entered
into one command, and they always follow the same pattern: top, right, bottom, left, or TRBL
(TRouBLe). This pattern is the same for the margin and border property, and should always be
kept in mind. Here are some examples of the short-hand padding property:
• padding: 1px; — This will add 1 pixel to each side of the element.
eBook
padding: 1px 2px; — This will add 1 pixel to the top and bottom of the element
•
and 2 pixels to the right and left.
padding: 1px 2px 3px; — This will add 1 pixel to the top, 2 pixels to the right,
•
and 3 pixels to the bottom.
padding: 1px 2px 3px 1px; — This will add 1 pixel to the top, 2 pixels to the
Edition
•
right, 3 pixels to the bottom, and 1 pixel to the left.
Border
A border resides outside of the padding box and surrounds and separates your element from
others on a webpage. Just like any other HTML element, a border can have width, color, and
Please support this work at
style applied to it. Similar to padding, a border can reside on all four sides, just one, or anything
in-between, and each side can be unique.
Writing a basic border property appears as:
http://syw2l.org
• border: width style color;
Different sides of a border can be specified similarly to padding, and are written as:
• border-top: width style color;
• border-bottom: width style color; Free
• border-right: width style color;
• border-left: width style color;
eBook
There are many styles of borders that can be specified simply by writing the name in the
property. Here is a list of commonly used border styles. Keep in mind that only one style can be
selected per side:
• none: This will display no border. Writing a border style of "none" is useful for writing
@media commands, which will be discussed in later chapters.
Edition
• hidden: This will display a border that is invisible to the user.
• dotted: This style will create a dotted line around your content.
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 62
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
solid: A basic, solid border.
•
Free
groove: This will create an "indented" border that appears to be three-dimensional.
•
ridge: This border is similar to groove, but is raised rather than indented.
•
• inset: Similar to groove, however the entire contend will be indented rather than just
the border.
eBook
outset: Similar to ridge, however the entire contend will be raised rather than just the
•
border.
Margin
Edition
Writing the margin property functions exactly the same as writing the padding property, except
for centering. Margin can be used to center flow elements on a web-page by using these easy
properties:
margin-left: auto; and margin-right: auto;
•
Using these properties in CSS will automatically find the center of a webpage and line your
element up with equal space on the right and left sides.
Please support this work at
82
CSS Descendant Combinator
http://syw2l.org
The following example is the same HTML code we used in a previous chapter except that the
CSS has been modified to adjust the box model of most elements. This new CSS file also
83
introduces the use of the descendant combinator. You will notice the rule "#mainmenu a"
Free
and that it contains a space. This compound selector looks for all <a> tags that are a descendant
of the tag with the id of #mainmenu. It does not get applied to other <a> tags in the document.
<!DOCTYPE html>
<html lang="en">
eBook
<head>
<meta charset="utf-8">
<title>Boxes</title>
<link href="sample.css" rel="stylesheet" type="text/css">
</head>
<body>
<header id="mainmenu">
<h1>Sample Page with External CSS</h1>
<nav>
82 http://www.w3.org/Style/Examples/007/center.en.html Edition
83 https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 63
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
<p><a href="http://www.yahoo.com">Yahoo</a>
Free
<a href="http://www.google.com">Google</a>
<a href="http://www.ubuntu.com">Ubuntu</a></p>
</nav>
</header>
<section id="centersection">
<h2>Center Section</h2>
<p>This is a <em class="bright">paragraph</em> with special
eBook
<em class="dull">text</em> that is bright and dull.</p>
</section>
<footer>
<p><small class="dull">© 2015 The SYW2L Project
<a href="http://www.syw2l.org">http://www.syw2l.org</a>
- All external links are provided only as an illustration
of what can be done. The author and publisher of this
material assume no responsibility for the content of the
Edition
external sites.</small></p>
</footer>
</body>
</html>
/* sample.css - Sample CSS Sheet for Chapter 6 */
Please support this work at
body {
font-family: Tahoma, Verdanda, Arial, sans-serif;
}
h1 { http://syw2l.org
font-family: "times new roman", serif;
color: red;
}
#mainmenu { Free
background-color: grey;
color: blue;
border: 10px solid #8080ff;
width: 50%;
margin: 0px auto;
}
#mainmenu a { eBook
border: 3px groove #000000;
background-color: white;
margin: 10px;
Edition
padding: 5px;
}
#centersection h2 {
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 64
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
text-align: center;
Free
}
.bright {
background-color: yellow;
padding: 0px 10px;
} color: orange;
eBook
.dull {
background-color: #e0e0e0;
color: #808080;
}
footer {
border-top: 5px solid blue;
Edition
}
footer small {
font-size: 80%;
}
Please support this work at
http://syw2l.org
Free
eBook
Illustration 19: CSS with Margins and Padding
Edition
Display
As we discussed previously, Phrasing and Flow elements have specific structural behaviors that
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 65
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
effect how they are displayed on a webpage. It is possible, however, to use the display property
Free
in CSS to force these elements to behave the way that you want them to do. For instance:
display: block; — This will force a Phrasing element to behave like a Flow
•
element.
• display: inline; — This will force a Flow element to behave like a Phrasing
element.
eBook 84
display: inline-block; — Specifying this property will create Flow elements
•
that can be displayed side-by-side like Phrasing elements.
Centering Images and Text
Edition
Text within a Flow element (like a <p>...</p> or <h2>...</h2> ) can be centered within
the element using the CSS property text-align.
<!DOCTYPE html>
<html lang="en">
<head>
Please support this work at
<meta charset="utf-8">
<title>Boxes</title>
<link href="centerimagetext.css" rel="stylesheet" type="text/css">
</head>
http://syw2l.org
<body>
<section>
<h1 class="centertext">Centering Images and Text</h1>
<p>This is a paragraph of text that is not centered. This
Free
is a paragraph of text that is not centered. This is a
paragraph of text that is not centered.</p>
<p class="centertext">This is a paragraph of text that
is centered. This is a paragraph of text that is centered.
This is a paragraph of text that is centered.</p>
<img src="mars.jpg" alt="Mars">
eBook
<p>A Picture of Mars from NASA.</p>
<img class="centerimg" src="jupiter.jpg" alt="Jupiter">
<p class="centertext">A Picture of Jupiter from NASA.</p>
</section>
<footer>
<p>Images of Mars and Jupiter By NASA/JPL/USGS
Edition
[Public domain], via Wikimedia Commons.</p>
<p><small class="dull">© 2015 The SYW2L Project
84 http://www.w3schools.com/cssref/pr_class_display.asp
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 66
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
<a href="http://www.syw2l.org">http://www.syw2l.org</a>
Free
- All external links are provided only as an illustration
of what can be done. The author and publisher of this
material assume no responsibility
for the content of the external sites.</small></p>
</footer>
</body>
</html>
eBook
/* centerimagetext.css - Centering */
body {
} font-family: Tahoma, Verdanda, Arial, sans-serif;
Edition
.centertext {
/* cener text within a block using text-align */
text-align: center;
}
.centerimg {
/* make the image display like a block and
Please support this work at
* then add margins to the sides */
display: block;
margin: 0px auto;
}
footer { http://syw2l.org
font-size: x-small;
Free
border-top: 2px solid black;
}
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 67
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
Free
eBook
Edition
Please support this work at
http://syw2l.org
Free
eBook
Illustration 20: Centering Images and Text
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 68
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
Advanced Topics for Exploration
Free
Vocabulary
inline-block
block
• • • auto • • • inline
eBook • • margin
border
inset
box model
•
none
content
•
dotted
padding
• • • display • • • outset
Edition • solid
groove
ridge
hidden
•
Exercises
Please support this work at
Word Search
c i i d o i n s e t n m r
d n s e h i d d e n p a i
http://syw2l.org
i l b n o e o r k g a r d
i i o b b c b o d n d g g
e n x i n o a g i t d i e
Free
e e s o n u r i b i n d
l - m t n t t o n l n k i
o b o s e e o o l o g n s
u l d o a n a v i c u g p
t o e l i t o e n k a d l
s c l i i - b n e s l n a
eBook
e k u d t t b o r d e r y
t i t d o t t e d e c i e
auto, block, border, box model, content, display, dotted,
groove, hidden, inline, inline-block, inset, margin, none,
outset, padding, ridge, solid
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 69
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding
Problems
Free
eBook
Edition
Please support this work at
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 70
Chapter 7 — Lists and Tables
Free
Chapter 7 — Lists and Tables
Web sites often need to display data in a formatted manner. This chapter will show how to
display bulleted lists, numbered lists, definition lists, and tables. At the end of the chapter
additional table tags and formatting will be shown.
eBook
Learning Outcomes for this Chapter
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
display lists of data that contain sub-lists,
• • • create numeric and bulleted lists of items on a page,
create tables to display rows and columns of data,
Edition
add cells with header information to tables,
•
cause cells on a table to span multiple columns or rows.
•
Lists
Lists on a webpage are an excellent way to organize information for the ease of viewers. Lists
Please support this work at
can be ordered, unordered and description lists. The ordered and unordered have a similar syntax.
All lists and items within a list, by default, are displayed as flow elements. You should choose
the appropriate type of list depending on your semantic need.
http://syw2l.org
Ordered and Unordered Lists
Ordered lists (<ol>...</ol>) are numbered, and the order that you insert your items
85
communicates the level of importance. Unordered lists (<ul>...</ul>), on the other hand,
are normally bulleted and the order of the items is unimportant. 86 Free
The ordered and unordered list tags dictate the type of list and hold the list elements that are
written inside of the <li>...</li> child tags. For instance, an unordered list of fruit would
be written as such:
<ul> eBook
<li>Apple</li>
<li>Banana</li>
<li>Pear</li>
<li>Orange</li>
Edition
</ul>
85 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
86 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 71
Chapter 7 — Lists and Tables
Free
Lists may be nested inside other lists to create outlines or add detail. Be sure to include sublists
inside the list item tags of the parent list.
CSS tricks on ordered and unordered lists:
• Different icon and number style — in CSS use the list-style-type to modify the
way a list looks
87
eBook
lists are often used within the nav section to warp the anchors for formatting using
•
display: inline-block; or display: inline;
<!DOCTYPE html>
Edition
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nested Lists</title>
</head>
<body>
<section>
Please support this work at
<h1>Nested Lists</h1>
<ol>
<li>Item One</li>
<li>Item Two
http://syw2l.org
<ul>
<li>such and more</li>
<li>stuff and crud</li>
</ul>
</li>
<li>Item Three</li>
</ol>
</section> Free
<footer>
<p><small>© 2015 The SYW2L Project
<a href="http://www.syw2l.org">http://www.syw2l.org</a>
</small></p>
eBook
</footer>
</body>
</html>
Edition
87 https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 72
Chapter 7 — Lists and Tables
Free
eBook
Edition
Illustration 21: Ordered and Unordered lists
Description Lists
Please support this work at
Another type of list is the Description List (<dl>...</dl>) which is used to list terms and
88
their definitions. It is written similarly to the ordered and unordered list, except that
http://syw2l.org
<dt>...</dt> (description term) and <dd>...</dd> (description definition) tags are
used. A description list of two words that have the same meaning and a word with two
89
meanings would be written as:
<dl>
<dt>balanced</dt> Free
<dt>fair</dt>
<dd>decision that is good for everybody</dd>
<dt>false</dt>
<dd>not true</dd>
<dd>misleading</dd>
</dl> eBook
A description list may contain several terms that share a definition and a term with several
definitions. You muse always end a term or group of terms with at least one definition. Keep in
mind that lists all have semantic meanings and should not be used to indent text.
Edition
88 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
89 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 73
Chapter 7 — Lists and Tables
<!DOCTYPE html>
Free
<html lang="en">
<head>
<meta charset="utf-8">
<title>Glossary Using Description List</title>
</head>
<body>
<section>
eBook
<h1>Glossary Using Description List</h1>
<dl>
<dt>Netiquette</dt>
<dd>Guidelines for etiquette on the Internet.
<a href="http://www.faqs.org/rfcs/rfc1855.html"
target="_blank">rfc1855</a>
</dd>
Edition
<dt>foo</dt>
<dt>bar</dt>
<dd>Meta syntatic variables that have no specific meaning or
definition. <a href="http://www.faqs.org/rfcs/rfc3092.html"
target="_blank">rfc3092</a>
</dd>
</dl>
</section>
Please support this work at
<footer>
<p><small>© 2015 The SYW2L Project
<a href="http://www.syw2l.org">http://www.syw2l.org</a>
</small></p>
http://syw2l.org
</footer>
1│ </body>
</html>
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 74
Chapter 7 — Lists and Tables
Free
eBook
Illustration 22: A Definition List
Edition (Glossary)
Please support this work at
Tables
Using tables on a webpage is another great way to organize information. Tables should ONLY be
http://syw2l.org
used for data that needs to be displayed in a tabular format. Older HTML often used tables to
format pages and for general layout, this is not an appropriate use of tables.
Free
Simple tables are written using the <table>...</table> tag containing rows of
90 91
<tr>...</tr> tags and columns of data using <td>...</td> tags.
The size of a table is determined with the number of rows and columns you create. Usually you
would want to define the same number of columns on each row. In the example below, we create
eBook
a table with three rows and two columns.
<table>
<tr>
<td>Susan</td>
<td>Jones</td>
Edition
</tr>
90 https://html.spec.whatwg.org/multipage/tables.html#the-table-element
91 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 75
Chapter 7 — Lists and Tables
<tr>
Free
<td>Billy</td>
<td>Smith</td>
</tr>
<tr>
<td>Sally</td>
<td>Rogers</td>
</tr>
eBook
</table>
There are other optional tags that can be used for tables to specify headers and captions. The
table header, <th>...</th> tag, is a semantic tag that marks table cells as heading
92
information about the column. The <caption>...</caption> tag can be added as the
very first tag in the <table>...</table> to add caption information. 93
Edition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table - th & caption</title>
Please support this work at
</head>
<body>
<table>
<caption>My MLB Teams</caption>
http://syw2l.org
<tr><th>Name</th><th>City</th></tr>
<tr><td>Reds</td><td>Cincinnati</td></tr>
<tr><td>Royals</td><td>Kansas City</td></tr>
<tr><td>Orioles</td><td>Baltimore</td></tr>
</table>
<footer>
<p><small>© 2020 The SYW2L Project Free
<a href="http://www.syw2l.org">http://www.syw2l.org</a>
</small></p>
</footer>
</body>
eBook
</html>
Edition
92 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
93 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 76
Chapter 7 — Lists and Tables
Free
eBook
Illustration 23: Table with Caption and
Headers
Tables with Span and Style
Edition
Sometimes when you are creating a table you will have cells that need to span across multiple
rows or columns. This can be done with the rowspan and colspan attributes. Simply add the
attribute to your <td>...</td> tag and specify the number of cells that it will span across.
For instance, let's say that you have a cell that you would like to span two rows. The correct
Please support this work at
HTML is written as such:
<td rowspan="2">example text</td>
http://syw2l.org
Keep in mind that both a rowspan and a colspan can be used in the same tag.
Free
Adding a table to your document will display information in columns and rows. However, it will
not generate its own border and will thus appear as floating text on your webpage. In previous
versions of HTML, adding a border to a table could be done using the border attribute inside
of the <table> tag but it is no longer recommended in HTML. Instead, a border should be
added in CSS, and is written as such:
table {
border: 1px solid gray eBook
}
td {
border: 1px solid gray
}
Edition
th {
border: 1px solid gray
}
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 77
Chapter 7 — Lists and Tables
or with the combined CSS selector
Free
table, th, td {
border: 1px solid gray
}
Below is an example of properly written tables in an HTML and CSS document. Keep in mind
eBook
that tables are used only for data that needs to be displayed as such and not for formatting.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
Edition
<link href="table.css" rel="stylesheet" type="text/css">
<title>Tables</title>
</head>
<body>
<section>
<h1>Table with Rowspan and Colspan</h1>
<table>
Please support this work at
<caption>Common Tree Names and Genus</caption>
<tr>
<th>Tree Name</th>
<th>Genus</th>
http://syw2l.org
</tr>
<tr><td>Chestnut</td><td>Castanea</td></tr>
<tr><td>Cherry</td><td rowspan=2>Prunus</td></tr>
<tr><td>Plum</td></tr>
<tr><td>Maple</td><td>Acer</td></tr>
<tr><td colspan=2>Sequoia</td></tr>
</table> Free
</section>
<footer>
<p><small>© 2015 The SYW2L Project
<a href="http://www.syw2l.org">http://www.syw2l.org</a>
</small></p>
</footer>
</body> eBook
</html>
/* table.css - Formatting for tables */
Edition
table, td, th { border: 1px solid gray }
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 78
Chapter 7 — Lists and Tables
Free
eBook
Edition
Illustration 24: Table with Row and Column Spanning
Please support this work at
Advanced Topics for Exploration
http://syw2l.org
More Table Organization
Along with the <th>...</th> and <caption>...</caption> tags, there are other
optional tags that can be used to better organize your tables. The <thead>...</thead>,
<tfoot>...</tfoot>, and <tbody>...</tbody> tags go directly in the table and
contain rows. Free
• <thead>...</thead> — Rows that define the table header. This is often used if
your table has more than one row containing <th>...</th> tags. Not to be confused
with the <th>...</th> tag.
eBook
• <tfoot>...</tfoot> — Rows that define the footer of the table. This tag should be
after the <thead>...</thead> and before the <tbody>...</tbody>. Even
though it was defined before the body rows, it will be displayed at the bottom of the
table.
Edition
• <tbody>...</tbody> — The table body tag should contain all of the detail rows of
the table.
Here is an example of these optional tags being used in an HTML document. Be sure to note the
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 79
Chapter 7 — Lists and Tables
order of the tags.
Free
<table>
<thead>
<tr>
<th>Item</th><th>Quantity</th><th>Price</th>
</tr>
eBook
</thead>
<tfoot>
<tr>
<td colspan=2>Total</td><td>$50</td>
</tr>
</tfoot>
<tbody>
Edition
<tr>
<td>Teddy Bear</td><td>2</td><td>$10</td>
</tr>
<tr>
<td>Jigsaw Puzzle</td><td>1</td><td>$30</td>
</tr>
<tbody>
</table>
Please support this work at
Alternating Table Colors in CSS
http://syw2l.org
Large tables with a lot of information on a webpage can sometimes be difficult to read, even with
borders. In these situations it is sometimes helpful to use CSS to alternate the colors on even and
odd table rows and columns. This is done using the CSS pseudo selector nth-child. Let's
94
say that you are attempting to alternate table rows between the colors white and blue. Here is the
correct way to write the code in CSS: Free
tr:nth-child(even) {
background-color: white;
}
tr:nth-child(odd) {
background-color: blue; eBook
}
In this example, row 1 and every other row after will have a blue background, and row 2 and
every other row after will have a white background. There are many other ways to use the nth-
child command aside from even and odd, but it is best to use these simple commands while
just starting out in CSS. Edition
94 http://www.w3.org/Style/Examples/007/evenodd.en.html
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 80
Chapter 7 — Lists and Tables
Vocabulary
Free • • ol
caption
•
ordered list
colspan
•
data
•
eBook • • • • • row
dd
rowspan
•
definition
table
•
td
definition list
•
dl
term
•
dt
•
Edition • • • • th
header
tr
•
ul
li
•
unordered list
list
•
list item
•
Please support this work at
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 81
Chapter 7 — Lists and Tables
Exercises
Word Search
h
Free e i o r d a t a p t a w
r e d h r e e n d d i c c
eBook
u d a b a d r s p n o a o
n w d d i c e u t i d p l
o a l r e i a r o w e t s
r d r a r r r i e d f i p
d o s o s e u n r d i o a
e o t l w l i s a a n n n
r d h i n s i t p h i n t
Edition
e t d r t u p s a f t t a
d d e p i e o a t w i o b
r o r r i t m n n n o r l
n r a r m r h i e d n a e
caption, colspan, data, definition, header, item, list,
Please support this work at
ordered, row, rowspan, table, term, unordered
Problems
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 82
Chapter 8 — CSS Positioning and Background Images
Free
Chapter 8 — CSS Positioning and Background Images
CSS allows for many different ways to arrange elements on a page. This chapter will show how
to float elements allowing other elements to wrap themselves around and how to absolutely
position an element on the page at exactly the location you want it.
Learning Outcomes for this Chapter
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
eBook n,
float elements to the right or left margi
•
• • use the clear style to postpone display of an element until the current floats complete,
use absolute positioning to place an element at an exact location on the page,
Edition
explain the z order of elements of a page and use it to create layered element,
•
add a background image to a page or a specific element,
•
use various options to cause a background image to tile, stretch, and scroll.
•
Floating Elements
Please support this work at
By this point in the book you should be familiar with the HTML structure and how flow and
phrasing elements organize themselves on a webpage. Each element has default style they follow
to display on a screen. It is possible, however to overwrite and manipulate these rules using float
in CSS. 95 http://syw2l.org
Floating an element in CSS means that you are manually telling the element to change its
position on a webpage. Doing so will only affect the element and those that come after, never
before. You may float an element horizontally to the right or left margin using float:right;
or float:left;. Free
If you float an element that usually expands to the entire width of the page, you will need to
assign it a width using the width: dimension; style.
In the following example there are three floats:
eBook
1. the page title is floated to the left and the remainder of the article that follows wraps
around it;
2. the aside in the article floats to the right and the second and third paragraph wrap around
it;
Edition
3. and the copyright message floats to the right of the footer.
95 https://developer.mozilla.org/en-US/docs/Web/CSS/float
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 83
Chapter 8 — CSS Positioning and Background Images
Floating an element on a page can complicate positioning for those elements that come after it.
Free
In these cases, you can use the clear:right;, clear:left;, or clear:both;
commands. These commands will communicate to the browser to not display the element until
the right, left, or both sides of the element are clear from floated objects on the same line.
<!DOCTYPE html>
<html lang="en">
<head>
eBook
<meta charset="utf-8">
<title>Showing Floats</title>
<link href="float.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This Page's Title</h1>
<section>
Edition
<h2>Title of the Section</h2>
<p>This is the first paragraph. Redim dierac
sonen tet gelir peco ecolok esac sa, he
citerov rupa etaro. Asecuso aqu cegir ulerena mitadad ganacel
eripey cacelef. Lihu mefetas irenilus teqih dapuno cieri
dodatin fadasar.</p>
<aside>
Please support this work at
<h3>Floating Box Aside</h3>
<ul>
<li>First thing: Ga reto nierico reyosac!</li>
<li>Second thing: Pa pigi ipesu cegucat upegas zacin
http://syw2l.org
temey!</li>
<li>Another thing: Rosie esonanev taralor pebon
nudohe.</li>
</ul>
</aside>
<p>Second paragraph. Renuv enikoyi cane libeti roheri nito go
naret; yese ragop Free
erenusi gilire ciseh sicip cesopet tol acas! Pasetes konec
nucit. Manam ba la fenefob umetel re cikuc periyu.</p>
<p>Third paragraph. Cet men xin hesid tisigied ahaceyi: Be
temeteh iyiqi cad te. Wetu lat edema hetewet. Erarec gec
etomieyo vegetut nesene, dihalo
tipeh zelasu pak lerefal tisu uceripon ipay gocane. </p>
</section>
<footer> eBook
<img id="logo" src="floatlogo.png" alt="logo">
<p id="copyrightmessage"><small>© 2020 The SYW2L Project
<a href="http://www.syw2l.org">http://www.syw2l.org
</a></small></p>
Edition
</footer>
</body>
</html>
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 84
Chapter 8 — CSS Positioning and Background Images
Free
/* float.css - Sample CSS Sheet for floating */
aside {
float: right;
border: 3px groove #800000;
margin: 0px 5px 5px 0px;
width: 20em;
eBook
}
h1 {
float: left;
width: 5em;
border: 1px solid black;
margin: 10px;
Edition
}
footer {
border-top: 5px groove blue;
background-color: #ffffa0;
} clear: both;
Please support this work at
#copyrightmessage {
} float: right;
http://syw2l.org
Free
eBook
Illustration 25: Floating Elements
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 85
Chapter 8 — CSS Positioning and Background Images
Absolute Positioning Elements
Free
It is possible to place an element anywhere on a webpage regardless of its position in an HTML
document. This is done using the position: absolute; style. The element is placed in
relation to the absolute parent or the webpage itself, and is defaulted to the top left. The position
can then be set with the top: ##; and left: ##; styles. The dimension may be either a
relative or absolute position.
eBook
Absolute positioned objects are affected by a style called the z-index: ##;, which
determines which elements overlap others. A greater z-index: ##; will place an element
over top of another. You may set an element to the default page z-index with z-index:
auto;. Generally you will not have to change it by more than + or - 1.
96
Using absolute positioning and the z-index, you can essentially place elements anywhere on a
Edition
webpage while ignoring HTML layout rules.
<!DOCTYPE html>
<html lang="en">
<head>
Please support this work at
<meta charset="utf-8">
<title>Absolute Positioning</title>
<link href="abs.css" rel="stylesheet" type="text/css">
</head>
<body> http://syw2l.org
<header>
<h1>My Absolute Page</h1>
<nav>
<a href="http://www.renejm.net" class="bk">
RENEJM</a> Free
<a href="http://www.basicbook.org" class="bk">
BASIC Book</a>
<a href="http://www.shawnee.edu" class="bk">
Shawnee State</a>
</nav>
</header>
<section> eBook
<h2 id="overthetop">Absolute Positioned 'h2'</h2>
<p>Renuv enikoyi cane libeti roheri nito go naret; yese ragop
erenusi gilire ciseh sicip cesopet tol acas! Pasetes konec nucit.
Manam ba la fenefob umetel re cikuc periyu. Redim dierac sonen
Edition
tet gelir peco ecolok esac sa, he citerov rupa etaro.</p>
<p>Asecuso aqu cegir ulerena mitadad ganacel eripey cacelef.
96 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 86
Chapter 8 — CSS Positioning and Background Images
Lihu mefetas irenilus teqih dapuno cieri dodatin fadasar: Wetu
Free
lat edema hetewet. Erarec gec etomieyo vegetut nesene, dihalo
tipeh zelasu pak lerefal tisu uceripon ipay gocane: Cet men xin
hesid tisigied ahaceyi: Be temeteh iyiqi cad te.</p>
</section>
<footer>
<p><small>© 2015 The SYW2L Project
eBook
<a href="http://www.syw2l.org">http://www.syw2l.org</a>
</small></p>
</footer>
</body>
</html>
Edition
/* abs.css - Sample CSS Sheet for absolute Positioning */
nav {
position: absolute;
left: 60%;
top: 1em;
}
Please support this work at
.bk {
display: block;
}
#overthetop { http://syw2l.org
position:absolute;
left: 10em;
top: 4.5em;
color: red;
} Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 87
Chapter 8 — CSS Positioning and Background Images
Free
eBook
Illustration 26: Absolute Positioning an Element
Edition
Background Images
We can use CSS to add background images to elements on our page. We use the background-
97
image: url(imagefilename); style to add one to an element. They can be applied to
Please support this work at
virtually any HTML tag and are not limited to just the body itself. It is important to always
specify a background-color: color; style in case your image contains transparency or
cannot load.
http://syw2l.org
Web pages can be displayed as any size and the size can changed by the user. An image has a
defined width and height. The fixed size of an image can cause issues on a dynamic page. There
are many ways to alter the position and appearance of a background image. Here is a list of some
Free
of the more common styles that can be used with a background :
• background-repeat: option; - The background image will, by default, fill up as
much space as it can, which can cause sizing issues. This can be remedied by repeating
98
the image, allowing the entire space to be filled regardless of screen size. Some options
for repeating are:
eBook
‣ repeat-x — This will repeat the image horizontally on the x-axis.
‣ repeat-y — This will repeat the image vertically on the y-axis.
‣ repeat — This will repeat the image in both directions, filling the entire space.
‣ space — This will repeat the image using the entire space without clipping off any
Edition
of the images near the edges of the screen.
97 https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
98 https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 88
Chapter 8 — CSS Positioning and Background Images
round — This command is similar to space, however it will scale the image to use
‣
Free
up as much space as possible without clipping, meaning each repeated image will be
touching as close as possible.
no-repeat — No repeating will occur when using this command.
‣
• background-attachment: option; — By default a background image will
eBook
scroll, meaning that if it is shorter than the length of a webpage it will leave just the
99
background-color showing. There are three options that can be used:
scroll – The image is attached to the border of the element and moves with the
‣
fixed – The image is attached to the element's view and does not scroll.
‣ element, but not the content.
Edition
local – The image is fixed to the content and always scrolls.
‣
background-position: location; — Similar to positioning elements, this
•
command will set the relative or absolute position of the background image to the
100
containing element.
Please support this work at
background-size: dimension; — This command is used to stretch or shrink a
•
101
background image by percent or the absolute x and y values. The entire screen can be
filled by specifying contain, which maintains the aspect ratio, or cover, which fills
http://syw2l.org
the screen. This command is not generally recommended for professional pages, as it can
drastically reduce the displayed quality of your image.
<!DOCTYPE html>
<html lang="en"> Free
<head>
<meta charset="utf-8">
<title>Bcckground Images</title>
<link href="bg.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Be Temeteh Iyiqi</h1>
<section> eBook
<h2>Cegir Olerena</h2>
<aside>
<h3>Libeti Roheri Nito</h3>
<ul>
Edition
99 https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
100 https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
101 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 89
Chapter 8 — CSS Positioning and Background Images
<li>Ga reto nierico reyosac!</li>
Free
<li>Pa pigi ipesu cegucat upegas zacin temey!</li>
<li>Rosie esonanev taralor pebon nudohe.</li>
</ul>
</aside>
<p>Renuv enikoyi cane libeti roheri nito go naret; yese ragop
erenusi gilire ciseh sicip cesopet tol acas! Pasetes konec nucit.
Manam ba la fenefob umetel re cikuc periyu. Redim dierac sonen
eBook
tet gelir peco ecolok esac sa, he citerov rupa etaro.</p>
<p>Asecuso aqu cegir ulerena mitadad ganacel eripey cacelef.
Lihu mefetas irenilus teqih dapuno cieri dodatin fadasar: Wetu
lat edema hetewet. Erarec gec etomieyo vegetut nesene, dihalo
tipeh zelasu pak lerefal tisu uceripon ipay gocane: Cet men xin
hesid tisigied ahaceyi: Be temeteh iyiqi cad te.</p>
</section>
<footer>
Edition
<p><small>© 2015 The SYW2L Project
<a href="http://www.syw2l.org"> http://www.syw2l.org
</a></small></p>
</footer>
</body>
</html>
Please support this work at
/* bg.css - Sample CSS Sheet for Background Images */
body { http://syw2l.org
background-image: url(bg01.png);
}
h1 {
background-image: url(bg03.png);
height: 45px; Free
padding-left: 45px;
background-repeat: no-repeat;
}
aside {
float: right;
margin: 10px 0px 10px 10px; eBook
border: 5px solid grey;
background-image: url(bg02.png);
background-repeat: repeat-y;
}
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 90
Chapter 8 — CSS Positioning and Background Images
Free
eBook
Edition
Illustration 27: Page with Background Images
Please support this work at
Advanced Topics for Exploration
http://syw2l.org
Multiple Background Images
It is possible to add more than one background-image to a webpage by adding more URLs to the
CSS command that are separated by commas. This would be written as such:
background-image: url(), url(), url(); Free
The order of display is determined by the order of the URLs, with the last image laying on top of
those below it.
Vocabulary eBook
• absolute • repeat
• background-image • repeat-x
• background-repeat • repeat-y
• clear • round
space
•
• float Edition
• no-repeat
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Discover the best professional documents and content resources in AnyFlip Document Base.
Search