lesson-3-index


<!DOCTYPE html>
<html>
<head>
    <title>Basic Styles for text</title>
    <!-- Internal CSS -->
    <style>
        /* Head CSS styling using Globals, Class and IDs attributes */

        /* Globals */
        /* Globals affecting all specific elements in the page. */
        body {
            background-color: lightskyblue;
        }

        /* Classes */
        /* Multiple HTML elements can share same class. */
        /* Can be used on any HTML element. */
        /* The class name is case sensitive. */
        /* Syntax: A period (.) character, followed by a class name. Define the CSS properties within curly braces {}. */
        .city {
            background-color: tomato;
            color: white;
            padding: 10px;
        }

        .town {
            font-family: 'Courier New', Courier, monospace;
            font-size: 20px;
            font-weight: bold;
        }

        /* IDs */
        /* Use to specify a unique ID for an HTML element */
        /* You cannot have more than one element with the same ID in HTML document. */
        /* Can be used for any HTML element. */
        /* Used to point to a specific style declaration in a style sheet. */
        /* Used by JavaScript to access and manipulate the element with the specific ID. */
        /* The ID name is case sensitive. */
        /* The ID name must contain at least one character, cannot start with a number, and mist not contain white spaces (space, tabs, etc.). */
        /* Syntax: A hash (#) character, followed by a ID name. Define the CSS properties within curly braces {}. */
        #myHeader {
            background-color: lightblue;
            color: black;
            padding: 40px;
            text-align: center;
        }

        #C1 {
            margin-top: 500px;
        }
    </style>
</head>
<body>
    <!-- Div element is used as container for other HTML elements. -->
    <div>
        <p>This is an example of "div" with two paragraphs in it.</p>
        <p>This is the second paragraph in "div".</p>
    </div>

    <!-- Span - inline element -->
    <span>Span element does not start on a new line.</span>
    <span>As you can see this is the second span element that is placed immediately after the first one.</span>

    <!-- Span inside paragraph -->
    <p>Span element can be placed inside a paragraph.
        <span style="color:red;">It's used for styling part of the text in the paragraph.</span>
    </p>

    <!-- Example of applying class to HTML element.  -->
    <p class="city">This paragraph is styled by CSS "city" class.</p>

    <!-- Example of applying two classes to HTML element.  -->
    <!-- To define multiple classes, separate the class names with a space.  -->
    <!-- Element will be styled to all specified classes. -->
    <p class="city town">This paragraph is styled by CSS "city" and "town" classes.</p>

    <!-- Example of applying ID to HTML element.  -->
    <p id="myHeader">This paragraph is styled by CSS "myHeader" ID.</p>

    <!-- HTML Bookmarks -->
    <!-- Used to jump to specific parts of a webpage. -->
    <!-- Will jump to element with od="C1". -->
    <a href="#C1">Jump to Chapter 1</a>

    <div id="C1">
        <h3>Chapter One</h3>
        <p>This is a paragraph of the chapter one.</p>
    </div>
</body>
</html>