ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

So You Want To Make A Website? HTML & CSS Tutorial

Updated on January 8, 2014

Tutorial Introduction

I myself have been doing web design for about 3 years now. I have always since I started using the internet wondered how it works. Being naturally creative I automatically wanted to design websites. I wanted to be a part of the web revolution and establish my name on the internet as a "good" web designer. One problem I had when learning web design was tutorials where authors kind of assumed that I already knew things about web design. I often got frustrated and wanted to stop learning. With that being I said I will be trying to keep this tutorial clean, simple, and full of information that even the most novice of web designers will understand.

Source

What Are HTML & CSS?

HTML and CSS are the two main languages that make up what web design is today. HTML (hyper text markup language) is the structure of the page, while CSS (Cascading Style Sheets) make up the visual aspect of the page.


HTML is used to describe a web page. Without HTML there would be no content on the page, nothing to read, nothing to describe, nothing... CSS is used to describe the presentation of a web page. Without CSS the page would be very bland and lack personality, and quite frankly would be a pain to even look at. HTML files are saved with the .html extension while css files are saved with the .css extension.


HTML & CSS Syntax Examples

HTML and CSS have very simple and straight to the point syntax's. In this section I will briefly show what the syntax for each language looks like.

HTML

<p>Hi, I am a paragraph wrapped in a paragraph element!</p>

CSS

.p { color: #000; } 

List Of Important HTML Tags And Their Uses

  • <a> - Which is an anchor tag. Used to make Hyper.
  • <body> - Which makes up the body of a webpage.
  • <!DOCTYPE html> - Declares a document type.
  • <head> - Used for the heading of a webpage, not to be confused with a header.
  • <nav> - Used for navigation elements.
  • <ul> - Used for making unordered lists.
  • <ol> - Used for making ordered lists.
  • <li> - Used for list items.
  • <p> - Used for paragraphs.
  • <br> - Used for line breaks.
  • <code> - Used for displaying codes.
  • <header> - Used for introductory elements such as navigations, logos, headings, and whatever else you'd want to use to intrduce your page.
  • <footer> - Typically used for author credits, copyrights, or links to similar articles.

There are many more HTML tags out there and I'd suggest you get familiar with them all. At the end of this section I will provide you with a link to a good resource for just that.

https://developer.mozilla.org/en-US/docs/Web/HTML

List Of CSS Properties And Their Uses

  • background - This property sets a background to an element.
  • padding - This property sets the padding to an element. (Inner margin)
  • border - This property sets a border to an element.
  • margin - this property sets a margin to an element.
  • color - This property sets a font color to an element.
  • border-radius - This property sets a border radius to an element.
  • box-shadow - This property sets a box-shadow to an element.
  • width - This property sets the width of an element.
  • height - This property sets the height of an element.
  • text-align - This property sets an alignment for the text inside of an element.


There are many more CSS properties to be listed but it would be a pain to list all of them here. I will provide you a link where you can read up on a complete database of all of the CSS properties and the correct syntax to use each of them.

https://developer.mozilla.org/en-US/docs/Web/CSS

HTML Attributes

An attribute is a modifier of an HTML tag. Attributes usually come in name-pairs and are separated by an equal sign (=). Attributes are always written in the start tag of an HTML element.

HTML Attribute Example

<div class="" id="" style="">Content to be modified</div>

The Difference Between The Class And ID HTML Attributes

I see very much more than often the wrong use of the class and id HTML attributes. Most people do not know the difference because they basically do the same things... Think again, they are actually very different.


Class Attribute:

The class attribute unlike the id attribute can be used multiple times within an HTML document.

ID Attribute:

The ID attribute unlike the class attribute should only be used once per HTML document. You can also use the ID as a reference for anchor tags on the page to help users get to content easily.

External Stylesheets

Most professional web site designers prefer to keep HTML and CSS separate. This is good practice and very easy to do with a simple <link> tag in the <head> tag of you HTML document.

External Style Sheet Linking Example

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

Bro Tip: You may have noticed that the link tag does not come in pairs. This is because some HTML elements don't. These are called self closing tags. A few examples of HTML elements that do not have closing tags:

  • <br />
  • <input />
  • <link />

CSS Selectors

When styling your document you will be giving various HTML elements the id or class attribute, arguably the most used attribute you will have in your arsenal. Below I will show you the appropriate way to call and element using a CSS selector.

HTML Markup

<div class="class">This is a div tag with a class attribute.</div>
<div id="id">This is a div tag with an ID attribute.</div>

CSS Selector Example

.class { }
#id { }

To call a class you will use a period (.), to call an ID you will use pound sign (#).


Bro Tip: The name of a class or id can be anything you want it to be. As long as it is alphanumeric.

Basic Markup Of An HTML Page

<!DOCTYPE html>
<html>
   <head>
      <title>YOUR SITE TITLE</title>
      <link href="css/main.css" rel="stylesheet" />
   </head>
   <body>
   </body>
</html>
working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://corp.maven.io/privacy-policy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)