Exploring Basic HTML
In this chapter, you discover the HTML basics, including basic HTML structure and how to make text appear in the browser. Next, you find out how to format text and display images in a web browser. Finally, you create your own, and pos sibly first, HTML website. You may find that HTML without any additional styling appears to be very plain, and doesn’t look like the websites you normally visit on the Internet. After you code a basic website using HTML, you will use additional languages in later chapters to add even more style to your websites.
What is HTML?
HTML (HyperText Markup Language) is a markup language. It's used to create websites. Writing, links, photos, and even sound and video can all be found on a webpage. HTML informs web browsers how to display websites. Meta data is also added to webpages via HTML. Meta data is information about a webpage, such as the name of the person who produced it. Meta data is often not shown by web browsers.
Cascading Style Sheets (CSS) and JavaScript are frequently used alongside HTML. CSS is used to alter the appearance of HTML. JavaScript instructs websites on how to act. It can also make HTML and CSS changes.
The World Wide Web Consortium creates HTML (W3C). HTML is available in a variety of formats. The current standard of care as of September 2018 is HTML 5 is the latest version, which is version 5.2.
What Does HTML Do?
HTML instructs the browser on how to display text and images in a web page. Recall the last time you created a document with a word processor. Whether you use Microsoft Word or WordPad, Apple Pages, or another application, your word processor has a main window in which you type text, and a menu or toolbar with multiple options to structure and style that text (see Figure l-l). Using your word
Understanding HTML Structure
HTML follows a few rules to ensure that a website always displays in the same way no matter which browser or computer is used. Once you understand these rules, you’ll be better able to predict how the browser will display your HTML pages, and to diagnose your mistakes when (not if!) the browser displays your web page dif ferently than you expected. Since its creation, HTML has evolved to include more effects, but the following basic structural elements remain unchanged.
You can use any browser to display your HTML files, though I strongly recom mend you download, install, and use Chrome or Firefox. Both of these browsers are updated often, are generally fast, and support and consistently render the widest variety of HTML tags.
HTML uses special text keywords called elements to structure and style a website. The browser recognizes an element and applies its effect if the following three conditions exist:
» The element is a letter, word, or phrase with special meaning. For example, hl is an element recognized by the browser to apply a header effect, with bold text and an enlarged font size.
» The element is enclosed with a left-angle bracket (<) and right-angle bracket (>). An element enclosed in this way is called a tag (such as, for example, <hl >).
» An opening tag (<element>) is followed by a closing tag (</element>). Note that the closing tag differs from the opening tag by the addition of a forward slash after the first left bracket and before the element (such as, for example, </hl>).
Some HTML tags are self-closing, and don't need separate closing tags, only a forward slash in the opening tag. For more about this topic, see the section, "Getting Familiar with Common HTML Tasks and Tags," later in this chapter.
When all three conditions are met, the text between the opening and closing tags is styled with the tag’s defined effect. If even one of these conditions is not met, the browser just displays plain text.
For a better understanding of these three conditions, see the following example code:
<hl>This is a big heading with all three conditions</hl>
hl This is text without the < and > sign surrounding the tag /hl
<rockstar>This is text with a tag that has no meaning to the browser</rockstar> This is regular text
You can see how a browser displays this code in Figure 1-2.
The browser applies a header effect to “This is a big heading with all three conditions” because hl is a header tag and all three conditions for a valid HTML tag exist:
» The browser recognizes the hl element.
» The hl element is surrounded with a left (<) and right angle bracket (>). » The opening tag (<hl>) is followed by text and then a closing tag (</hl>).
Notice how the hi tag itself does not display in the heading. The browser will never display the actual text of an element in a properly formatted HTML tag.
The remaining lines of code display as plain text because they each are missing one of the conditions. On the second line of code, the <hl> tag is missing the left and right brackets, which violates the second condition. The third line of code violates the first condition because rockstar is not a recognized HTML element. (Once you finish this chapter, however, you may feel like a rockstar!) Finally, the fourth line of code displays as plain text because it has no opening tag preceding the text, and no closing tag following the text, which violates the third condition.
Every left angle-bracket must be followed after the element with a right angle- bracket. In addition, every opening HTML tag must be followed with a closing HTML tag.
Over 100 HTML elements exist, and I cover the most important elements in the following sections. For now, don’t worry about memorizing individual element names.
HTML is a forgiving language, and may properly apply an effect even if you’re missing pieces of code, like a closing tag. However, if you leave in too many errors, your page won’t display correctly.
Standing head, title, and body above the rest
HTML files are structured in a specific way so browsers can correctly interpret the file’s information. Every HTML file has the same five elements: four whose open ing and closing tags appear once and only once, and one that appears once and doesn’t need a closing tag. These are as follows:
» ! DOCTYPE html must appear first in your HTML file, and it appears only once. This tag lets browsers know which version of HTML you're using. In this case, it's the latest version, HTML5. No closing tag is necessary for this element.
For HTML4 websites, the first line in the HTML file reads <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/
html4/strict.dtd”>
» html represents the root or beginning of an HTML document. The <html > tag is followed by first an opening and closing <head> tag, and then an opening and closing <body> tag.
» head contains other elements, which specify general information about the page, including the title.
» title defines the title in the browser's title bar or page tab.
Search engines like Google use title to rank websites in search results.
» body contains the main content of an HTML document. Text, images, and other content listed between the opening and closing body tag is displayed by the browser.
Here is an example of a properly structured HTML file with these five tags (see Figure 1-4):
<!DOCTYPE html> <html>
<head>
<title>Favorite Movie Quotes</title> </head>
<body>
<hl>"I'm going to make him an offer he can't refuse"</hl> <hl>"Houston, we have a problem"</hl>
<hl>"May the Force be with you"</hl> <hl>"You talking to me?"</hl>
</body> </html>
Getting Familiar with Common HTML Tasks and Tags
Your browser can interpret over a hundred HTML tags, but most websites use just a few tags to do most of the work within the browser. To understand this, let’s try a little exercise: Think of your favorite news website. Have one in mind? Now connect to the Internet, open your browser, and type the address of that website. Bring this book with you, and take your time — I can wait!
In the event you can’t access the Internet right now, take a look at the article from my favorite news website, The New York Times, found in Figure 1-5.
» Headlines: Headlines are displayed in bold and have a larger font size than the surrounding text.
» Paragraphs: Each story is organized into paragraphs with white space dividing each paragraph.
» Hyperlinks: The site's homepage and article pages have links to other stories, and links to share the story on social networks like Facebook, Twitter, and Google
» Images: Writers place images throughout the story, but also look for site images like icons and logos.
Writing headlines
Use headlines to describe a section of your page. HTML has six levels of headings (see Figure 1-6):
» hl, which is used for the most important headings
» h2, which is used for subheadings
» h3 to h6, which are used for less important headings
The browser renders hl headings with a font size larger than h2’s, which in turn is larger than h3’s. Headings start with an opening heading tag, the heading text, and then the closing heading tag, as follows:
<hl>Heading text here</hl>
<h2>Heading 2: "Houston, we have a problem"</h2>
<h3>Heading 3: "May the Force be with you"</h3>
<h4>Heading 4: "You talking to me?"</h4>
<h5>Heading 5: "I'll be back"</h5>
<h6>Heading 6: "My precious"</h6>
Always close what you open. With headings, remember to include a closing head ing tag, such as </hl>.
Organizing text in paragraphs
To display text in paragraphs, you can use the p element: Place an opening <p> tag before the paragraph, and a closing tag after it. The p element takes text and inserts a line break after the closing tag.
To insert a single line break after any element, use the <br> tag. The <br> tag is self-closing so no closing tag is needed, and </br> isn’t used.
Paragraphs start with an opening paragraph tag, the paragraph text, and then the closing paragraph tag:
<p>Paragraph text here</p>
Here are some additional examples of coding a paragraph (see Figure 1-7):
<p>Armstrong: Okay. I'm going to step off the LM now.</p>
<p>Armstrong: That's one small step for man; one giant leap for mankind.</p> <p>Armstrong: Yes, the surface is fine and powdery. I can kick it up loosely with my toe. It does adhere in fine layers, like powdered charcoal, to the
sole and sides of my boots.</p>
Linking to your (heart's) content
Hyperlinks are one of HTML’s most valuable features. Web pages that include hyperlinked references to other sources allow the reader to access those sources with just a click, a big advantage over printed pages.
Hyperlinks have two parts:
» Link destination: The web page the browser visits once the link is clicked.
To define the link destination in HTML, start with an opening anchor tag (<a>) that has an href attribute. Then add the value of the href attribute, which is the website the browser will go to once the link is clicked.
» Link description: The words used to describe the link.
To create a hyperlink, add text to describe the link after the opening anchor tag, and then add the closing anchor tag.
The resulting HTML should look something like this:
<a href="website url">Link description</a>
Here are three more examples of coding a hyperlink (see Figure 1-8):
<a href="http://www.amazon.com">Purchase anything</a>
<a href="http://www.airbnb.com">Rent a place to stay from a local host</a> <a href="http://www.techcrunch.com">Tech industry blog</a>
When rendering hyperlinks, the browser, by default, will underline the link and color the link blue. To change these default properties
The <a> tag does not include a line break after the link.
Google’s search engine ranks web pages based on the words used to describe a web page between the opening and closing <a> tags. This improved on search results from previous methods, which relied primarily on analyzing page content.
Adding images
Images spruce up otherwise plain HTML text pages. To include an image on your web page — your own or someone else’s — you must obtain the image’s web address. Websites like Google Images (images.google.com) and Flickr (www.flickr.com) allow you to search for online images based on keywords. When you find an image you like, right-click on the image, and select Copy Image URL.
Make sure you have permission to use an online image. Flickr has tools that allow you to search for images with few to no license restrictions. Additionally, websites pay to host images, and incur charges when a website directly links to an image. For this reason, some websites do not allow hotlinking, or linking directly from third-party websites (like you) to an image.
If you want to use an image that has not already been uploaded to the Internet, you can use a site like www.imgur.com to upload the image. After uploading, you will be able to copy the image URL and use it in your HTML.
To include an image, start with an opening image tag < img>, define the source of the image using the src attribute, and include a forward slash at the end of the opening tag to close the tag
<img src="http://upload.Wikimedia.org/wikipedia/commons/5/55/ Grace_Hopper.jpg"/>
<img src="http://upload.Wikimedia.org/wikipedia/commons/b/bd/ Dts_news_b ill_gates.jpg"/>
The image tag is self-closing, which means a separate </img> closing image tag is not used. The image tag is one of the exceptions to the always-close-what-you- open rule!
Styling Me Pretty
Now that you know how to display basic text and images in a browser, you should understand how to further customize and style them. HTML has basic capabilities to style content, and later chapters show you how to use CSS to style and position your content down to the last pixel. Here, however, I explain how to do some basic text formatting in HTML, and then you’ll build your first web page.
Highlighting with bold, italics, underline, and strikethrough
HTML allows for basic text styling using the following elements:
» strong marks important text, which the browser displays as bold
» em marks emphasized text, which the browser displays as italicized
» u marks text as underlined
» del marks deleted text, which the browser displays as strikethrough
The underline element is not typically used for text because it can lead to confu sion. Hyperlinks, after all, are underlined by default.
To use these elements, start with the element’s opening tag, followed by the affected text, and then a closing tag, as follows:
<element name>Affected text</element name>
Here are some examples (see Figure 1-10):
Grace Hopper,
<strong> a US Navy rear admiral </strong>, popularized the term "debugging."
Bill Gates co-founded a company called <em>Microsoft</em>.
Stuart Russell and Peter Norvig wrote a book called <u>Artificial Intelligence: A Modern Approach</u>.
Mark Zuckerberg created a website called <de1>Nosebook</de1> Facebook.
Steve Jobs co-founded a company called <del><em>Peach</em></del> <em>Apple</em>
You can apply multiple effects to text by using multiple HTML tags. Always close the most recently opened tag first and then the next most recently used tag. For an example, look at the last line of code in Figure 1-10, and the tags applied to the word Peach.
Raising and lowering text with superscript and subscript
Reference works like Wikipedia and technical papers often use superscript for foot notes and subscript for chemical names. To apply these styles, use the elements
» sup for text marked as superscript
» sub for text marked as subscript
To use these elements, start with the element’s opening tag, followed by the affected text, and then a closing tag as follows:
<element name>Affected text</element name>
Here are two examples (see Figure l-ll):
<p>The University of Pennsylvania announced to the public the first electronic general-purpose computer, named ENIAC, on February 14, 1946.<sup>l</sup></p> <p>The Centers for Disease Control and Prevention recommends drinking several glasses of H<sub>2</sub>0 per day.</p>
When using the superscript element to mark footnotes, use an <a> anchor tag to link directly to the footnote so the reader can view the footnote easily.
Getting More Out of HTML
shows the results of a search I conducted at Hipmunk.com for flights from New York to London. As with the Craigslist search results, you can limit the content displayed using the filters and search forms. Additionally, each flight list ing has multiple attributes, including price, carrier, departure time, landing time, and duration, which are similar to the attributes of the apartment listings. Com paring similar attributes from different flights is much easier with the Hipmunk layout, however. Notice how the content, in contrast to Craigslist’s, has a layout that allows your eye to follow a straight line down the page, so you can easily rank and compare different options.
Don’t underestimate the power of simplicity when displaying content. Although Craigslist’s content layout may look almost too simple, the site is one of the top 50 most visited websites in the world. Reddit.com is another example of a top 50 website with a simple layout.
Before displaying your content, ask yourself a few questions first:
» Does your content have one attribute with related data, or does it follow sequential steps? If so, consider using lists.
» Does your content have multiple attributes suitable for comparison? If so, consider using tables.
» Do you need to collect input from the visitor? If so, consider using forms.
Don’t let these choices overwhelm you. Pick one, see how your visitors react, and if necessary change how you display the content. The process of evaluating one version against another version of the same web page is called A/B testing.
Listing Data
You create lists by specifying the type of list as ordered or unordered and then adding each list item using the 1 i tag, as shown in the following steps:
1. Specify the type of list.
Add opening and closing list tags that specify either an ordered (ol)or unordered (ul) list, as follows:
• ol to specify the beginning and end of an ordered list
• ul to specify the beginning and end of an unordered list
2. Add an opening and closing tag (that is, < 1 i > and </l i >) for each item in the list.
For example, here's an ordered list:
<ol>
<li> List item #1 </li>
<li> List item #2 </li>
<li> List item #3 </li>
</ol>
Nesting lists
Additionally, you can nest lists within lists. A list of any type can be nested inside another list; to nest a list, replace the list item tag < 1 i > with a list type tag, either <ol> or <ul>.
The <hl> tag shown in this code sample is not necessary to create a list. I use it here only to name each list.
Every opening list or list item tag must be followed with a closing list or list item tag.
Putting Data in Tables
Basic table structuring
You create a table by following these steps:
1. Define a table with the table element.
To do this, add the opening and closing <table> tags.
2. Divide the table into rows with the tr element.
Between the opening and closing table tags, create opening <tr> tags and closing </tr> tags for each row of your table.
3. Divide rows into cells using the td element.
Between the opening and closing tr tags, create opening and closing td tags for each cell in the row.
4. Highlight cells that are headers using the th element.
Finally, specify any cells that are headers by replacing the td element with a th element.
Your table will have only one opening and closing <table> tag; however, you can have one or more table rows (tr) and cells (td).
The following example code shows the syntax for creating the table shown in Figure 2-7.
<table>
<th>Table header l</th> <th>Table header 2</th>
</tr>
<tr>
<td>Row #1, <td>Row #1,
</tr> <tr>
<td>Row #2, <td>Row #2,
</tr>
</table>
Stretching table columns and rows
<tr>
<td colspan="2">
<strong>Total Revenue</strong> </td>
<td>
< strong >7,872,000 </strong > </td>
<td>
< strong > 5,089,000 </strong > </td>
<td>
<strong>3,711,000</strong> </td>
</tr>
Aligning tables and cells
table2-1 Table Attributes Replaced by CSS
Attribute Name Possible Values Description
align left center right Position of table relative to the containing document according to the value of the attribute. For example, align="right" positions the table on the right side of the web page.
width pixels % (*) Width of table measured either in pixels on-screen or as a
percentage of the browser window or container tag.
border pixels (*) Width of table border in pixels.
<table align="right" width=50% border=l>
<tr>
<td>The Social Network</td> <td>Generation Like</td>
</tr> <tr>
<td>Tron</td> <td>War Games</td> </tr>
</table>
Always insert attributes inside the opening <html> tag, and enclose words in quotes.
Table Row Attributes Replaced by CSS
Attribute Name Possible Values Description
align left right center justify Horizontal alignment of a row's cell contents according to the value of the attribute. For example, align="right" positions a row's
cell contents on the right side of each cell.
valign top middle bottom Vertical alignment of a row's cell contents according to the value of the attribute. For example, al ign="bottom" positions a row's cell contents on the bottom of each cell.
The td element has four deprecated attributes you need to know — a 1 ign, va 1 ign, width, and height
Table Cell Attributes Replaced by CSS
Attribute Name Possible Values Description
align left right center justify Horizontal alignment of a cell's contents according to the value of the attribute. For example, al ign="center" positions the cell's contents in the center of the cell.
valign top middle bottom Vertical alignment of a cell's contents according to the value of the attribute. For example, al ign="middle" positions a cell's contents in the middle of the cell.
width pixels (#) % Width of a cell measured either in pixels on-screen or as a percentage of the table width.
height pixels (#) % Height of a cell measured either in pixels on-screen or as a percentage of the table width.
<table align="right" width=50% border=l>
<tr align="right" valign="bottom">
<td height=100>The Social Network</td> <td>Generation Like</td>
</tr> <tr>
<td height=200 align="center" valign="middle">Tron</td> <td align="center" valign="top" width=20%>War Games</td>
</tr> </table>
Remember, these attributes are no longer supported and should not be used in your code.
Filling Out Forms
Forms allow you to capture input from your website visitors. Until now we have displayed content as-is, but capturing input from visitors allows you to do the following:
» Modify existing content on the page. For example, price and date filters on airline websites allow for finding a desired flight more quickly.
» Store the input for later use. For example, a website may use a registration form to collect your email, username, and password information to allow you to access it at a later date.
Understanding how forms work
Forms pass information entered by a user to a server by using the following process:
1 • The browser displays a form on the client machine.
2. The user completes the form and presses the Submit button.
3. The browser submits the data collected from the form to a server.
4. The server processes and stores the data and sends a response to the client machine.
5. The browser displays the response, usually indicating whether the submission was successful.
for an additional discussion about the relationship between the client and server.
A full description of how the server receives and stores data (Steps 3 to 5) is beyond the scope of this book. For now, all you need to know is that server-side programming languages such as Python, PHP, and Ruby are used to write scripts that receive and store form submissions.
Forms are very flexible, and can record a variety of user inputs. Input fields used in forms can include free text fields, radio buttons, checkboxes, drop-down menus, range sliders, dates, phone numbers, and more. Additionally, input fields can be set to initial default values without any user input.
Selected Form Attributes
Attribute Name Possible Values
type checkbox,email, submit, text ,password, radio
value text
Creating basic forms
You create a basic form by
1. Defining a form with the form element.
Start by adding an opening <form> tag and closing </form> tag.
2. Using the action attribute, specify in the form element where to send form data.
Add an action attribute to your opening < form> tag and set it equal to the URL of a script that will process and store the user input.
3. Using the method attribute, specify in the form element how to send form data.
Add a method attribute to your opening < form> tag and set it equal to POST. The method attribute is set equal to GET or POST. The technicalities of each are
beyond the scope of this book, but, in general, POST is used for storing sensitive information (such as credit card numbers), whereas GET is used to allow users to bookmark or share with others the results of a submitted form (for example, airline flight listings).
4. Providing a way for users to input and submit responses with the input element.
Between the opening <form> and closing </form> tags, create one <input> tag. Your form will have only one opening and closing < form> tag; however, you
will have at least two <input> tags to collect and submit user data.
5. Specify input types using the type attribute in the input element. For this example, set the type attribute equal to "text".
The < input> tag doesn't have a closing tag, which is an exception to the "dose every tag you open" rule. These tags are called self-closing tags, and you can see more examples in Book 3, Chapter 1.
6. Finally, create another < input> tag and set the type attribute equal to submit.
<form action="maiIto:nikhi1.abraham@gmai1.com" method="POST"> <input type="text" value="Type a short message here">
<input type="submit"> </form>
Practicing More with HTML
Practice your HTML online using the Codecademy website. Codecademy is a free website created in 2011 to allow anyone to learn how to code right in the browser, without installing or downloading any software. Practice all the tags (and a few more) that you find in this chapter by following these steps:
1. Open your browser ,, and click the link
2. If you have a Codecademy account, sign in.
Signing up is discussed in Book 1, Chapter 3. Creating an account allows you to save your progress as you work, but it's optional.
3. Navigate to and click HTML Basics II to practice creating lists, and HTML Basics III to practice creating tables.
Background information is presented in the upper-left portion of the site, and instructions are presented in the lower-left portion of the site.
4. Complete the instructions in the main coding window. As you type, a live preview of your code is generated.
5. After you have finished completing the instructions, click the Save and Submit Code button.
If you followed the instructions correctly, a green checkmark appears, and you proceed to the next exercise. If an error exists in your code, a warning appears with a suggested fix. If you run into a problem ora bug you cannot fix, click the hint, .
Download css
Getting Stylish with CSS
What Does CSS Do?
CSS styles HTML elements with greater control than HTML does. Take a look at Figure 3-1. On the left, Facebook appears as it currently exists; on the right, how ever, the same Facebook page is shown without all the CSS styling. Without the CSS, all the images and text appear left-justified, borders and shading disappear, and text has minimal formatting.
CSS can style almost any HTML tag that creates a visible element on the page, including all the HTML tags used to create headings, paragraphs, links, images, lists, and tables that I showed you in previous chapters. Specifically, CSS allows you to style
» Text size, color, style, typeface, and alignment » Link color and style
» Image size and alignment
» List bullet styles and indentation
» Table size, shading, borders, and alignment
CSS styles and positions the HTML elements that appear on a web page. However, some HTML elements (for example, <head>) aren’t visible on the page and aren’t styled using CSS.
You may wonder why creating a separate language like CSS to handle styling was considered a better approach than expanding the capabilities of HTML. There are three reasons:
» History: CSS was created four years after HTML as an experiment to see whether developers and consumers wanted extra styling effects. At the time, it was unclear whether CSS would be useful, and only some major browsers supported it. As a result, CSS was created separately from HTML to allow developers to build sites using just HTML
» Code management: Initially, some CSS functionality overlapped with existing HTML functionality. However, specifying styling effects in HTML results in cluttered and messy code. For example, specifying a particular font typeface in HTML requires that you include the font typeface attribute in every paragraph (<p>) tag. Styling a single paragraph this way is easy, but applying the font to a series of paragraphs (or an entire page or website) quickly becomes tedious. By contrast, CSS requires the typeface to be specified only
Basic Web Coding
CSS Structure
CSS follows a set of rules to ensure that websites will be displayed in the same way
no matter the browser or computer used. Sometimes, because of varying support
of the CSS standard, browsers can and do display web pages differently. Never theless, generally speaking, CSS ensures that users have a consistent experience across all browsers.
Every web browser will interpret CSS rules to style your HTML, though I strongly recommend you download, install, and use Chrome or Firefox.
Choosing the element to style
selector {
property: value;
}
A CSS rule is comprised of three parts:
» Selector: The HTML element you want to style.
» Property: The feature of the HTML element you want to style, for example, font typeface, image height, or color.
» Value: The options for the property that the CSS rule sets. For example, if color were the property, the value would be red.
The selector identifies which HTML element you want to style. In HTML, an element is surrounded by angle brackets, but in CSS, the selector stands alone. The selec tor is followed by a space, an opening left curly bracket ({), property with a value, and then a closing right curly bracket (}). The line break after the opening curly bracket, and before the closing curly bracket is not required by CSS — in fact, you could put all your code on one line with no line breaks or spaces. Using line breaks is the convention followed by developers to make CSS easier to modify and read.
You can find curly brackets on most keyboards to the right of the P key.
The following code shows you an example of CSS modifying a specific HTML
element. The CSS code appears first, followed by the HTML code that it modifies:
The CSS:
hl {
font-family: cursive;
}
And now the HTML:
<hl>
Largest IPOs in US History </hl>
<ul>
<li>2014: Alibaba - $20B</li> <li>2008: Visa - $18B</li>
</ul>
The CSS selector targets and styles the HTML element with the same name (in this case, <hl> tags). For example, in Figure 3-2, the heading “Largest IPOs in US History,” created using the opening and closing <hl> tag is styled using the hl selector, and the font-fami ly property with cursive value.
My property has value
CSS syntax requires that a CSS property and its value appear within opening and closing curly brackets. After each property is a colon, and after each value is a semicolon. This combination of property and value together is called a declaration, and a group of properties and values is called a declaration block.
Let us look at a specific example with multiple properties and values:
hl {
font-size: 15px; color: blue;
}
Common CSS Tasks and Selectors
Although CSS includes over 150 properties and many values for each property, on modern websites, a handful of CSS properties and values do the majority of the work. In the previous section, when you “hacked” the CSS on a live website, you changed the heading color — a common task in CSS. Other common tasks per formed with CSS include
» Changing font size, style, font family, and decoration
» Customizing links including color, background color, and link state » Adding background images and formatting foreground images
Font gymnastics: Size, color, style, family, and decoration
CSS lets you control text in many HTML elements. The most common text-related CSS properties and values are shown in Table 3-1.1 describe these properties and values more fully in the sections that follow.
Common CSS Properties and Values for Styling Text
Property Name Possible Values Description
font-size pixels (#px)%em (#em) Specifies the size of text measured either in pixels, as a percentage of the containing element's font size, or with an em value which is calculated by desired pixel value divided by containing element font size in pixels. Example: font-size: 16px;
color name hex code rgb value Changes the color of the text specified using names (color: blue;), hexadecimal code (color:
#0000FF;), or RGB (red, green, and blue) value (color: rgb(0,0,255);).
font-style normal italic Sets font to appear in italics (or not).
font-weight normal bold Sets font to appear as bold (or not).
font-family font name Sets the font typeface. Example: font-fami ly: serif;
text-decoration none underline line-through Sets font to have an underline or strikethrough (or not).
Setting the font-size
As in a word processor, you can set the size of the font you’re using with CSS’s font-size property. You have a few options for setting the font size, and the most common one is to use pixels, as in the following:
p{
font-size: 16px;
}
In this example, I used the p selector to size the paragraph text to 150 percent of the default size. If the browser’s default font size was set at 16 pixels, this para graph’s font would appear sized at 24 pixels (150 percent of 16).
A font-size equal to lpx is equivalent to one pixel on your monitor, so the actual size of the text displayed varies according to the size of the monitor. Accordingly, for a fixed font size in pixels, the text appears smaller as you increase the screen resolution.
Setting the color
The color property sets the color in one of three ways:
» Name: One hundred forty-seven colors can be referenced by name. You can reference common colors, such as black, blue, and red, along with uncommon colors, such as burlywood, lemon chiffon, thistle, and rebeccapurple.
Rebecca Meyer, the daughter of prominent CSS standards author Eric Meyer,
In response, the CSS standardization committee approved adding a shade of purple called rebecca purple to the CSS specification in Rebecca's honor. All major Internet browsers have implemented support for the color.
» Hex code: Colors can be defined by component parts of red, green, and blue, and when hexadecimal code is used, over 16 million colors can be referenced. In the code example, I set the hl color equal to #FF0000. After the hashtag, the first two digits (FF) refer to the red in the color, the next two digits (00) refer to the green in the color, and the final two digits (00) refer to the blue in the color.
» RGB value: Just like hex codes, RGB values specify the red, green, and blue component parts for over 16 million colors. RGB values are the decimal equivalent to hexadecimal values.
Don't worry about trying to remember hex codes or RGB values. You can easily identify colors using an online color picker such as the one at www.
