Unit 5 Cascading Style sheets

5.1 CSS – Introduction, Benefits, Syntax, Selectors, and Types

CSS (Cascading Style Sheets) is a language used to describe the presentation of a document
written in HTML or XML. CSS controls the layout, color, font, and overall design of web pages.
It separates the content of a web page from its visual design, making it easier to manage and
update.

1. Introduction to CSS

CSS is primarily used to:

• Control the layout of multiple web pages all at once.

• Make web pages visually appealing by applying styles to HTML elements.
• Enhance the user experience by controlling the appearance of elements such as colors,
spacing, and fonts.

2. Benefits of CSS

• Separation of Content and Design: By separating the content (HTML) from the design
(CSS), developers can update styles without altering the structure of the HTML
document.
• Consistency: CSS allows the consistent styling of all pages within a website.
• Flexibility: You can easily change the design of an entire website by editing just one
CSS file.
• Reduced File Size: Instead of repeating styles in every HTML file, you can store styles
in a single CSS file, making the website faster to load.
• Improved Accessibility: CSS helps in making the website more user-friendly, especially
for people with disabilities, as it allows for better control over presentation.

3. CSS Syntax

CSS uses a simple syntax for defining styles, where the selector points to the HTML element,
and the declaration block specifies the styles.

Basic Syntax:

css
selector {
 property: value;
}

• Selector: The HTML element(s) to be styled (e.g., p, h1, .class, #id).

• Property: The CSS property to be changed (e.g., color, font-size, background-color).
• Value: The value to be applied to the property (e.g., red, 16px, #ff5733).

Example:

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

• This changes the color of all <h1> headings to blue and sets the font size to 24px.

4. CSS Selectors

CSS selectors are patterns used to select HTML elements to apply styles. There are several types
of selectors:

a. Element Selector

The element selector targets all instances of a particular HTML element (tag). It applies the
styles to all matching elements in the HTML document.

Syntax:

css
element {
property: value;
}

Example:

css
p{
color: green;
font-size: 14px;
}

• This applies the style to all <p> (paragraph) elements in the document, making the text
green and setting the font size to 14px.
b. Id Selector

The id selector targets an element with a specific id attribute. It’s unique to that element,
meaning it can only be used once in the document.

Syntax:

css
#id {
property: value;
}

Example:

css
#header {
background-color: blue;
color: white;
}

• This applies the style only to the element with the id="header", changing its background
color to blue and text color to white.

c. Class Selector

The class selector targets all elements with a specific class attribute. Unlike the id, the class
selector can be used multiple times on different elements.

Syntax:

css
.class {
property: value;
}

Example:

css
.button {
background-color: red;
color: white;
}

• This applies the style to all elements with the class button, making the background color
red and text color white.
d. Universal Selector

The universal selector (*) targets all elements in the document. It can be used to apply a
common style to everything.

Syntax:

css
*{
property: value;
}

Example:

css
*{
margin: 0;
padding: 0;
}

• This removes the default margin and padding from all elements on the page.

e. Group Selector

The group selector allows you to apply the same styles to multiple elements by grouping them
together. This is useful for reducing redundancy.

Syntax:

css
element1, element2, element3 {
property: value;
}

Example:

css
h1, h2, h3 {
color: purple;
}

• This applies the same color (purple) to all <h1>, <h2>, and <h3> headings.

5. Types of CSS
There are three main types of CSS, based on where the styles are written:

a. Inline CSS

Inline CSS is written directly within an HTML element using the style attribute. This method is
used for styling individual elements.

Syntax:

html
<element style="property: value;">
Content
</element>

Example:

html
<p style="color: red; font-size: 18px;">This is a red paragraph.</p>

• The styles are applied to the <p> tag directly, changing the text color to red and the font
size to 18px.

b. Internal CSS

Internal CSS is written within the <style> tag inside the <head> section of the HTML
document. It applies styles to the entire page but is not reusable across multiple pages.

Syntax:

html
<head>
<style>
selector {
property: value;
}
</style>
</head>

Example:

html
<head>
<style>
p{
color: blue;
font-size: 16px;
 }
</style>
</head>

• This will apply the styles to all <p> elements in that specific HTML document.

c. External CSS

External CSS is the most common and efficient method of styling. The styles are written in a
separate CSS file, which is linked to the HTML document. This method allows the same
stylesheet to be used across multiple pages of a website.

Syntax:

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

• The external CSS file (styles.css) contains the styles.

Example of External CSS (styles.css):

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

• In the HTML document:

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

• This applies the styles from the styles.css file to the HTML elements.

5.2 Style Sheet Properties: Font, Text, Box, Color, and Background Properties; Creating
and Using a Simple External CSS File; Using Internal and Inline CSS; Background and
Color Gradients in CSS; Setting Fonts

This section delves into CSS properties for fonts, text, box models, colors, backgrounds, and
gradients. Additionally, we’ll explore how to use external, internal, and inline CSS styles, as
well as how to work with background gradients and font settings.
1. Font Properties

CSS provides several properties to control the font of text. These properties allow for specifying
the font type, size, weight, style, and line spacing.

Common Font Properties:

• font-family: Specifies the font type (e.g., Arial, Verdana, Georgia).

• font-size: Defines the size of the font (e.g., 16px, 1em, 1.5rem).
• font-weight: Specifies the weight or thickness of the font (e.g., normal, bold, lighter).
• font-style: Defines the style of the font (e.g., normal, italic, oblique).
• line-height: Controls the spacing between lines of text.

Example:

css
h1 {
font-family: 'Arial', sans-serif;
font-size: 32px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
}

• This will make the <h1> text Arial, size 32px, bold, italic, and with 1.5 line height.

2. Text Properties

CSS also allows fine control over text alignment, decoration, and spacing.

Common Text Properties:

• text-align: Aligns text horizontally (e.g., left, right, center, justify).

• text-decoration: Adds decoration to the text (e.g., underline, line-through, overline).
• text-transform: Alters the case of the text (e.g., uppercase, lowercase, capitalize).
• letter-spacing: Adjusts the spacing between individual letters.
• word-spacing: Adjusts the spacing between words.

Example:

css
p{
 text-align: justify;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 1px;
}

• This will justify the text inside <p>, underline it, make it uppercase, and add 1px of
spacing between the letters.

3. Box Model Properties

The box model is a concept that defines the layout of elements in CSS. Each element is a box
consisting of the content, padding, border, and margin.

Box Model Properties:

• width: Specifies the width of an element.

• height: Specifies the height of an element.
• padding: Defines the space between the content and the border of the element.
• border: Specifies the border around the element (e.g., 2px solid black).
• margin: Defines space outside the border between elements.

Example:

css
div {
width: 300px;
height: 150px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}

• This will create a div with a 300px width, 150px height, 20px padding, 2px solid black
border, and 10px margin from other elements.

4. Color Properties

CSS allows you to control the text color, background color, and border color.

Color Properties:
 • color: Specifies the color of the text.
• background-color: Specifies the background color of the element.
• border-color: Defines the color of the border.

Example:

css
body {
color: white; /* Text color */
background-color: #333333; /* Background color */
}

button {
border: 2px solid #ff5733; /* Border color */
}

• This applies white text color on the body, a dark gray background color, and an orange
border color to buttons.

5. Background Properties

The background properties allow you to set a background image, background color, and
control how the image is displayed.

Common Background Properties:

• background-color: Sets the background color (same as in color properties).

• background-image: Specifies the image to be used as a background.
• background-repeat: Controls whether the background image repeats (e.g., no-repeat,
repeat, repeat-x, repeat-y).
• background-position: Specifies the position of the background image.
• background-size: Defines how the background image should scale (e.g., cover, contain).

Example:

css
body {
background-color: lightblue;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
 • This will set a light blue background color, use the image background.jpg, prevent it
from repeating, center it, and ensure it covers the entire background area.

6. Background and Color Gradients in CSS

Gradients allow for smooth transitions between two or more colors.

Linear Gradients:

A linear gradient changes colors in a straight line, either vertically, horizontally, or at an angle.

css
background: linear-gradient(to right, #ff7e5f, #feb47b);

• This creates a gradient from #ff7e5f (a peach color) to #feb47b (a soft yellow).

Radial Gradients:

A radial gradient creates a circular gradient from the center outwards.

css
background: radial-gradient(circle, #ff7e5f, #feb47b);

• This creates a gradient starting from the center of the element, with the colors
transitioning from #ff7e5f to #feb47b.

Example:

css
div {
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Linear gradient */
color: white;
}

• The div will have a gradient background that transitions from peach to yellow, with the
text color set to white.

7. Creating and Using a Simple External CSS File

To separate structure from style and improve website maintainability, it is recommended to store
CSS rules in an external CSS file.
Steps:

1. Create an External CSS File:

o Create a file named styles.css containing your CSS rules.

css
/* styles.css */
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}

h1 {
color: darkblue;
text-align: center;
}

2. Link the External CSS File in HTML:

o In the HTML <head> section, link to the styles.css file.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example using an external CSS file.</p>
</body>
</html>

• The link tag connects the external CSS file to the HTML, applying all styles defined in
styles.css.

8. Using Internal and Inline CSS

In addition to external CSS, you can use internal and inline CSS.

Internal CSS:
Internal CSS is written inside the <style> tag in the <head> section of the HTML file.

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

Inline CSS:

Inline CSS is used for styling individual HTML elements directly within the style attribute.

html
<p style="color: red; font-size: 20px;">This is an inline styled paragraph.</p>

• Inline CSS is limited to the individual element, whereas internal and external styles can
apply to multiple elements on the page.

5.3 Working with Block Elements and Objects, Lists and Tables, CSS ID and Class, Box
Model (Introduction, Border Properties, Padding Properties, Margin Properties), CSS
Advanced (Grouping, Dimension, Display, Positioning, Floating, Align, Pseudo-Classes,
Navigation Bar, Image Sprites, Attribute Selector), CSS Color, Creating Page Layout and
Site Designs

In this section, we'll cover a range of topics that include working with block-level elements,
lists, tables, CSS ID and Class selectors, the box model, and advanced CSS techniques for
creating layouts, navigation bars, styling images, and much more.

1. Working with Block Elements and Objects

In CSS, elements can be categorized into block-level and inline elements. Block-level elements
occupy the full width of their parent container, starting on a new line. Common block-level
elements include <div>, <p>, <h1>, <ul>, and <ol>.

Block Elements:

• <div>: A generic container used for grouping elements.

• <p>: Represents a paragraph of text.
 • <h1>, <h2>, <h3>: Headings of various levels.
• <ul>, <ol>, <li>: Unordered and ordered lists.
• <table>, <tr>, <td>: Defines a table structure.

Example of Block Elements:

html
<div>
<h1>Heading 1</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
</div>

2. Working with Lists and Tables

Lists:

Lists in HTML can be ordered (<ol>) or unordered (<ul>). Each item in the list is marked by an
<li> tag.

• Unordered List (Bullets):

html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

• Ordered List (Numbers):

html
<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Tables:

Tables are used for displaying tabular data. They are created using the <table>, <tr>, <th>, and
<td> elements.
 • Table Example:

html
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

3. CSS ID and Class Selectors

• ID Selector (#): Targets an element with a specific id. IDs should be unique within a
page.

css
#header {
background-color: blue;
color: white;
}
html
<div id="header">This is a header</div>

• Class Selector (.): Targets multiple elements with the same class. Classes can be reused.

css
.highlight {
background-color: yellow;
}
html
Copy
<div class="highlight">This text is highlighted</div>

4. Box Model (Introduction, Border, Padding, Margin Properties)

The box model in CSS describes the layout of elements and how their content, padding, border,
and margin affect their total size.

• Content: The actual content of the element (e.g., text or images).

• Padding: Space between the content and the border.
 • Border: Surrounds the padding (if defined).
• Margin: Space outside the border, separating the element from others.

Box Model Properties:

• border: Defines the border around an element (e.g., 2px solid black).
• padding: Space between the element’s content and the border.
• margin: Space outside the element's border, between other elements.

Example:

css
div {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}

• The div will have 300px width, 20px padding, 5px solid black border, and 10px
margin.

5. CSS Advanced

Grouping Selectors:

Grouping selectors allows you to apply the same styles to multiple elements.

css
h1, h2, p {
color: blue;
}

This will apply the blue color to <h1>, <h2>, and <p> elements.

Dimension Properties:

CSS properties like width, height, max-width, and min-height control the dimensions of
elements.

css
div {
width: 50%;
height: 200px;
}

Display Property:

The display property defines how an element behaves in the layout.

• block: Element takes up the full width available and starts on a new line.
• inline: Element only takes up as much width as it needs and does not start a new line.
• inline-block: Behaves like an inline element but can have width and height.
• none: Hides the element.

css
div {
display: inline-block;
}

Positioning (Static, Relative, Absolute, Fixed):

The position property defines how elements are positioned in the document.

• static: Default positioning.

• relative: Positioned relative to its normal position.
• absolute: Positioned relative to the nearest positioned ancestor.
• fixed: Positioned relative to the viewport.

css
div {
position: absolute;
top: 20px;
left: 50px;
}

Floating and Aligning:

• float: Moves an element to the left or right, allowing text and inline elements to wrap
around it.
• clear: Prevents elements from wrapping around floating elements.

css
img {
float: left;
margin-right: 20px;
}

Pseudo-Classes:
A pseudo-class targets elements in specific states (e.g., :hover, :focus, :first-child).

css
a:hover {
color: red;
}

Navigation Bar:

A navigation bar can be created using <nav>, <ul>, and <li> elements. Use CSS to style the
links.

html
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
css
Copy
nav ul {
list-style-type: none;
padding: 0;
}

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

nav ul li a {
text-decoration: none;
color: black;
}

nav ul li a:hover {
color: blue;
}

Image Sprites:

Image sprites combine multiple images into a single image file. CSS is used to display only the
portion of the image you need.
css
.icon {
background-image: url('sprite.png');
width: 32px;
height: 32px;
background-position: -64px 0;
}

• This would display the 32x32px portion of sprite.png at the 64px offset.

Attribute Selector:

CSS also allows selection of elements based on their attributes.

css
a[href^="https"] {
color: green;
}

• This targets links (<a>) whose href attribute starts with https and styles them with a
green color.

6. CSS Color

CSS supports several ways to define colors:

• Named Colors: (red, blue, green)

• Hexadecimal: (#ff0000, #0000ff)
• RGB: (rgb(255, 0, 0))
• RGBA: (rgba(255, 0, 0, 0.5) - with transparency)
• HSL: (hsl(0, 100%, 50%))
• HSLA: (hsla(0, 100%, 50%, 0.5) - with transparency)

css
div {
background-color: rgba(255, 0, 0, 0.5);
}

7. Creating Page Layout and Site Designs

Multi-Column Layout:

You can use flexbox or grid to create responsive layouts.

Example: Flexbox:

css
.container {
display: flex;
justify-content: space-between;
}

Example: Grid:

css
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
}

Responsive Design:

Use media queries to make the website responsive to different screen sizes.

css
@media (max-width: 768px) {
.container {
display: block;
}
}