Lecture Notes Of Class 22: Introduction to HTML and CSS Integration

Rashmi Mishra
personRashmi Mishra
December 19, 2024
0

Lecture Notes Of Class 22

Introduction to HTML and CSS Integration

Objective:

In this class, we will cover the basics of integrating CSS (Cascading Style Sheets) with HTML (Hypertext Markup Language) for styling web pages. Students will learn how to apply CSS to HTML elements in different ways: inline, internal, and external CSS.

Outcome:

By the end of this class, students will be able to apply CSS styles to HTML elements using:

1.   Inline CSS

2.   Internal CSS

3.   External CSS

They will also understand the importance of each method and know when and why to use them in web development.

1. What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation (appearance and layout) of a document written in HTML or XML. CSS enables web designers to control the style and layout of web pages, such as the colors, fonts, spacing, and positioning of elements.

Why CSS?

·         Separation of content and presentation: CSS separates the structure of a webpage (HTML) from its design (CSS), making the code cleaner and easier to maintain.

·         Consistency: A single CSS file can style multiple HTML pages, ensuring consistency in design across a website.

·         Efficiency: Changes to the design can be made quickly by editing the CSS without modifying HTML content.

2. Ways to Integrate CSS with HTML

There are three primary ways to integrate CSS into an HTML document:

a) Inline CSS

Inline CSS is used when you want to apply a style to a single HTML element. The style is written directly in the style attribute within the HTML tag.

Syntax:

<tagname style="property: value;">
  Content here
</tagname>
 
 Example:
<p style="color: blue; font-size: 20px;">This is a blue paragraph with large text.</p>

 Advantages of Inline CSS:

·         Quick and easy for small, one-time style changes.

·         Ideal for testing or styling a few elements without editing a whole stylesheet.

Disadvantages of Inline CSS:

·         It makes the HTML code cluttered, especially for large pages.

·         Not reusable for other HTML elements, as the style is applied only to one specific element.

b) Internal CSS

Internal CSS is defined within the <style> tag in the <head> section of the HTML document. It applies styles to elements within that specific HTML page.

Syntax:

<head>
  <style>
    selector {
      property: value;
    }
  </style>
</head>
 
 Example:
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightgray;
    }
    h1 {
      color: green;
      text-align: center;
    }
  </style>
</head>
<body>
 
<h1>Welcome to my Web Page</h1>
<p>This is a paragraph styled using internal CSS.</p>
 
</body>
</html>
 
 

Advantages of Internal CSS:

·         Keeps CSS rules together in one place for a single page.

·         Easier to manage than inline CSS when working with multiple elements on the same page.

Disadvantages of Internal CSS:

·         It affects only the specific HTML page. For a multi-page website, styles have to be repeated in every HTML file.

c) External CSS

External CSS involves linking an external .css file to an HTML document. This is the most common method of applying styles to a website because it allows the CSS to be reused across multiple HTML pages.

Syntax:




 

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

The external styles.css file might look like this:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
h1 {
  color: purple;
  text-align: center;
}

 Advantages of External CSS:

· CSS is kept in separate files, which keeps the HTML files clean and organized.

·  Reusable: You can link the same CSS file to multiple HTML pages, making global style changes easier to manage.

·  Faster page loading: Browsers cache the CSS file, meaning it doesn’t have to be loaded each time a new page is opened.

Disadvantages of External CSS:

·         Requires an additional HTTP request to load the CSS file, which can slightly increase page load time (though this is minimized by caching).

·         Requires the file path to be correctly linked.

3. CSS Selectors

To apply styles using CSS, you need to select the HTML elements you want to style. This is done using selectors. Common selectors include:

a) Element Selector

This targets all instances of a specific HTML element.

p {
  color: red;
}
 
 

This will make all paragraphs (<p>) red.

b) Class Selector

This targets elements with a specific class attribute.

.text-center {
  text-align: center;
}
 


 <p class="text-center">This paragraph will be centered.</p>
 
 

c) ID Selector

This targets an element with a specific id attribute.

#main-header {
  font-size: 2em;
}
 
 
<h1 id="main-header">This header has a large font size.</h1>
 
 

d) Universal Selector

This targets all elements on the page.

* {

  margin: 0;

  padding: 0;

}

 
 

4. CSS Properties

CSS allows you to modify various aspects of an element’s appearance, such as:

·         Color and Background

p {
  color: red;
  background-color: yellow;
}
 
 

·         Font and Text Styles

h1 {
  font-family: 'Arial', sans-serif;
  font-size: 2em;
  text-align: center;
}
 
 

·         Spacing


 

  
div {
  margin: 20px;
  padding: 10px;
}
 

 





 

·         Borders and Shadows

img {
  border: 5px solid black;
  box-shadow: 2px 2px 10px grey;
}
 
 
 

5. Best Practices for Using CSS

·External CSS for large projects: Always prefer external CSS for larger projects, as it helps with maintainability and reusability.

·Use classes for styling: Whenever possible, use classes rather than inline styles to keep the HTML clean.

·Avoid overly complex selectors: Simple, clear selectors are easier to manage.

6. Summary

In this lesson, we learned:

·How to apply CSS using inline, internal, and external methods.

· How to select HTML elements using selectors like element, class, and ID selectors.

·The most common CSS properties used for styling.

By the end of this class, students should feel confident in styling HTML documents using different CSS methods.

7. Practice Exercises

1.   Create a webpage that uses inline CSS to style a paragraph, change the background color, and set the font size.

2.   Create a webpage with an internal CSS style block to change the colors of headings and paragraphs.

3.   Create a webpage with an external CSS file that styles multiple HTML pages, including fonts, colors, and layout.


Tags

You Might Like

Show more
Classnotes

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post link