<h1>This text background is black</h1>
                    

h1 {
    color:white;
    background-color: black;
    border: 3px solid crimson;
}
                     

<h1>Main header</h1>

<p>Lorem ipsum dolor sit, <span class="styled-text">amet consectetur adipisicing elit.</span> Hic qui deleniti quos error tenetur ab, porro cupiditate dignissimos velit, harum a molestiae iure quia voluptas maxime fuga itaque, minima at? Nihil aspernatur rerum eos repellendus ullam provident blanditiis, natus, aliquam nemo nesciunt illo dolorem est ducimus, cupiditate inventore voluptatibus eum harum facere vero cumque porro. Alias nostrum est necessitatibus maxime.</p>

<p class="arabic-text">لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب الشعور بالسعادة، ولكن بفضل هؤلاء الأشخاص الذين لا يدركون بأن السعادة لا بد أن نستشعرها بصورة أكثر عقلانية ومنطقية فيعرضهم هذا لمواجهة الظروف الأليمة، وأكرر بأنه لا يوجد من يرغب في الحب ونيل المنال ويتلذذ بالآلام، الألم هو الألم ولكن نتيجة لظروف ما قد تكمن السعاده فيما نتحمله من كد وأسي.</p>
                    

h1 {
    font-family: "DM Sans", sans-serif;
    font-size: 2.5em;
    letter-spacing: 2px;
    text-transform: uppercase;
}

h1 + p {
    border-inline-start: 5px solid purple;
    padding: 10px;
    font-family: "DM Sans", sans-serif;
    line-height: 25px;
    font-weight: light;
    word-spacing: 10px;
    text-align: justify;
}

.styled-text {
    text-decoration: underline red wavy;
    font-style: italic;
    font-weight: bold;
}

.arabic-text {
    direction: rtl;
    padding: 10px;
    border-inline-start: 5px solid green;
}
                     

<p> My Todo List </p>
<ul>
    <li>Prepare breakfast</li>
    <ol>
        <li>English</li>
        <li>Oriental</li>
    </ol>
    <li>Walk the dog</li>
    <li>Go to work</li>
</ul>
                    

ul > li {
    list-style-image: url("assets/todo.svg");
    list-style-position: inside;
    }
ol {
    list-style-type: lower-roman;
    }
                     

                        <table class="tableExample" border="1">
    <caption>Table 1. Employees Data</caption>
    <thead>
    <tr>
    <th>#</th>
    <th>Employee Code</th>
    <th>Employee Name</th>
    <th>Age</th>
    <th>Gender</th>
    <th>Dept.</th>
</tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>12345</td>
        <td>John Doe</td>
        <td>32</td>
        <td>M</td>
        <td>IT</td>
    </tr>

    <tr>
        <td>2</td>
        <td>12346</td>
        <td>Sam Smith</td>
        <td>29</td>
        <td>F</td>
        <td>Sales</td>
    </tr>
    <tr>
        <td>3</td>
        <td>12347</td>
        <td>Sara Williams</td>
        <td>30</td>
        <td>F</td>
        <td>IT</td>
    </tr>

    </tbody>
    <tfoot>
    <td>Total Employees</td>
    <td colspan="5">3</td>
    </tfoot>
</table>
                    

table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    text-align: center;
    }
    table caption {
    caption-side: bottom;
    margin-top: 5px;
    font-style: italic;
    }

    th,td {
    padding: 10px;
    }
    thead,tfoot {
    background-color: black;
    color: white;
    border-color: white;
    }
                     

<div class="img-container">
<img class="imgExample" src="../../assets/cat.jpeg" alt="image of a cat">
</div>
<p>Cats</p>
<p>The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae. Recent advances in archaeology and genetics have shown that the domestication of the cat occurred in the Near East around 7500 BC. </p>
                    

.img-container {
    width:300px;
    margin: auto;
}
img {
    max-width: 100%;
    object-fit:cover;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    filter:grayscale(100%)
}
                     

<ul>
    <li><a href="#services">Services</a></li>
    <li><a href="#pricing">Pricing</a></li>
    <li><a href="#gallery">Gallery</a></li>
    <li><a href="#about">About us</a></li>
</ul>
                    

ul {
    list-style-type: none;
}
a {
    text-decoration: none;
    outline-color: transparent;
    text-transform: uppercase;
}

a:link {
    color:black;
}

a:visited {
    color:blue;
}

a:focus {
    color:purple;

}

a:hover {
    text-decoration: underline red;
    cursor:pointer;
}

a:active {
    font-weight: bold;
}