Summary of “Introduction to HTML and CSS”

HTML

HTML stands for “Hypertext Markup Language”.

HTML is responsible for the content of the webpage. It’s formed of tags. Each tag consists of a name enclosed between the “less than” and “greater than” signs. Tags look like this: <h1>, <p>, <ul>.

Paired tags

Tags come in two varieties: paired and single. Paired tags can enclose text as well as other tags. Paired tags, in contrast to single tags, have a second half: the closing tag:

<h1>Heading text</h1>

A closing tag has the character / (a forward slash) before its name, as in </h1>.

Other tags can be inserted inside paired tags. For example, this is true of lists:

<ul>
  <li>List item</li>
</ul>

Nested tags always need to be closed in the correct order. A nested tag cannot be closed after a parent tag:

<ul><li>List item</ul></li> <!-- Bad  -->
<ul><li>List item</li></ul> <!-- Good -->

Not all tags can be nested inside other tags. For example, the tag <h1> cannot be nested inside <p>.

Single tags

There are more than just paired tags. There are also single tags. For example, the <img> tag will allow you to add an image to the markup.

<img> by itself does not make sense. In order for this tag to be useful, we need to write an address inside it that points to the image location. This is done using the src attribute:

<img src="muffin.png">

A tag can have several attributes. In this case, they are separated by spaces:

<tag attribute1="value1" attribute2="value2"> 

For example, if you wish, you can set the image size:

<img src="muffin.png" width="200" height="100">

Comments

Code or explanatory text between <!-- and --> is treated as an HTML comment and is not displayed as page content. Removing these markers lets the browser read the code as HTML again; this is called “uncommenting”. Comments are typically used to temporarily disable any code or leave hints and explanations.

CSS

CSS stands for “Cascading Style Sheets”.

The CSS language is responsible for the appearance of a webpage.

You can use CSS to set styles such as width, height, margins, text color, font size and background. Write each property and its value in this format:

property: value;

For example:

color: red;
padding: 10px;

Styles are often added using the class attribute.

For example, to apply the styles defined by the .feature-kitten rule to a <p> tag, we add the feature-kitten class to that tag in the markup:

<p class="feature-kitten">...</p>

CSS rules

A CSS rule is a group of properties and their values, which are applied to the tags that are indicated by the selector.

It is formed like this:

selector {
  property1: value;
  property2: value;
}

You can select tags for styling by their class names or tag names. The selector determines which tags the CSS rule applies to. Tag selectors are the simplest: they select all tags with the specified name.

p { color: red; }

In the example, the selector is p, and it selects all tags with the name p (that is, the <p> tags), but it won’t select tags with other names, such as h1.

When styling is defined by classes, styles are applied only to tags with these classes.

.class_name {
  property: value;
}

Mixing classes

An HTML element can have any number of classes. They are listed in the class attribute and separated by spaces, for example:

<li class="product">Product</li>
<li class="product hit">Product, which is one of our bestsellers, too</li>
<li class="product hit sale">Product, one of our bestsellers and on sale, too!</li>

Usually, one class defines the shared styles, while additional classes define variations on that design.

Comments

CSS also supports comments. Unlike HTML comments, CSS comments enclose code or notes between the markers /* and */.

Congratulations!

Muffin looks forward to meeting you again soon, to learn more in Chapter Two. Now, pat yourself on the back—you’ve learned a lot!