Integrating HTML and CSS - Jobs with Skills

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) work together to create structured and visually appealing web pages. Here’s how they integrate:

1. HTML Structure:

HTML provides the structure and content of a webpage.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>My Webpage</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <header>
           <h1>Welcome to My Webpage</h1>
       </header>
       <nav>
           <ul>
               <li><a href="#home">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#contact">Contact</a></li>
           </ul>
       </nav>
       <section id="home">
           <h2>Home Section</h2>
           <p>This is the home section of my webpage.</p>
       </section>
       <section id="about">
           <h2>About Section</h2>
           <p>Learn more about me and my interests.</p>
       </section>
       <section id="contact">
           <h2>Contact Section</h2>
           <p>Feel free to reach out to me.</p>
       </section>
       <footer>
           <p>&copy; 2023 My Webpage</p>
       </footer>
   </body>
   </html>

2. CSS Styling:

CSS enhances the visual presentation of HTML elements.

   /* styles.css */

   body {
       font-family: 'Arial', sans-serif;
       background-color: #f0f0f0;
       margin: 0;
       padding: 0;
   }

   header {
       background-color: #333;
       color: #fff;
       text-align: center;
       padding: 10px;
   }

   nav {
       background-color: #666;
       padding: 5px;
   }

   nav ul {
       list-style-type: none;
       margin: 0;
       padding: 0;
   }

   nav ul li {
       display: inline;
       margin-right: 10px;
   }

   nav a {
       text-decoration: none;
       color: #fff;
   }

   section {
       padding: 20px;
       margin: 10px;
       background-color: #fff;
   }

   footer {
       background-color: #333;
       color: #fff;
       text-align: center;
       padding: 10px;
   }

3. Linking CSS to HTML:

The <link> tag in the HTML <head> links the HTML file to the external CSS file.

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

4. CSS Selectors:

Selectors target HTML elements for styling.

   header {
       background-color: #333;
       color: #fff;
       text-align: center;
       padding: 10px;
   }

   nav ul {
       list-style-type: none;
       margin: 0;
       padding: 0;
   }

   section {
       padding: 20px;
       margin: 10px;
       background-color: #fff;
   }

5. Responsive Design:

CSS media queries adjust styles based on screen size.

   @media screen and (max-width: 600px) {
       nav ul li {
           display: block;
           margin-bottom: 5px;
       }
   }

Conclusion:

HTML and CSS form the backbone of web development, providing structure and style to web pages. HTML defines the content and structure, while CSS enhances the visual presentation. This separation of concerns allows for cleaner code and easier maintenance. As you advance, you’ll explore more advanced CSS features and techniques for creating dynamic and responsive user interfaces.

Back to