(Grade IX)Chapter 4: CSS Cascading Style Sheets — Part 2

CSS (Cascading Style Sheets) is used to make a webpage look attractive.

Colors — Backgrounds, text, and borders
Fonts — Typography style and size
Spacing — Margins, padding, alignment
Layouts — How elements are arranged

HTML Creates the Content — CSS Designs the Content

HTML — Structure: Used to create the structure and content of a webpage — headings, paragraphs, images, tables, and buttons. It tells the browser what to display.

CSS — Design: Used to change the appearance of HTML elements — colors, fonts, sizes, spacing, borders, and layouts. It tells the browser how to display the content.
Advantages of CSS
·       Makes webpages attractive: CSS adds colors, fonts, backgrounds, and layouts to improve the appearance of a webpage.
·       Saves time and effort: One CSS file can be used to style multiple webpages, so you don't need to repeat the same formatting.
·       Easy to update: Changing the CSS automatically updates the design of all linked webpages, making maintenance easier.
Disadvantages of CSS
·       Browser compatibility issues: Different web browsers may display the same CSS differently.
·       Difficult for beginners: Learning CSS properties and selectors may take time for new learners.
·       Errors affect the design: A small mistake in CSS can make parts of the webpage look incorrect or not display as expected.
Three Ways of Using a Style Sheet
There are three different ways of applying CSS to a webpage:
1. Inline Style: Applied directly to a single HTML element using the style attribute.
2. Internal Style Sheet: Written inside <style> tags in the <head> section of the HTML document.
3. External Style Sheet: A separate .css file linked to one or many HTML documents.
Internal Style Sheet
An internal style sheet is CSS code that is written within the <style> tags in the <head> section of an HTML document.
style.html
<html>
<head>
<style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: darkblue;
    }
</style>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is an example of an internal style sheet.</p>
</body>
</html>
Internal Style Sheet--Browser Output:

Browser Output (continued)

Inline Style
Inline styles are CSS styles applied directly to individual HTML elements using the style attribute.
style.html

<html>
<body>
<h1 style="color: darkblue;">Hello, world!</h1>
<p style="font-size: 16px;">This is an example of an inline style.</p>
</body>
</html>

Inline Style--Browser Output:

External Style Sheet
An external style sheet is a separate CSS file containing styles that can be linked to multiple HTML documents.
This promotes reusability and maintainability of styles across multiple pages — update one .css file and every linked page updates automatically.
One file → many pages (styles.css)
Linked using: <link rel="stylesheet" href="styles.css">

External Style Sheet — Code
index.html
<html>
<head>
    <link rel="stylesheet"
      type="text/css"
      href="styles.css">
</head>
<body>
    <h1>Hello, GRADE IX</h1>
    <p>This is an example of
    an external style sheet.</p>
</body>
</html>

styles.css
body {
background-color: lightblue;
}

h1 {
color: brown;
}

External Style Sheet — Browser Output: