Cascading Style Sheets, Selectors and Website Styling for SS 1

Website Development Technologies I (Cascading Style Sheet)

Performance Objectives

By the end of the lesson, students should be able to:

1. describe the meaning and importance of CSS in website development;
2. write a CSS statement using the syntax/rules;
3. explain the methods of applying CSS;
4. create a static webpage and apply CSS statements to style the page.

Meaning and Use of Cascading Style Sheets (CSS)

Cascading Style Sheets, commonly known as CSS, is a style sheet language used for describing the presentation of a document written in a markup language like HTML. It controls how HTML elements are displayed on a web page.

The main use of CSS is to separate the content of a web page (which is handled by HTML) from its visual presentation (how it looks). This separation makes web development more efficient and flexible.

Importance of CSS

CSS is very important in modern website development for several reasons:

1. Separation of Concerns: CSS allows the separation of a website’s content (HTML) from its design (CSS). This makes the HTML code cleaner and easier to manage, while the CSS can be changed independently to update the look of the entire website.
2. Consistency: With CSS, a single style sheet can be used to define the look and feel of multiple pages on a website. This ensures a consistent design across all pages, making the website appear professional and unified.
3. Efficiency: Instead of applying styles to each HTML element individually, CSS allows developers to write styles once and apply them to many elements or even an entire website. This saves a lot of time and effort.
4. Faster Page Loading: When CSS is stored in an external file, it can be downloaded once by the web browser and then cached. This means that when a user visits other pages on the same website, the browser does not need to download the styles again, leading to faster page loading times.
5. Better User Experience: CSS enables responsive design, which means websites can adapt their layout and appearance to different screen sizes, such as those on desktop computers, tablets, and mobile phones. This provides a better viewing experience for users on any device.
6. Accessibility: CSS can be used to improve the accessibility of web content for users with disabilities, for example, by allowing users to customise fonts, colours, and layouts to suit their needs.

CSS Syntax and Rules

A CSS rule set consists of a selector and a declaration block. The selector points to the HTML element to be styled, and the declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon. Multiple declarations in a block are separated by semicolons.

1. Selector: This indicates which HTML element or elements the style will be applied to. For SS1, the focus is on HTML element selectors, which directly target HTML tags like p (paragraph), h1 (heading 1), body, div, etc.
2. Declaration Block: This contains the actual styles. It is enclosed in curly braces {}.
1. Property: This is the specific style attribute that you want to change, such as color, font-size, background-color, or margin.
2. Value: This is the setting for the property, such as blue for color, 16px for font-size, lightgray for background-color, or 20px for margin.

Here is an example of a CSS rule:

p {
  color: blue;
  font-size: 16px;
}

In this example:

1. p is the selector, targeting all paragraph elements.
2. color is a property, and blue is its value.
3. font-size is another property, and 16px is its value.

Methods of Applying CSS

There are three main ways to apply CSS styles to an HTML document:

1. Inline CSS: This method involves applying styles directly to individual HTML elements using the style attribute.

Example of Inline CSS:

<p style="color: red; font-size: 18px;">This text is styled with inline CSS.</p>

Explanation: The style attribute is added directly within the <p> tag, and the CSS properties and values are written inside it. Inline styles only affect the specific element they are applied to.

2. Internal CSS (Embedded CSS): This method involves placing CSS rules within the <style> tags in the <head> section of an HTML document.

Example of Internal CSS:

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This page uses internal CSS for styling.</p>
</body>
</html>

Explanation: The <style> tags are placed inside the <head> section. All CSS rules written here apply to the entire HTML document. This is useful for styling a single page.

3. External CSS: This is the most common and recommended method. It involves linking an external .css file to the HTML document. The CSS rules are written in a separate file, typically named style.css or similar.

Example of External CSS:

First, create a file named styles.css (or any other name ending with .css) and add your CSS rules:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}
h2 {
  color: green;
}

Then, link this .css file to your HTML document using the <link> tag in the <head> section:

<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>This page uses external CSS.</h2>
  <p>The styles are defined in a separate file.</p>
</body>
</html>

Explanation: The <link> tag with rel="stylesheet" and href="styles.css" tells the browser to apply the styles from the styles.css file. This method is ideal for styling multiple pages with the same design, as changes to the .css file will update all linked HTML pages.

Steps to Create a Webpage

Before styling a webpage, it is essential to create its basic structure using HTML. The steps to create a simple webpage are:

1. Open a Text Editor: Start by opening a text editor on your computer. Popular choices include Notepad (Windows), TextEdit (macOS), or more advanced editors like VS Code, Sublime Text, or Notepad++.
2. Write the HTML Elements: Type the HTML code to create the basic structure of your page. This includes the <!DOCTYPE html> declaration, <html>, <head>, <title>, and <body> tags.
3. Add Content: Inside the <body> section, add your content using appropriate HTML elements. This can include headings (<h1>, <h2>), paragraphs (<p>), images (<img>), or other elements.
4. Name and Save the File: Save the file with a descriptive name, ensuring it ends with the .html or .htm file extension (e.g., myfirstpage.html). This tells the computer that it is a web page.
5. Open the File in a Web Browser: Locate your saved .html file and double-click it. It will open automatically in your default web browser (like Chrome, Firefox, Edge, or Safari), displaying the content you created.

Example HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Basic Webpage</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a simple paragraph of text.</p>
    <img src="example.jpg" alt="An example image" width="200">
</body>
</html>

Steps to Style a Webpage

Once you have created an HTML webpage, you can apply CSS to style it. The general steps are:

1. Create a Webpage using HTML: Ensure you have an existing HTML file that you want to style. This file will contain the elements you wish to modify.
2. Use the CSS Syntax to Write a Declaration: Decide which HTML element you want to style and what properties you want to change. Write the CSS rule using the selector, property, and value format (e.g., p { color: blue; }).
3. Apply the Declaration to the HTML Document: Choose one of the methods (inline, internal, or external) to insert your CSS declaration into the HTML document or link it to the HTML document.
4. Name and Save the HTML File: Save your HTML file after adding the CSS. If you are using an external CSS file, save that file separately with a .css extension.
5. Open the HTML File using a Web Browser: Open the HTML file in a web browser to see the applied styles. If you made changes to an external CSS file, ensure both the HTML and CSS files are saved in the same folder or that the path in the <link> tag is correct.

Creating and Styling a Static Webpage

This section will guide you through creating a simple static webpage and applying various CSS styles using both inline and internal methods, as specified by the curriculum.

1. Setting Up the Basic HTML Webpage

First, create a new HTML file. Open your text editor and type the following code. Save this file as my_styled_page.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Webpage</title>
</head>
<body>
    <h1>Welcome to My Styled Page</h1>
    <p>This is a paragraph of text that will be styled.</p>
    <p>Another paragraph to demonstrate different styles.</p>
    <div>
        <h2>Section Title</h2>
        <p>Content within a section.</p>
    </div>
</body>
</html>

2. Applying CSS Statements to Style the Page

2.1. Create a Simple Page Layout (using margins and background)

We will use internal CSS to set a background colour for the entire page (body) and apply margins to a div element to create a simple layout effect.

Steps:

1. Open your my_styled_page.html file in a text editor.
2. Inside the <head> section, add the <style> tags.
3. Between the <style> tags, add CSS rules for the body and div elements.
4. Save the file.

Code Example (Internal CSS):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Webpage</title>
    <style>
        body {
            background-color: #f0f0f0; /* Light grey background for the whole page */
            font-family: sans-serif;
        }
        div {
            background-color: white; /* White background for the content area */
            margin-left: 50px;
            margin-right: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px; /* Space inside the div */
            border: 1px solid #ccc; /* A light border around the div */
        }
    </style>
</head>
<body>
    <h1>Welcome to My Styled Page</h1>
    <p>This is a paragraph of text that will be styled.</p>
    <p>Another paragraph to demonstrate different styles.</p>
    <div>
        <h2>Section Title</h2>
        <p>Content within a section.</p>
    </div>
</body>
</html>

Explanation: The body element gets a light grey background. The div element, which contains a section of content, gets a white background, a border, and specific margins on all sides, creating a distinct content block on the page.

2.2. Change Colour (Background, Text)

We will change the background colour of a paragraph and the text colour of a heading.

Steps:

1. Continue editing my_styled_page.html.
2. Add a new CSS rule for h1 and modify the rule for p within the <style> tags.
3. We will also use inline CSS for one paragraph to show the difference.
4. Save the file.

Code Example (Internal and Inline CSS):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Webpage</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: sans-serif;
        }
        h1 {
            color: #0056b3; /* Dark blue text for main heading */
            background-color: #e0e0ff; /* Light blue background for main heading */
            padding: 10px;
            text-align: center;
        }
        p {
            color: #333; /* Dark grey text for paragraphs */
            background-color: #fffacd; /* Light yellow background for paragraphs */
            padding: 5px;
            margin-bottom: 10px;
        }
        div {
            background-color: white;
            margin-left: 50px;
            margin-right: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Styled Page</h1>
    <p>This is a paragraph of text styled with internal CSS.</p>
    <p style="color: green; background-color: #ccffcc;">This paragraph uses inline CSS for its unique style.</p>
    <div>
        <h2>Section Title</h2>
        <p>Content within a section.</p>
    </div>
</body>
</html>

Explanation: The h1 element now has dark blue text and a light blue background. All p elements (except the one with inline style) have dark grey text and a light yellow background. The second paragraph demonstrates inline CSS, overriding the internal CSS for its specific text and background colour.

2.3. Apply Page Margins (left, right, top, bottom)

Margins create space around an element, pushing other elements away. We already applied margins to the div element in the layout section. Let’s add more specific margins to the h2 element.

Steps:

1. Continue editing my_styled_page.html.
2. Add a new CSS rule for h2 within the <style> tags.
3. Save the file.

Code Example (Internal CSS):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Webpage</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: sans-serif;
        }
        h1 {
            color: #0056b3;
            background-color: #e0e0ff;
            padding: 10px;
            text-align: center;
        }
        h2 {
            color: #8B0000; /* Dark red text for h2 */
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 0;
            margin-right: 0;
        }
        p {
            color: #333;
            background-color: #fffacd;
            padding: 5px;
            margin-bottom: 10px;
        }
        div {
            background-color: white;
            margin-left: 50px;
            margin-right: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Styled Page</h1>
    <p>This is a paragraph of text styled with internal CSS.</p>
    <p style="color: green; background-color: #ccffcc;">This paragraph uses inline CSS for its unique style.</p>
    <div>
        <h2>Section Title</h2>
        <p>Content within a section.</p>
    </div>
</body>
</html>

Explanation: The h2 element now has specific top and bottom margins, creating more space above and below it within its container. The left and right margins are set to 0, meaning it will stretch across the available width within the div.

2.4. Change Text Font (size, style)

We will change the font size and font style (family) for different elements.

Steps:

1. Continue editing my_styled_page.html.
2. Modify the CSS rules for h1, h2, and p within the <style> tags to include font properties.
3. Save the file.

Code Example (Internal CSS):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Webpage</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* General font for the page */
        }
        h1 {
            color: #0056b3;
            background-color: #e0e0ff;
            padding: 10px;
            text-align: center;
            font-size: 36px; /* Larger font size for h1 */
            font-family: Georgia, serif; /* Different font style for h1 */
        }
        h2 {
            color: #8B0000;
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 0;
            margin-right: 0;
            font-size: 24px; /* Medium font size for h2 */
            font-family: 'Trebuchet MS', sans-serif; /* Different font style for h2 */
        }
        p {
            color: #333;
            background-color: #fffacd;
            padding: 5px;
            margin-bottom: 10px;
            font-size: 16px; /* Standard font size for paragraphs */
            line-height: 1.5; /* Space between lines of text */
        }
        div {
            background-color: white;
            margin-left: 50px;
            margin-right: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Styled Page</h1>
    <p>This is a paragraph of text styled with internal CSS.</p>
    <p style="color: green; background-color: #ccffcc; font-size: 14px; font-family: 'Courier New', monospace;">This paragraph uses inline CSS for its unique style and font.</p>
    <div>
        <h2>Section Title</h2>
        <p>Content within a section.</p>
    </div>
</body>
</html>

Explanation: The body now has a default font. The h1 has a larger font size (36px) and a specific font family (Georgia). The h2 has a medium font size (24px) and a different font family (Trebuchet MS). The paragraphs have a standard font size (16px). The inline-styled paragraph also demonstrates overriding the font size and family.

2.5. Align Text (left, center, right)

Text alignment controls how text is positioned horizontally within its container.

Steps:

1. Continue editing my_styled_page.html.
2. Modify the CSS rules for h1, h2, and p within the <style> tags to include text alignment properties.
3. Save the file.

Code Example (Internal CSS):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Webpage</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        h1 {
            color: #0056b3;
            background-color: #e0e0ff;
            padding: 10px;
            text-align: center; /* Center alignment for h1 */
            font-size: 36px;
            font-family: Georgia, serif;
        }
        h2 {
            color: #8B0000;
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 0;
            margin-right: 0;
            font-size: 24px;
            font-family: 'Trebuchet MS', sans-serif;
            text-align: left; /* Left alignment for h2 */
        }
        p {
            color: #333;
            background-color: #fffacd;
            padding: 5px;
            margin-bottom: 10px;
            font-size: 16px;
            line-height: 1.5;
            text-align: justify; /* Justify alignment for paragraphs */
        }
        div {
            background-color: white;
            margin-left: 50px;
            margin-right: 50px;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Styled Page</h1>
    <p>This is a paragraph of text styled with internal CSS. It demonstrates text justification, where text is aligned to both the left and right margins, creating a clean block of text.</p>
    <p style="color: green; background-color: #ccffcc; font-size: 14px; font-family: 'Courier New', monospace; text-align: right;">This paragraph uses inline CSS for its unique style, font, and right alignment.</p>
    <div>
        <h2>Section Title</h2>
        <p>Content within a section.</p>
    </div>
</body>
</html>

Explanation: The h1 element is now centered. The h2 element is left-aligned. The general paragraphs are justified, meaning the text stretches to fill the entire width of the paragraph, aligning both left and right edges. The inline-styled paragraph is right-aligned.

After completing these steps, save your my_styled_page.html file and open it in a web browser to observe all the applied styles. You will see a webpage with a light grey background, a main heading in dark blue with a light blue background, paragraphs with dark grey text and light yellow backgrounds (except for one green, right-aligned paragraph), and a content section with a white background and defined margins.