Scribd
Upload
16 views10 pages

Lecture 04 - Cascading Style Sheets-CSS

The document provides an overview of Cascading Style Sheets (CSS), which are used to define the visual presentation of HTML elements, including layout, color, and font. It explains the CSS syntax, including selectors, properties, and values, and describes three methods for inserting CSS into HTML documents: inline, internal, and external styles. Additionally, it outlines common types of selectors such as element, class, and ID selectors, along with examples of CSS properties.

Uploaded by

jkusekwa01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views10 pages

Lecture 04 - Cascading Style Sheets-CSS

The document provides an overview of Cascading Style Sheets (CSS), which are used to define the visual presentation of HTML elements, including layout, color, and font. It explains the CSS syntax, including selectors, properties, and values, and describes three methods for inserting CSS into HTML documents: inline, internal, and external styles. Additionally, it outlines common types of selectors such as element, class, and ID selectors, along with examples of CSS properties.

Uploaded by

jkusekwa01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Lecture 04

Cascading Style Sheet (CSS)


❖ Defines how to display HTML elements
❖ CSS is used to control the layout (positioning
elements on a webpage), color, font, and other
visual aspects of a web page.
❖ The CSS syntax mainly consists of selectors,
properties, and values
Example of web page layout/blocks
Sample Layout
1. Selectors
❖ Selectors are patterns used to select and style
HTML elements on a webpage.
❖ CSS selectors target specific HTML element to
apply styling
Syntax:
selector {
property: value; p{
} color: blue;
font-size: 16px;
}
some common types of selectors in CSS
1. Element Selector: Selects HTML elements based on their tag name. For
example
p {
color: blue;
}
This will select all <p> elements and apply the specified style
2. Class Selector: Selects elements based on their class attribute. For
example:
.highlight {
background-color: yellow;
}
This will select all elements with class="highlight" and apply the
specified style.
3. ID Selector: Selects a single element based on its ID
attribute. For example:
#header {
font-size: 24px;
}
This will select the element with id="header" and apply the
specified style
2. Properties and values
❖ CSS properties are used to specify the styling of an
element. They are key-value pairs that define how the
element should be displayed. Examples include ;
▪ color:
▪ font-size:
▪ background-color: white
▪ padding:
▪ margin:
❖ Examples of css with selectors, properties
and values
➢body {background-color:#b0c4de;}

➢h1 {background-color:#6495ed;}

➢p {background-color:#e0ffff;}

➢div {background-color:#b0c4de;}

➢h2 {font-style: italic;}


Three Ways to Insert CSS
❖ Inline style: applied directly to individual HTML elements using the
style attribute.

<p style="color: blue; font-size: 16px;">This is a para with inline styles.</p>

❖ Internal style: defined within the <style> element in the <head>


section of an HTML document, allows styling multiple elements.
<head>
<style>
p { color: blue;
font-size: 16px;
}
</style>
</head>
Three Ways to Insert CSS cont.
❖ External style : stored in external CSS files and linked to
HTML documents using the <link> element.
❖ Provides good organization and easy to maintain
❖ Ideal when the style is applied to many pages
❖ The file should not contain any html tags but saved with a
.css extension.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

You might also like