devScientist
What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and design documents on the World Wide Web. HTML describes the structure of a web page and consists of a series of elements. These elements tell the browser how to display the content.
Basic Structure of an HTML Document
Every HTML document starts with a declaration, followed by a <html> tag. The document is then divided into two main sections: <head> and <body>.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first web page.</p>
</body>
</html>
<!DOCTYPE html>: Declares the document type and version of HTML.<html>: The root element of an HTML page.<head>: Contains meta-information about the document, such as its title and links to CSS files.<title>: Sets the title of the document, which appears in the browser’s title bar or tab.<body>: Contains the content of the HTML document, such as headings, paragraphs, images, and links.
What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS controls the layout, colors, fonts, and overall appearance of a web page.
Basic Structure of a CSS Rule
A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons.
selector {
property: value;
}
Example of CSS
Here’s a simple example of how to apply CSS to an HTML document.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Styled Web Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to My Styled Website</h1>
<p>This is my first web page with CSS.</p>
</body>
</html>
CSS (styles.css)
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
p {
color: #666666;
font-size: 14px;
line-height: 1.5;
margin: 0 20px;
}
body: Styles the entire document’s background color and font.h1: Styles the heading element, changing its color and alignment.p: Styles paragraph elements, adjusting their color, font size, line height, and margin.
Linking CSS to HTML
There are three ways to apply CSS to an HTML document:
- Inline CSS: Uses the
styleattribute inside HTML elements. - Internal CSS: Uses a
<style>element inside the<head>section. - External CSS: Uses an external file linked via the
<link>element.
Example of External CSS
Using an external stylesheet is the most efficient method, especially for larger websites.
HTML
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>External CSS Styling</h1>
<p>This is an example of using an external CSS file.</p>
</body>
</html>
CSS (styles.css)
body {
background-color: #e0e0e0;
color: #333333;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
text-align: center;
}
p {
font-size: 16px;
margin: 20px;
}
Conclusion
HTML and CSS are the foundational technologies for building and designing web pages. HTML provides the structure of the page, while CSS defines the visual presentation. By understanding and using these technologies, you can create visually appealing and well-structured web pages.
