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 “more 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>

The closing tag of a set of paired tags is indicated using the character / (forward slash), which is written in front of the name.

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 that is enclosed between the characters <!-- and --> will not be recognized and are considered “commented out”. Commented-out code will only work if you delete these characters, which 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 set the parameters for any tag using CSS, such as the width and height, margins, color and size of the font, background and so on. All of these parameters can be configured using properties in the following format:

Property; value;

For example:

color: red;
padding: 10px;

Styles are often added using the class attribute.

For example, if we want certain described styles, for example, in the feature-kitten class to be applied to the <p> tag, then we should write the following 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 assign styles not only using the class attribute, but also with tags. The selector specifies which tags receive properties from the CSS rule. Tag selectors work easiest of all: they select all tags with a matching 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 mixing is implemented as follows: an overall design is applied to one class, and its modifications are described in additional classes.

Comments

Comments also exist in CSS. They differ from HTML comments insofar as the code or hints are written between the characters /* 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!