HTML and CSS Reference
In-Depth Information
Figure 1.1. The website we'll be building in this topic
Now, before we get into building our project, let's properly introduce the elements of CSS
and how it's used to style web pages.
How are web pages built?
Let's begin by briefly considering what exactly CSS is, and how it relates to a web page. Web
pages are built on
content
. Content is what you see when you visit a page. It might include
text, photos, graphics, and video. Content is stored using a language called HTML. You've
probably heard of it, but here's a very quick overview.
HTML consists of
elements
, many of which have what are called opening and closing
tags
.
These instruct web browsers how content (copy, photos, videos, and so on) should be presen-
ted on screen. For example:
<header>
<h1>RecipeFinder</h1>
</header>
In this case, the content that's visible on the page is the text “RecipeFinder.” Everything else
you see there (specifically the information inside the angle brackets) is HTML, and it's invis-
ible on the page when viewed in a browser. What it does is to help mark where sections of
content begin and end. For this reason
HTML
is what's called a markup language. In fact, it
stands for Hyper Text Markup Language.
As mentioned, this is not a topic on HTML, but if you want to learn more, two possible re-
sources are
SitePoint's online HTML Concepts
or the
Mozilla Developer Network's Introduc-
What Is CSS?
CSS
stands for Cascading Style Sheets and is a separate, but complementary, language to
HTML. CSS is what we use to apply styles to the content on our web page.
Let's use the HTML from the example above to give you a first taste of CSS. Don't worry if
this looks foreign to you right now—just become familiar with the look of the code:
