Scribd
Upload
8 views

Chapter 10 Introducing CSS

Uploaded by

Arsene
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Chapter 10 Introducing CSS

Uploaded by

Arsene
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Chapter 10: Introducing CSS

1. What is CSS?

 Definition: CSS (Cascading Style Sheets) is a stylesheet language used to describe the
presentation of a document written in HTML or XML. It controls the layout, colors,
fonts, and overall visual appearance of web pages.
 Purpose: The primary purpose of CSS is to separate content (HTML) from
presentation (CSS), allowing for more flexible and maintainable web design.

2. Why Use CSS?

 Separation of Concerns: By separating content from design, developers can easily update
styles without altering the underlying HTML structure.
 Consistency: CSS allows for consistent styling across multiple pages of a website, ensuring a
uniform look and feel.
 Responsive Design: CSS facilitates responsive design techniques, enabling web pages to
adapt to different screen sizes and devices.
 Enhanced Presentation: CSS provides extensive options for styling, including layout control,
animations, and transitions.

3. How CSS Works with HTML

 CSS Syntax: CSS is written in rulesets, which consist of selectors and declarations.

Basic Syntax:

css

selector {
property: value;
}

 Example:

css
h1 {
color: blue;
font-size: 24px;
}

a. Selectors

 Definition: Selectors are patterns used to select the elements you want to style.

Common Selectors:

 Element Selector: Selects all elements of a specified type.


css

p {
color: green;
}

 Class Selector: Selects elements with a specific class. It is prefixed with a dot (.).

css

.highlight {
background-color: yellow;
}

 ID Selector: Selects a unique element with a specific ID. It is prefixed with a hash (#).

css

#main-title {
text-align: center;
}

b. Applying CSS to HTML

There are three primary methods to apply CSS styles to an HTML document:

1. Inline CSS: Styles are applied directly within the HTML elements using the style
attribute.

html

<h1 style="color: blue;">Hello, World!</h1>

2. Internal CSS: Styles are defined within a <style> tag in the <head> section of the
HTML document.

html

<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>

3. External CSS: Styles are defined in a separate CSS file, which is linked to the HTML
document using a <link> tag.

html

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

4. Example of CSS with HTML

Here’s a simple example demonstrating how CSS works with HTML:

HTML Document:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="main-title">Welcome to My Website</h1>
<p class="highlight">This is a highlighted paragraph.</p>
<p>This is a regular paragraph.</p>
</body>
</html>

Welcome to My Website

This is a highlighted paragraph.

This is a regular paragraph.

CSS (styles.css):

css

body {
background-color: lightblue;
}

#main-title {
color: navy;
text-align: center;
}

.highlight {
background-color: yellow;
font-weight: bold;
}

You might also like