Html Style

HTML style

Created By: chatGPT

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page using various elements. Each element is defined by tags, which are enclosed in angle brackets (e.g., <tagname>). Here’s a basic structure of an HTML document:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

In this document, you can see several components. The <!DOCTYPE html> declaration defines the document type, while <html>, <head>, and <body> are fundamental tags. The <title> tag specifies the title of the web page, shown in the browser's title bar. Inside the <body>, you can place text elements such as header tags <h1>, <h2>, etc., and paragraph tags <p>.

<h1>This is a Header</h1>
<p>This is a paragraph of text.</p>

CSS (Cascading Style Sheets) is used to style and layout HTML. You can add CSS directly within your HTML by using the <style> tag or link an external CSS file using <link>. Here’s how you can style an HTML element:

<head>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            font-size: 24px;
        }
    </style>
</head>

In this example, the background color of the entire page will change to light blue, and any <h1> element will appear in navy color with a font size of 24 pixels. You can also apply styles to class and ID selectors for more specific styling. Here’s a simple example using a class:

<style>
    .myClass {
        font-weight: bold;
        text-align: center;
    }
</style>

<p class="myClass">This text is bold and centered.</p>

To structure your web page effectively, you should also understand the use of div and span elements. The <div> tag is a block-level element used for grouping larger sections, while the <span> tag is an inline element for styling a portion of text. Here's an example:

<div>
    <h2>This is a Div Section</h2>
    <p>A paragraph inside a div.</p>
</div>

<span style="color: red;">This text is in red color.</span>