, learn the steps in creating a portfolio website and key features to note.png)
Description
A developer's journey through code. I build, I break, and I write about it. Explore articles on modern software development, programming tips, and more.
HTML and CSS Basics for Beginners
Published in: 2023-10-12 19:32:49 Author: SunshineIHCTS Section: HTML and CSS
In this article, I will take you on a step-by-step journey through the fundamentals of HTML and CSS, the building blocks of the web. If you are new to web development, you should pay close attention to what I have to write in this article today.
HTML: The Structure of Web Pages
HTML, which stands for HyperText Markup Language, is the foundation of web development. It is a markup language that structures content on the internet. HTML uses a system of elements enclosed in tags to define the various parts of a web page.
Anatomy of an HTML Document
Every HTML document starts with a <!DOCTYPE> declaration and an <html> element. Within the <html> element, you will typically find two main sections: <head> and <body>. The <head> contains meta-information about the page, while the <body> holds the content you see in your web browser.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple web page.</p>
</body>
</html>
Common HTML Elements
<h1>,<h2>,<h3>, ...<h6>: Headings of various levels.<p>: Paragraphs.<a>: Links.<img>: Images.<ul>,<ol>,<li>: Lists (unordered and ordered).<div>: A container for other HTML elements.
CSS: Styling the Web
Cascading Style Sheets (CSS) is the language used to describe the look and formatting of a document written in HTML. CSS allows you to control the layout, colors, fonts, and spacing of your web pages.
Adding CSS to HTML
You can include CSS in your HTML document by using the <style> element within the <head> section or by linking to an external CSS file using the <link> element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Your HTML content here -->
</body>
</html>
CSS Selectors and Properties
CSS uses selectors to target HTML elements and apply styles. You can change properties like color, font-size, and margin to control the appearance.
/* styles.css */
h1 {
color: #FF5733;
font-family: Arial, sans-serif;
}
p {
font-size: 16px;
margin-bottom: 20px;
}
Putting It All Together
Here is an example of combining HTML and CSS to create a simple webpage:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple web page.</p>
</body>
</html>
CSS
/* styles.css */
h1 {
color: #FF5733;
font-family: Arial, sans-serif;
}
p {
font-size: 16px;
margin-bottom: 20px;
}
It is very simple! You have just created your first webpage with HTML and CSS. As you dive deeper into web development, you will discover more elements, properties, and techniques to enhance your websites.
Remember, practice makes perfect. Experiment, play around, and do not be afraid to make mistakes because for every mistake you make you will learn new things trying to fix it. Happy coding, and stay tuned for more web development tips right here at sunshineihcts.com, if you have anything to add to this article or you have a question to ask do that on the comments section below. If you have benefited from this article do share with your friends to benefit them too!
You may like:
Copyright © 2018 - 2026 SunshineIHCTS | All rights reserved. Powered by 
Comments section
You need to be logged in to comment, Login or Register.Approved comments:
No comments yet! be the first to comment