Scribd
Upload
19 views

HTML CSS Topics

Uploaded by

Vikash Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

HTML CSS Topics

Uploaded by

Vikash Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML and CSS Detailed Topics with Practical Examples

1. Basic Structure of HTML Document

The basic structure of an HTML document defines the framework of your webpage. It starts with a

<!DOCTYPE> declaration, which tells the browser what version of HTML is being used. The <html>

tag is the root element, containing <head> and <body> tags.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML Structure</title>

</head>

<body>

<h1>Welcome to My Webpage</h1>

<p>This is a simple webpage demonstrating HTML structure.</p>

</body>

</html>

2. HTML Elements and Attributes

Elements are the building blocks of HTML. Each element has: Opening tag, Content, Closing tag.

Attributes modify the behavior or appearance of elements, such as id, class, and href.

<h1 id="main-title" class="title">Hello, World!</h1>


<img src="image.jpg" alt="A beautiful view">

<a href="https://example.com" target="_blank">Visit Example</a>

3. Forms and Input Elements

Forms are used to collect user data. Common input elements include <input>, <textarea>, <select>,

<button>. Form attributes include action and method.

<form action="/submit" method="POST">

<label for="username">Username:</label>

<input type="text" id="username" name="username" required>

<br><br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<br><br>

<button type="submit">Login</button>

</form>

1. Selectors

CSS selectors are used to target HTML elements. Types include universal (*), type (e.g., p), class

(.class), ID (#id), pseudo-classes (:hover), and pseudo-elements (::before).

/* Apply styles to all elements */

* {

margin: 0;

padding: 0;
}

/* Apply to all paragraphs */

p {

font-size: 16px;

/* Apply to a specific class */

.box {

border: 1px solid black;

padding: 10px;

/* Apply to a specific ID */

#main {

background-color: yellow;

/* Apply to links when hovered */

a:hover {

color: red;

2. Box Model

The CSS box model includes content, padding, border, and margin. Understanding it helps to

control element spacing and size.


.box {

width: 200px;

padding: 20px;

border: 2px solid blue;

margin: 10px;

You might also like