Welcome to the HTML & CSS Starter Guide! This README will help you get started with web development using HTML and CSS.
Before you begin, ensure you have the following installed:
- A code editor (e.g., VSCode, Sublime Text)
- A web browser (e.g., Chrome, Firefox)
- Create a new project directory:
mkdir my-web-project cd my-web-project - Create an
index.htmlfile and astyles.cssfile in the project directory.
HTML (HyperText Markup Language) is used to create the structure of web pages. A basic HTML structure looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>- Headings:
<h1>to<h6> - Paragraphs:
<p> - Links:
<a href="url">Link text</a> - Images:
<img src="image.jpg" alt="description"> - Lists:
<ul>(unordered),<ol>(ordered),<li>(list items)
CSS (Cascading Style Sheets) is used to style HTML elements. A basic CSS rule looks like this:
selector {
property: value;
}- Element Selector:
p { color: blue; } - Class Selector:
.classname { color: red; } - ID Selector:
#idname { color: green; } - Attribute Selector:
[type="text"] { border: 1px solid black; }
The CSS box model describes the rectangular boxes that are generated for elements:
- Content: The actual content of the box, where text and images appear
- Padding: Clears an area around the content
- Border: A border that goes around the padding (if any) and content
- Margin: Clears an area outside the border
Responsive design ensures that web pages look good on all devices. Use media queries to apply different styles for different screen sizes:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}- Keep your HTML semantic and well-structured
- Use external CSS for styling
- Ensure your site is responsive and accessible
- Optimize images and other assets