HTML and CSS are two of the most fundamental building blocks of the internet. HTML, which stands for HyperText Markup Language, is the standard language used to create web pages. It provides the structure of a web page by defining the elements, such as headings, paragraphs, images, and links. CSS, which stands for Cascading Style Sheets, is used to control the presentation of a web page, including the layout, colors, fonts, and other visual aspects.
Together, HTML and CSS form the backbone of the web and are essential skills for anyone interested in web development.
A basic HTML web page skeleton
Every HTML page has a basic skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Skeleton</title>
</head>
<body>
<h1>This is a static HTML Skeleton!</h1>
</body>
</html>
In HTML each code block is a tag and there are several tags to build a web page. above the code block, there is an opening and closing HTML tag, and there are two children called head and body.
The head tag contains the
titleand other meta tags to show the page title and meta-information about the websiteThe body tag contains the whole website content that is visible to the end user.
Live Preview:
Let's add a little bit of CSS to make it beautiful
there are several ways to include CSS in an HTML page. Here we will see the top 3 ways to add CSS into HTML:
Add inline CSS as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Add CSS</title>
</head>
<body style="background-color: azure;">
<main
style="
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
"
>
<h1 style="color: crimson;">Add CSS to make the web page beautiful.</h1>
</main>
</body>
</html>
Live Preview:
Another way to add CSS in an HTML file using Style tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS in style tag of the HTML head section</title>
<style>
body {
background-color: lightseagreen;
}
main {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
h1 {
color: moccasin;
}
</style>
</head>
<body>
<main>
<h1>Add CSS to make the web page beautiful.</h1>
</main>
</body>
</html>
Live Preview:
The most common way to use CSS is by adding an external CSS file:
In the external CSS approach, HTML and CSS reside in separate files and link together via a special link tag
Let’s create two files index.html for HTML and style.css for CSS then add the following HTML code to the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Add External CSS</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main>
<h1>Add CSS to make the web page beautiful.</h1>
</main>
</body>
</html>
add the following CSS Code to the style.css file:
body {
background-color: burlywood;
}
main {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
h1 {
color: brown;
font-weight: 400;
font-style: italic;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
Here we link the CSS code to the HTML code via the below code:
<link rel="stylesheet" href="./style.css" />
Live Preview:
HTML Tags:
HTML tags, which are essentially snippets of code that define how web content should be displayed, are the building blocks of any web page.
While there are a plethora of HTML tags available, it’s not necessary to memorize all of them. Instead, it’s best to start with the most essential tags and build from there. Some of the most commonly used tags include those that define the overall structure of the page, such as <html>, <head>, and <body>. Other frequently used tags include <p> paragraphs, <h1> to <h6> headings of varying sizes, and <a> for creating hyperlinks.
Additionally, tags such as <img /> can be used to insert images into a web page, while <ul> and <ol> are used for creating lists. There are many other tags available for more specialized purposes, but it’s important to understand that not all tags are equally necessary or commonly used. By starting with the most common tags and gradually expanding your knowledge as needed, you can develop a strong understanding of HTML and create effective, engaging web pages.
CSS for Style
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in HTML. It is an integral part of web development and plays a significant role in creating visually appealing web pages.
To build a great website, it’s important to learn CSS and its features thoroughly. One of the key concepts in CSS is the box model, which describes how elements are rendered on a web page. Understanding the box model is essential for creating layouts and formatting elements on a page.
Flexbox is another powerful CSS feature that helps to create flexible and responsive layouts. It allows elements to be organized flexibly and dynamically, providing a better user experience across different devices. Grid is also a modern CSS feature that provides a more advanced way to create layouts and align elements on a page.
In addition to these features, modern CSS includes many other advanced techniques that can be used to create visually stunning web pages. These include animations, transitions, and transformations that can add dynamic effects to a page. Learning these features will help web developers create websites that are not only visually appealing but also provide a great user experience.
Conclusion
This article offers a great opportunity to learn the fundamental concepts of HTML and CSS, which are important building blocks of web development. By carefully studying and applying these concepts, you can create beautiful websites and expand your potential in this field.
Additionally, you can leverage the power of generative AI to enhance your learning experience and gain a deeper understanding of HTML and CSS. With this knowledge, you can take your web development skills to the next level and achieve great success in your career. Remember, mastering these skills takes time and effort, but it is worth it in the long run.
Credit
- Stock Images from Unsplash
Top comments (0)