HTML CSS

Sure! HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the core technologies for creating and styling web pages.

HTML

HTML is used to structure the content of a web page. It consists of elements or tags that define the content and its structure.

Basic HTML Structure:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: Root element of the HTML document.
<head>: Contains meta-information about the document, such as the title.
<title>: Sets the title of the document (appears in the browser tab).
<body>: Contains the content of the document.
<h1>: Defines a top-level heading.
<p>: Defines a paragraph.
<a>: Defines a hyperlink.

CSS

CSS is used to style and layout web pages. It controls the presentation, such as colors, fonts, and spacing.

Basic CSS Example:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            color: #666;
            margin: 20px;
        }
        a {
            color: #007bff;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Styled Page</h1>
    <p>This paragraph has been styled with CSS.</p>
    <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

CSS Breakdown:

body { ... }: Styles for the entire page body. Sets the font family and background color.
h1 { ... }: Styles for <h1> elements. Changes the text color and alignment.
p { ... }: Styles for <p> elements. Adjusts text color and margin.
a { ... }: Styles for <a> elements. Changes link color and removes underline.
a:hover { ... }: Styles for links when hovered over. Adds underline to indicate a hover effect.

You can link external CSS files to keep styles separate from HTML:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

In this case, styles.css would contain your CSS rules.

Feel free to ask if you want more details or examples!

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us