OneBite.Dev - Coding blog in a bite size

learn html and css

Code snippet for how to learn html and css with sample and detail explanation

HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) are core technologies for structuring and styling web pages. Learning these languages will enable you to create tailor-made, effective web pages.

Introduction

Think of constructing a webpage as if you are building a house. HTML is the foundation and structure, while CSS is the color, design, and overall aesthetics. Together, they can build a dynamic and interactive webpage that can offer a more engaging user experience.

Code snippet: Creating a Simple HTML Webpage

One of the fundamental parts of HTML learning is creating a simple webpage. Below is a code snippet of a simple HTML webpage.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My first HTML webpage</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Code Explanation for Creating a Simple HTML Webpage

The DOCTYPE <!DOCTYPE html> declaration represents that the document is in HTML5.

The <html> tag indicates the root of an HTML document, which contains all other HTML elements.

The <head> element holds meta-information about the webpage that isn’t displayed on the webpage, but it can be seen in the page’s source code. For instance, <title> falls under <head>, which represents the title of the webpage displayed on the browser’s title bar or tab.

The <body> tag contains all the contents of the HTML document, such as text, hyperlinks, images, tables, lists, etc.

Lastly, <h1> is a header tag. The number next to ‘h’ specifies the level of the header. There are six levels of headers in HTML with <h1> being the highest level and <h6> being the lowest.

Code snippet: Styling the HTML Webpage with CSS

Let’s further color and style our simple HTML webpage with CSS.

h1 { 
  color: blue; 
  text-align: center;
}

body { 
  background-color: lightyellow;
}

Code Explanation for Styling the HTML Webpage with CSS

In the CSS code snippet, we have two sets of instructions.

First, h1 select all <h1> elements, and within the brackets, we specify the color of the text as blue and align the text to the center using text-align.

Secondly, the body selector styles all <body> elements. In this case, we change the background color of the webpage to light yellow using background-color.

Learning HTML and CSS can seem daunting at first, but through continual practice and exploration, these languages will become your stepping stone into the world of web development. Next time, we will delve into more complex HTML and CSS examples to further stretch your mastery over these languages. Stay tuned!

css