SitesByYogi

Getting Started With HTML & CSS

Posted 10 months ago by yogi

Part 1: Learning HTML

HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. In this tutorial, you will learn the basics of HTML and how to create your own web pages.

Prerequisites

To follow along with this tutorial, you need a basic understanding of computer operations and a text editor to write HTML code. You don’t need any prior programming knowledge.

 

Getting Started

  1. Open a text editor (e.g., Notepad, Sublime Text, Visual Studio Code).
  2. Create a new file and save it with a .html extension (e.g., index.html).

 

HTML Document Structure

An HTML document consists of several elements that define the structure and content of a web page. Here’s a basic structure for an HTML document:

  1. <!DOCTYPE html>: This declaration specifies that the document is an HTML5 document.
  2. <html>: This element represents the root of an HTML document.
  3. <head>: This element contains meta-information about the HTML document.
  4. <title>: This element defines the title of the web page, which appears in the browser’s title bar or tab.
  5. <body>: This element contains the visible content of the web page.

 

Adding Content

You can add various types of content within the <body> element. Here are some common elements:

 

Headings

 

Paragraphs

 

Links

 

Images

 

Lists

 

Part 2: Introduction To CSS

CSS Selectors

CSS uses a simple syntax to define styles. Here’s an example of CSS syntax:

selector: The selector selects the HTML element(s) to which the styles will be applied.

property: The property specifies the aspect of the element to be styled (e.g., color, font-size, background-color).

value: The value sets the specific styling value for the property (e.g., red, 16px, #F0F0F0).

 

Styling With CSS

To style your web page, you can use CSS (Cascading Style Sheets). Here’s a basic example of applying CSS to an HTML document:

Inline CSS

 

Internal CSS

 

External CSS

Create a new file with a .css extension (e.g., styles.css), and link it to your HTML document:

 

Part 3: CSS Selectors

CSS selectors target specific HTML elements to apply styles. Here are some commonly used selectors:

Element Selector

Select elements based on their HTML tag

 

Class Selector

CSS uses a simple syntax to define styles. Here’s an example of CSS syntax:

 

ID Selector

CSS uses a simple syntax to define styles. Here’s an example of CSS syntax:

 

Descendant Selector

CSS uses a simple syntax to define styles. Here’s an example of CSS syntax: