Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

HTML_CSS_Guide

Uploaded by

reybi tubil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML_CSS_Guide

Uploaded by

reybi tubil
Copyright
© © All Rights Reserved
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