Scribd
Upload
4 views

HTML_CSS_Guide

Uploaded by

reybi tubil
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
4 views

HTML_CSS_Guide

Uploaded by

reybi tubil
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/ 5

HTML and CSS: A Comprehensive Guide

HTML (HyperText Markup Language)

--------------------------------

HTML provides the structure and content of a web page. It uses tags and attributes to define elements.

1. Basic Structure:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Document</title>

</head>

<body>

<h1>Hello, World!</h1>

<p>Welcome to HTML and CSS.</p>

</body>

</html>

2. Common Tags:

- Headings: <h1> to <h6> for hierarchical headings.

- Paragraphs: <p> for text content.

- Links: <a href="url">Text</a> for hyperlinks.

- Images: <img src="image.jpg" alt="Description"> for images.

- Lists:
- Ordered: <ol><li>Item</li></ol>

- Unordered: <ul><li>Item</li></ul>

- Tables: <table> with <tr>, <td>, and <th> for rows and cells.

- Forms: <form> with inputs like <input>, <textarea>, <button>.

3. Attributes:

Attributes provide additional information about elements. Examples:

- id: Unique identifier (id="header").

- class: Used for styling or scripting (class="button").

- style: Inline styles (style="color:red;").

- src: Specifies source (e.g., for images or scripts).

- href: Hyperlink reference.

4. Semantic HTML:

Semantic elements provide meaning to the document:

- Structural Elements: <header>, <footer>, <main>, <section>, <article>.

- Text Elements: <strong> (important text), <em> (emphasized text), <blockquote> (quoted text).

CSS (Cascading Style Sheets)

----------------------------

CSS is used to style and layout web pages, controlling aspects like colors, fonts, and positioning.

1. Types of CSS:

- Inline CSS: Defined directly within an HTML element.

- Internal CSS: Placed within the <style> tag in the <head>.

- External CSS: Linked via the <link> tag.


2. CSS Syntax:

selector {

property: value;

Example:

h1 {

color: blue;

font-size: 24px;

3. Selectors:

- Universal Selector: * (selects all elements).

- Type Selector: h1, p, div (selects by tag name).

- Class Selector: .classname (selects elements with a specific class).

- ID Selector: #idname (selects an element with a specific ID).

- Attribute Selector: [type="text"] (selects elements with specific attributes).

4. Box Model:

CSS treats every element as a rectangular box:

- Content: The actual content of the element.

- Padding: Space between content and border.

- Border: Surrounds the padding.

- Margin: Space outside the border.

5. Positioning:

- Static: Default positioning (normal flow).

- Relative: Positioned relative to itself.


- Absolute: Positioned relative to the nearest positioned ancestor.

- Fixed: Positioned relative to the viewport.

- Sticky: Switches between relative and fixed.

6. Responsive Design:

Responsive design adapts to different screen sizes:

- Media Queries:

@media (max-width: 600px) {

body {

background-color: lightblue;

- Flexbox: A layout model for aligning items.

- Grid: A two-dimensional layout system.

7. CSS Preprocessors:

Tools like Sass and LESS extend CSS with features like variables, nesting, and functions.

HTML + CSS Together:

---------------------

HTML provides structure, while CSS enhances appearance.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Styled Page</title>
<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

color: #333;

.container {

max-width: 800px;

margin: 0 auto;

padding: 20px;

background: white;

border-radius: 8px;

</style>

</head>

<body>

<div class="container">

<h1>Hello, World!</h1>

<p>This is an example of HTML and CSS working together.</p>

</div>

</body>

</html>

You might also like