HTML & CSS basics

All manuals

Now let’s move on to style creation. If you haven’t ever heard about HTML and CSS, don’t worry — we’ll fix it!

Every website is created with HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets). The HTML language "show" a browser how to display titles, paragraphs and images on a website.

For example, if you want to create the simplest webpage all you need is the code, given below.

By the way, you do not have to write HTML to make styles for websites; but you still need to know what it is and how it works. Pay attention to those code snippets that are marked with comments. HTML comments look <!--like this--> 

<!doctype html>
    <html lang="en">
    <head>
        <title>My awesome site</title>
    </head>
		<body>
			<!--
			The <body> tag defines the site's body.
			Every piece of code given in the angle brackets "<>" is a tag.
			Tags build the basic structure of any website.
			As a rule, everything given inside of the <body> tag
			is shown on a webpage.
			-->

			<h1>Hello world!</h1>
			<!--
			<h1> tag - is the first-level heading or the most important heading on a page.
			N.B. The majority of tags can be "opened" and "closed", e.g. <h1> (open) </h1> (closed)
			Text and images are usually located between tags.
			There are only a few tags, which you do not have to close.
			-->
			<p>Hello world!</p>
			<!--
			<p> is the paragraph tag. You can add it to a code snippet that defines
			how browser should display the text (in this case - as a paragraph)
			-->


			<img src="apple.jpg" alt="apple">
			<!--
			<img> - this tag allows you add pictures to website pages.
			You do not have to close this tag as it does not wrap anything.
			The image link is given here: src="apple.jpg".
			src is the acronym for the word "source";
			img is the acronym for the word "image",
			and alt="" - for the word "alternative"
			which is needed to add an alternative text
			that can be displayed instead of a source file’s name  by necessity.
			As you can see, it’s quite easy.
			-->

			<p>
				Some awesome text.
				<a href="awesome_link.html">
					Some awesome link
				</a>
			</p>
			<!--
			In this case the <p> tag wraps the <a> tag,
			which is used to create a hyperlink.
			Of course, you’ve already seen texts with 
			links and now you know how to make hyperlinks all by yourself!
			-->

		</body>
    </html>

Now when we’ve looked through the basic website structure let’s summarize all the main points:

HTML, or the Hyper Text Markup Language, is used to unite text and images in a solid structure. Browser follows HTML formatting to display any webpage in a proper way.
HTML-tags are used to make formatting.
<p>hello!</p>
Among other things, you can place text, images, buttons and icons into tags.
There are tags that you have to close. 
<p>hello!</p>
There are other tags that don’t require that. 
<img>
You can meet a great number of tags that are not included in our brief manual. If you meet an unfamiliar tag you can easily find detailed information about it on the Internet (e.g., http://www.w3schools.com/tags/).

How it works

Now when you know the basics of HTML layout, let’s move over to CSS. Without this language every website would have similar unattractive appearance. Using CSS, or Cascading Style Sheets, you can easily modify literally every element on a webpage: choose the green color for links and red color for fonts or make some of the interface elements semitransparent. And this is just the tip of the iceberg!

HTML and CSS are working together. HTML is used to build the structure, while CSS — to style the appearance of a document.

Look at the following structure: 

<p>text… text… text… text… text…</p>

If you want to set the red color for the text marked as paragraph, we can use CSS to select the <p> tags (comments in CSS are marked /* this way */): 

/* p is given without the angle brackets.
In CSS tags perform as selectors. 
CSS selectors are patterns used to "find"
an HTML tag or a group of HTML tags. 
We are going to tell you about various 
selector types and explain how to create them. 
‘color’ is a property in CSS.
CSS properties are used to style the appearance of HTML tags and content (e.g., text). 
E.g., you can set the red color of the text with the ‘color’ property.
CSS language supports text color names as well as rgb, hex or rgba values. 

N.B. Insert the colon character between a 
property name and a value. Remember, that a CSS 
declaration always ends with the semicolon character.  
For a single selector you can define several 
CSS properties, beside the color change */

p {
    color: red;
    line-height: 140%;
}

/* We’ve added another property: "line-height".
It defines the line spacing in the text. 
You can find all the length values on the Internet. */

Have a look to a more complex piece of code: 

<p>some text <a href="some-link.html">some link</a></p>
<a href="another-link.html">another link</a>

CSS allows us style the text and the link in different colors. How do we do it? 

p {
	color: red;
}

p a {
	color: green;
}

As you see, we can easily use CSS to select specific tags: for example, choose the a tag that is placed inside of the p (paragraph) tag and style this link in a different color. Now it’s also clear why we use the "cascading" adjective while speaking about CSS style sheets.

CSS also allows us to specify the affected elements. In this example we style the a tags that are placed inside of the p (paragraph) tags. Color of "another link" remains unaffected. To style all the a tags we write just "a", but not "p a". In this case CSS rule is applied to all a tags in a document.

CSS classes

Now then, we’ve finished two basic examples of elements stylization but there are even more curious examples. Let’s go on to one of them. 

<p class="one">an awesome green text</p>
<p class="two">an awesome red text</p>

What is a CSS class and how is it used in a code? It depends upon your goals.

The class attribute serves as a mediator between the HTML and CSS languages. For example, classes can be applied to separate different p tags from one another. You can use them to change the style of your paragraphs individually or all together.

If you need to change the color for all paragraphs, use the already-known code: 

p {
	color: red;
}

If you want to set the red color for the first paragraph and the green color for the second paragraph, apply classes, not paragraphs: 

.one {
	color: red;
}

.two {
	color: green;
}

When you select elements in CSS by class, insert the period character before the class name. In fine, do not place any character before a tag selector (i.e. a{ color: red; }), but start the class name with the period character to indicate the class selection.

More information

In fact, you can select different HTML tags in multiple ways. If you want to go deep into the subject, you’ll find a real bunch of useful articles on the Internet (e.g., CSS Introduction, CSS-Tricks (blog), CSS 2.1 Specification).

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.