NaN.

TutorialWeb DevelopmentLast updated 1 month ago

Getting Started with HTML and CSS[ Edit ]

In this lesson, you’ll learn:

The basics of writing HTML and CSS
How to link HTML and CSS files together
How to view HTML in a browser
Why browsers display web pages differently and how to fix it

What is Web Development?

Web developers create documents that can be viewed on the internet, also known as web pages. These documents are usually written in a combination of computer languages called HTML (HyperText Markup Language) and CSS (Cascading Style Sheets).

HTML is used to write the actual document—mainly, the information and images that the web page displays. CSS is used to style the document—adding color, changing size, and creating the complicated web page designs you see today. HTML and CSS are not programming languages—they simply define content to be displayed on the internet.

Introducing HTML

HTML is used to define the elements of a page. Elements include titles, paragraphs, images, links, forms and more. These are the basic building blocks of a page.

Elements are created by writing tags, which are keywords surrounded by carats (< and >). For example, the HTML element for a paragraph is called p.

<p>Your text here.</p>

The first tag is called the opening tag, and the last tag, with the forward slash, is called the closing tag. Anything between the tags is what the element contains. This could be text or other elements. (Some tags don’t need a closing tag and don’t have any contents.)

You can define attributes of the element inside the opening tag. For example, to create a link element (<a></a>), you must specify the URL that it links to in an attribute called href. (Some elements require you to define attributes, and some don’t.)

<a href="www.google.com">Google</a>

This is what a default link looks like (zoomed in)

Note that the tag for a link is <a> since it's actually called Anchor Link.

You can add multiple attributes to an opening tag as long as you add a space between them. The below HTML defines an image by specifying the image’s file path (src), height, and width.

<img src="image.jpg" height="450" width"600" />

Also notice that in the img tag above, we closed the tag by ending it in />. So you can either write <img ... ></img> or just <img .../> if there is no content between the tag start and end (as is the case with img tags).

Creating an HTML document

Begin by creating a blank document in a plain text editor like WordPad (Windows), TextEdit (Mac), or other downloadable programs like Atom or Sublime Text.

Create a folder for your new web project and save the document inside the folder as index.html. The file extension must be .html for the file to display properly. Make sure you don't have something like index.html.txt

Now, copy and paste the following tags into your HTML document. These form the basis of every web page.

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

The <head> element includes all of the information about your document. None of the contents of <head> will be visible on the page, but they are important for the browser to display the page correctly.

The <body> element is where you will put all of the HTML elements that you want to display on the actual page. All contents of the page must be written between <body> and </body>. (This is very important!)

If you want to view your document in the browser, find the file on your computer and double-click it. If that doesn’t work, drag the file into an open browser window.

If you haven’t written anything in the body, you won’t see anything. If you update the HTML document, refresh the page in your browser to see the changes.

Introducing CSS

CSS is written to add style to an HTML document.

CSS uses selectors to select certain parts of an HTML document in order to apply new styles to them. You can select all elements of the same type, or you can select specific elements by their attributes, even creating custom attributes to fine-tune which elements you’d like to apply styles to.

Once the HTML elements are selected, you can list the properties you would like to change and define a new value for each.

The format is:

selector {
  property: value;
  property: value;
  ...
}

You can add as many property-value pairs as you’d like for each selector. By adding multiple “blocks” like the one above to your CSS document (using different selectors), you can create the styles of an entire page.

For instance, if you wanted to style all of the links (<a></a>) in your HTML document, you could write:

a {
  color: red;
  font-family: Helvetica;
  font-weight: bold;
}

Here, you start the first line with a because you want to style the link tag, which is wrapped in <a></a>. If you were styling a heading like <h1></h1>, your first line would've started with h1.

This is what the previous link looks like after applying the above styles:

This selects all items that match the tag name of a, then sets the font color property to a value of “red,” the font-family property to a value of “Helvetica,” and the font-weight property to a value of “bold.” (If a font-family is not available on your computer, it won’t display the font, and the browser will fall back to one of the available fonts.)

Creating a CSS Document

Inside the project folder you created, create another folder called css. Create a new document with your plain text editor and save it inside the css folder as style.css. Then, in your text editor, add this line to the very top of the new CSS document:

@charset "utf-8";

This is important for your browser to display the CSS correctly. Under the @charset line, you can add each of your styles on a new line to create your CSS document.

Linking HTML to CSS

The final step is to link the CSS document to your HTML document so the styles will be applied in your browser. Add this line inside the <head> element of your HTML document to “link” the CSS document to it.

<link rel="stylesheet" type="text/css" href="css/style.css" />

If you’ve placed your CSS file inside the css folder correctly, the two documents should now be linked. Try including the link styles above in your CSS document and adding an <a> tag to your HTML document to see if it turns red.

You can link multiple stylesheets to one HTML document by adding multiple link tags and changing the href attribute to match the file path of the CSS file you’d like to link.

As a rule, CSS should always be written in a separate file from the HTML document. This makes it easy for the browser to understand the information and display it correctly.

Your First Project

Okay, now it's time to implement some of the things you learned above. Suppose you want to make a personal website for yourself. For now, you will take the first step and just set up the project with an HTML and a CSS file, and make the home page display your name and style it a bit so that it looks like this:

Just the first step towards your own personal site!

If you get stuck along, you can take a peek at the full code below:

File: portfolio/home.html

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>John Doe</title>
  </head>
  <body>
    <h1>John Doe</h1>
  </body>
</html>

File: portfolio/css/style.css

@charset "utf-8";
h1 {
  font-family: Futura;
  font-weight: bold;
  font-size: 48px;
  text-transform: uppercase;
  text-align: center;
  margin: 100px auto;
  letter-spacing: 5px;
}

(Bonus) Problems with Browsers

Note that sections marked as Bonus are optional — you can safely skip these and carry on if you wish, but we do recommend coming back to them later.

All browsers are slightly different, and may display web pages differently. This can be fixed by including a reset CSS, which applies default styles to your page in order to erase all the differences among browsers. This creates a “blank slate” for web developers to start designing from. This is what a sample Reset CSS looks like:

/* http://meyerweb.com/eric/tools/css/reset/
    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, caption, 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%;
	font: inherit;
	vertical-align: baseline;
}
 
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, 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 {
	border-collapse: collapse;
	border-spacing: 0;
}

If a person hasn’t updated their browser in a long time, it may not display some of the latest features of HTML or CSS. This can be fixed by adding “fallbacks”--HTML and CSS that are designed to display only on older browsers that can’t use the latest features. Some people choose to ignore older browsers completely and ask users to upgrade to the latest version instead.

Now you know the very basic building blocks of Web Development! Go to the next lesson to dive deeper into the fundamentals of HTML.