Activity#19: Research Cascading style sheet or CSS

What is CSS?:
- Cascading Style Sheets, commonly known as CSS, is a fundamental technology used in web development to style and design web pages. It works hand in hand with HTML, the language used to structure the content of a webpage. CSS is responsible for controlling the layout, appearance, and presentation of the content, making it visually appealing and user-friendly.
Basic CSS Properties:
- Text Styling: CSS has a lot of properties for text formatting.
  - text color
  - text color and background
  - text alignment
  - text decoration
  - text transformation
  - text shadow
  - text spacing
- Box Model: The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins. The image below illustrates the box model:
- -content
- border
- margin
- padding
- Backgrounds: The CSS background properties are used to add background effects for elements.
  
  CSS background properties
  - Background-color
  - Background -image
  - Background -repeat
  - Background -attachment
  - Background -position
- Layouts: In CSS layouts often divided into navigation, header, menus, content and footer.
  
  In layout properties consist of the following:
- Responsive design
- Flexbox
- Positioning
- Grid
- Basic layouts
Practice:

<!DOCTYPE html>
<html lang="en">
<head>
<style>


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: rgb(117, 17, 17);
  background-color: #333;
}


header {
  background-color: #333;
  color: #fff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #0779e4 3px solid;
}

header nav {
  margin-top: 10px;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header a:hover {
  color: #cccccc;
}

header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}


main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

section {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  margin-top: 0;
}


footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

footer p {
  margin-bottom: 10px;
}



</style>
  <title>Semantic web</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h1>murtheHelp</h1>
      <p>The title murtheHelp is from the k-drama called "A shop for killer"</p>
    </section>
    <section>
      <h2>Semantic webpage</h2>
      <p>Using semantic HTML elements like these can help improve the accessibility and search engine optimization (SEO)<br>
         of your web page.</p>

         <h1>Moo deng viral sensation baby pygmy hippo</h1>
        <p>Moo Deng is a viral sensation, a baby pygmy hippo from the Khao Kheow Open Zoo in <br>
            Her name, which means "bouncy pig" in Thai, was chosen through a Facebook poll of 20,000 users.  <br>
            Moo Deng has captured the internet's attention with her playful demeanor, becoming a star in videos and memes. <br>
             She is part of various brand campaigns, and the zoo plans to capitalize on her fame to support animal care <br>
              efforts .</p>
        </section>

        <section>
        <h1>Pesto the male counterpart of moo deng</h1>
        <p>Pesto is a nine-month-old king penguin who has taken the internet by storm.<br>
             Born at Sea Life Melbourne Aquarium, Pesto was only 200g (7oz) at birth but now weighs<br>
              a hefty 22.5kg (50lbs) and stands 90cm (around 3 feet) tall. His chubby appearance and<br>
               waddling charm have endeared him to fans worldwide, boosting attendance at the aquarium.<br>
                Pesto’s viral fame has spread across social media, with countless videos and memes featuring <br>
                his adorable antics</p><br>
    </section>
  </main>
  <footer>
    <p>&copy; 2023 Page Title</p>
  </footer>
</body>
</html>

For references: https://www.theknowledgeacademy.com/blog/what-is-css/

GitHub repository: https://github.com/Koronuma4Dev/Semantic-web