If you can, imagine a time before the invention of the Internet. Websites did not exist and books, printed on paper and well bound, were their main source of information. It took a considerable amount of effort—and reading—to track down the exact information you were looking for.
Today you can open a web browser, jump to the search engine of your choice, and search for . Every conceivable piece of information is at your fingertips. And chances are someone somewhere built a website with your exact search in mind.
In this book, I’ll show you how to build your own websites using the two most dominant computer languages: HTML and CSS. .
Before we begin our journey to learn how to build websites with HTML and CSS, it’s important to understand the differences between the two languages, the syntax of each language, and some common terminology.
What are HTML and CSS?
HTML, HyperText Markup Language, provides structure and meaning to content by defining it as, for example, headings, paragraphs, or images. CSS, or Cascading Style Sheets, is a presentation language created to design the appearance of content, using, for example, fonts or colors.
The two languages, HTML and CSS, are independent of each other. and they should stay that way. CSS should not be written inside an HTML document and vice versa. As a general rule, HTML will always render content, and CSS will always render the appearance of that content.
With this understanding of the difference between HTML and CSS, let’s dive into HTML in more detail.
Understanding Common HTML Terms
When starting out with HTML, you are likely to encounter new and often strange terms. Over time, you’ll become more and more familiar with all of them, but the three common HTML terms to start with are elements, tags, and attributes.
Elements
Elements are designators They define the structure and content of objects within a page. Some of the most commonly used elements include multiple levels of headings (identified as the
to
elements) and paragraphs (identified as the
element); the list continues to include the ,
Elements are identified by the use of less than and parentheses angles greater than, , that surround the element name. Therefore, an element will look like this:
Tags
Using less than and greater than angle brackets around an element creates what is known as a label. Tags usually appear in pairs of opening and closing tags.
An opening tag marks the beginning of an element. It consists of a less than sign followed by the name of an element and then ending with a greater than sign; for example,
A closing tag marks the end of an element. It consists of a less than sign followed by a forward slash and the name of the element, and then ended with a greater than sign; for example,
.
The content between the opening and closing tags is the content of that element. An anchor link, for example, will have an opening tag of and a closing tag of . Whatever sits between these two tags will be the content of the anchor link.
So, the anchor tags will look a bit like this:
1 2…
Attributes
Attributes are properties that are used to provide additional information about an element. The most common attributes include the id attribute, which identifies an element; the class attribute, which classifies an element; the src attribute, which specifies a source for the embeddable content; and the href attribute, which provides a hyperlink reference to a linked resource.
Attributes are defined within the opening tag, after an element’s name. Attributes generally include a name and a value. The format of these attributes consists of the name of the attribute followed by an equals sign and then a quoted attribute value. For example, an element that includes an href attribute would look like this:
1 2Shay Howe
The above The code will display the text “Shay Howe” on the web page and take users to http://shayhowe.com/ when they click on the text “Shay Howe”. The anchor element is declared with the opening and closing tags that span the text, and the hyperlink referrer attribute and value are declared with href=”http://shayhowe.com” in the opening tag.
Summary of HTML syntax including an element, an attribute, and a tag
Now that you know what HTML elements, tags, and attributes are, let’s take a look at putting together our first web page. If something seems new here, don’t worry, we’ll figure it out as we go.
Setting up the HTML document structure
HTML documents are plain text documents saved with a .html file extension instead of a .txt file extension. To start writing HTML, you first need a plain text editor that you’re comfortable with. Unfortunately, this does not include Microsoft Word or Pages, as they are rich text editors. Two of the most popular plain text editors for writing HTML and CSS are Dreamweaver and Sublime Text. Free alternatives also include Notepad++ for Windows and TextWrangler for Mac.
All HTML documents have a required structure that includes the following declaration and elements: , , and .
The document type declaration, or , informs web browsers which version of HTML is being used and is placed at the beginning of the HTML document. Since we will be using the latest version of HTML, our document type declaration is simply . Following the document type declaration, the element signifies the beginning of the document.
Within the element, the element identifies the top of the document, including metadata (information that accompanies it). on the page). The content inside the element is not displayed on the web page itself. Instead, you can include the document title (displayed in the title bar in the browser window), links to any external files, or any other useful metadata.
All content visible within the web page will fall inside the element. A breakdown of the structure of a typical HTML document looks like this:
1 2 3 4 5 6 7 8 9 10 11 12
Hello world
This is a web page.
The code above displays the document beginning with the document type declaration, , followed directly by the element. Inside the element are the and elements. The element includes the character encoding of the page via the tag and the document title via the
Inside the element, let’s add the
and
. The
element should include the heading we want to include, let’s use “Style Conference” again, and the
element should include a simple paragraph to introduce our conference.
1 2 3 4 5
Style Conference
Every year the brightest web designers and front-end developers come to Chicago to talk about the latest technologies. Join us this August!
Now it’s time to see how we’ve done! Let’s find our index.html file (mine is inside the “styles-conference” folder on my desktop). Double-clicking this file or dragging it to a web browser will open it for us to review.
Our first steps in building our Style Conference website
Let’s change the subject a bit, away from HTML and take a look at CSS. Remember, HTML will define the content and structure of our web pages, while CSS will define the visual style and appearance of our web pages.
Understanding Common CSS Terms
In addition to HTML terms, there are some common CSS terms that you’ll want to familiarize yourself with. These terms include selectors, properties, and values. As with HTML terminology, the more you work with CSS, the more these terms will become second nature.
Selectors
As elements are added to a web page, they are you can style them using CSS. A selector designates exactly which element or elements within our HTML to target and apply styles to (such as color, size, and position). Selectors can include a combination of different qualifiers to select unique items, all depending on how specific we want to be. For example, we may want to select all paragraphs on a page, or we may want to select only a specific paragraph on a page.
Selectors generally point to an attribute value, such as an id or a value class, or select the type of element, such as
or
.
Within CSS, selectors are followed by square brackets, {}, which enclose the styles to be applied to the selected element . The selector here points to all
elements.
1 2p { … }
Properties
Once an element is selected, a property determines the styles that are given to it. will apply. element. Property names are found after a selector, within braces, {}, and immediately before a colon, :. There are numerous properties that we can use, such as background, color, font size, height and width, and new properties are often added. In the following code, we are defining the color and font size properties that will be applied to all
elements.
1 2 3 4 5p { color: …; font size: …; }
Values
So far we’ve selected an element with a selector and determined what style we’d like to apply with a property. Now we can determine the behavior of that property with a value. Values can be identified as the text between colons, : and semicolons, ;. Here we are selecting all the
elements and setting the color property value to orange and the font size property value to 16 pixels.
1 2 3 4 5p { color: orange; font size: 16px; }
To review, in CSS our set of rules starts with the selector, which is immediately followed by square brackets. Inside these brackets are declarations consisting of pairs of properties and values. Each declaration begins with a property, followed by a colon, the value of the property, and finally a semicolon.
It is common practice to indent property and value pairs within braces. As with HTML, these indentations help keep our code organized and readable.
CSS Outline including a selector , properties, and values
Knowing some common terms and general CSS syntax is a great start, but we have a few more things to learn before we dig too deep. Specifically, we need to take a closer look at how selectors work within CSS.
Working with Selectors
Selectors, as mentioned above, indicate which HTML elements are being styled. It’s important to fully understand how to use selectors and how you can take advantage of them. The first step is to become familiar with the different types of selectors. We’ll start with the most common selectors: type, class, and ID selectors.
Type Selectors
Type selectors target elements by their element type. For example, if we wanted to target all of the div elements,
CSS
1 2div { … }
HTML
1 2 3
Class Selectors
Class selectors allow us to select an element based on the value of the attribute of element class.Class selectors are a bit more specific than type selectors in that they select a particular group of elements rather than all elements of a type.
Class selectors allow us to apply the same styles to different elements at once by using the same class attribute value on multiple elements.
Within CSS, classes are indicated by a leading period, ., followed by the class attribute value. Here, the class selector will select any element that contains the awesome class attribute value, including division and paragraph elements.
CSS
1 2.cool { … }
HTML
1 2 3
…
ID Selectors
ID selectors are even more precise than class selectors, since they only target a single element at a time. Just as class selectors use the value of an element’s class attribute as a selector, ID selectors use the value of an element’s ID attribute as a selector.
Regardless of the type of element in the When they appear, ID attribute values can only be used once per page. If used, they should be reserved for meaningful elements.
Within CSS, ID selectors are indicated by a leading pound sign, #, followed by the value of the ID attribute. Here, the id selector will only select the element that contains the value of shayhowe’s id attribute.
CSS
1 2#shayhowe { … }
HTML
1 2
Additional selectors
Selectors are extremely powerful, and the selectors described here are the most common selectors you’ll encounter. These selectors are also just the beginning. Many more advanced selectors exist and are readily available. Once you’re comfortable with these selectors, don’t be afraid to look into some of the more advanced selectors.
Okay, it’s all starting to come together. We add elements to a page within our HTML, and then we can select those elements and style them using CSS. Now let’s connect the dots between our HTML and CSS, and make these two languages work together.
Referencing CSS
In order for our CSS to communicate with our HTML, we need to reference our CSS file inside our HTML. The best practice for referencing our CSS is to include all of our styles in a single external style sheet, which is referenced from the element of our HTML document. Using a single external style sheet allows us to use the same styles across an entire website and make changes quickly across the entire website.
To create our external CSS style sheet, we’ll want to use our CSS editor. choicetext again to create a new plain text file with a .css file extension. Our CSS file should be stored within the same folder, or subfolder, where our HTML file is located.
Within the element of the HTML document, the element is used to define the relationship between the HTML file and the CSS file. Since we’re linking to CSS, we use the rel attribute with a stylesheet value to specify their relationship. In addition, the href (or hyperlink reference) attribute is used to identify the location or path of the CSS file.
Consider the following example of an HTML document element referencing a sheet external style only.
1 2 3 4
For the CSS to render correctly, the attribute path The href value should map directly to where our CSS file is saved. In the example above, the main.css file is stored in the same location as the HTML file, also known as the root directory.
If our CSS file is inside a subdirectory or subfolder, the value of the attribute href needs to be mapped to this path accordingly. For example, if our main.css file were stored inside a subdirectory called stylesheets, the value of the href attribute would be stylesheets/main.css, using a forward slash to indicate that it’s moving to a subdirectory.
At this point our pages are starting to come alive, slowly but surely. We haven’t delved too deep into CSS, but you may have noticed that some elements have default styles that we haven’t declared in our CSS. That is the browser imposing its own preferred CSS styles for those elements. Fortunately, we can override these styles quite easily, which is what we’ll do next with CSS resets.
Using CSS resets
Each web browser has its own default styles for different elements. The way Google Chrome presents headings, paragraphs, lists, etc. it may be different from how Internet Explorer does. To ensure cross-browser compatibility, CSS resets have become widely used.
CSS resets take every common HTML element with a predefined style and provide a unified style for all browsers. These resets typically involve removing any additional size, margins, padding, or styles and toning down these values. Because CSS cascades from top to bottom—more on that soon—our reset should be at the top of our stylesheet.Doing so will ensure that those styles are read first and that all the different web browsers work from a common baseline.
There are a ton of different resets available to use, all of which have their own own strengths. One of the most popular resets is Eric Meyer’s reset, which has been adapted to include styles for the new HTML5 elements.
If you’re feeling a little more adventurous, there’s also Normalize.css, created by Nicolas . Gallagher. Normalize.css does not focus on using a hard reset for all common elements, but on setting common styles for these elements. It requires a stronger understanding of CSS, as well as an awareness of how you’d like your styles to look.
All told, there are a handful of things to keep in mind when writing CSS. The good news is that anything is possible, and with a little patience we’ll figure it all out.
In Practice
Picking up where we last left off on our conference website Let’s see if we can add some CSS.
-
Inside our “styles-conference” folder, create a new folder called “assets”. We will store all of our website assets, such as our style sheets, images, videos, etc., in this folder. For our stylesheets, let’s go ahead and add another folder called “stylesheets” inside the “assets” folder.
-
Using our text editor, create a new file main call. css and save it inside the “style sheets” folder we just created.
-
Looking at our index.html file in a web browser, we can see that
and
elements have default CSS styles. Specifically, they each have a unique font size and spacing around them. Using Eric Meyer’s reboot, we can tone down these styles, allowing each to be styled from the same base. To do this, head over to Eric’s website, copy his reset, and paste it at the top of our main.css file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48/* http://meyerweb.com/eric/tools/css/reset/ 2.v2 .0 | 20110126 License: none (Public Domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, title, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font size: 100%; source: inherit; vertical alignment: baseline; } /* Resetting HTML5 display functionality for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, navigation, section { display: block; } body { line height: 1; } ol, ul { list style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ”; content: none; } table { edge-collapse: collapse; border spacing: 0; }
-
With our main.css file starting to take shape, let’s connect it to our index.html file. Opening the index.html file in our text editor, let’s add the element inside our element, right after the
element.</p> </li> <li> <p>Because we We’ll reference a style sheet inside the element, add the relationship attribute, rel, with a style sheet value.</p> </li> <li> <p>We also want to include a reference to hyperlink, using the href attribute, to our main.css file. Remember, our main.css file is stored inside the “stylesheets” folder, which is located inside the “assets” folder. Therefore, the value of the href attribute, which is the path to our main.css file, should be assets/stylesheets/main.css.</p> <p> 1 2 3 4 5 6 <title>Style Conference
Time of review our work and see if our HTML and CSS get along. Now, opening our index.html file (or refreshing the page if it’s already open) within a web browser should show slightly different results than above.
Our Styles Conference website with a CSS reboot
Demo and source code
You can also see the below Styles Conference website in its current state how to download the source code of the website in its current state.
View the Styles Conference website or download the source code (zip file)
Summary
Then away, very good! We’ve taken some important steps in this lesson.
Just think, now you know the basics of HTML and CSS.As we continue and you spend more time writing HTML and CSS, you’ll become much more comfortable with both languages.
To summarize, we’ve covered the following so far:
<ul
Now let’s take a closer look at HTML and learn a bit about semantics.
Resources and Links
- Common HTML Terms via Scripting Master
- CSS Terms and Definitions via Impressive Webs
- CSS Tools: CSS Reset via Eric Meyer
- Normalize.css via Nicolas Gallagher
- An introduction to HTML and CSS via Shay Howe
- Share on Twitter
- Share on Facebook
- Share on Google+
.