2. Week 7
Topics to be Discussed:
Introduction to CSS.
Why use CSS.
CSS Style sheets.
CSS Syntax, Selectors, Comments
CSS Colors
Positioning Elements: Absolute Positioning, z-index.
Positioning Elements: Absolute Positioning, span
3. Introduction to CSS
What is CSS?
CSS stands for Cascading Style
Sheets.
CSS removed the style
formatting from the HTML page!
CSS is the language we use to
style an HTML document.
CSS saves a lot of work. It can
control the layout of multiple web
pages all at once
External stylesheets are stored
in .css files.
Why is CSS?
HTML was NEVER intended to
contain tags for formatting a web
page!
HTML was created to describe
the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Development of large websites,
where fonts and color information
were added to every single page,
became a long and expensive
process.
To solve this problem, the World
Wide Web Consortium (W3C)
created CSS.
4. Why use CSS ?
CSS is used to define styles for the web pages, including the design,
layout and variations in display for different devices and screen sizes.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>Learning CSS.</p>
</body>
</html>
5. HTML Styles - CSS
CSS can be added to HTML documents in 3 ways:
1.Inline: by using the style attribute inside HTML elements
2.Internal: by using a <style> element in the <head> section
3.External: by using a <link> element to link to an external
CSS file
The most common way to add CSS, is to keep the styles in
external CSS files.
6. HTML Styles – Inline CSS
An inline CSS is used to apply a
unique style to a single HTML
element.
An inline CSS uses the style
attribute of an HTML element.
The following example sets the
text color of the <h1> element to
blue, and the text color of the
<p> element to red
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue
Heading</h1>
<p style="color:red;">A red
paragraph.</p>
</body>
</html>
7. HTML Styles – Internal CSS
An internal CSS is used to define a
style for a single HTML page.
An internal CSS is defined in the
<head> section of an HTML page,
within a <style> element.
The following example sets the text
color of ALL the <h1> elements (on
that page) to blue, and the text color of
ALL the <p> elements to red. In
addition, the page will be displayed
with a "powderblue" background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
8. HTML Styles – External CSS
With an external style sheet, you can
change the look of an entire website by
changing just one file!
Each HTML page must include a
reference to the external style sheet file
inside the <link> element, inside the
head section.
An external style sheet can be written
in any text editor, and must be saved
with a .css extension.
The external .css file should not
contain any HTML tags.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
body {
background-color: lightblue;
}
h1 { color: navy;
margin-left: 20px;
}
mystyle.css
9. CSS Syntax
A CSS rule consists of a selector and a declaration block.
The selector points to the HTML element you want to style.
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 CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
10. CSS Syntax
Example
p {
color: red;
text-align: center;
}
Example Explained:
p is a selector in CSS (it points to the HTML element
you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
11. CSS Selectors
A CSS selector selects the HTML element(s) you want to style.
CSS selectors are classified into five categories:
1.Simple selectors (select elements based on name, id, class)
2.Combinator selectors (select elements based on a specific relationship
between them)
3.Pseudo-class selectors (select elements based on a certain state)
4.Pseudo-elements selectors (select and style a part of an element)
5.Attribute selectors (select elements based on an attribute or attribute
value)
12. CSS element Selector
The element selector selects HTML elements based on the element
name.
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Example
Here, all <p> elements on the page will
be center-aligned, with a red text color:
p {
text-align: center;
color: red;
}
13. CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
To select an element with a specific id, write a hash (#) character, followed by the id of
the element.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Example
The CSS rule below will be applied to
the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
14. CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned
heading</h1>
<p class="center">Red and center-aligned
paragraph.</p>
</body>
Example
In this example all HTML elements
with class="center" will be red and
center-aligned:
.center {
text-align: center;
color: red;
}
15. CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Example
h1, h2, p {
text-align: center;
color: red;
}
16. CSS Comments
1. CSS comments are not displayed in the browser, but they can help document your source
code.
2. Comments are used to explain the code, and may help when we edit the source code at a later
date.
3. Comments are ignored by browsers.
4. A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
/* This is a single-line comment */
p {
color: red;
}
p {
color: red; /* Set text color to red */
}
p {
color: /*red*/blue;
}
/* This is
a multi-line
comment */
p {
color: red;
}
17. CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Color Color Hexadecimal Code
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
19. CSS Colors - RGB Values
This color value is specified using the rgb( ) property.
It takes three values, one each for red, green, and blue.
The value can be an integer between 0 and 255 or a percentage.
Color Color RGB
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,0)
rgb(0,255,255)
rgb(255,0,255)
rgb(192,192,192)
rgb(255,255,255)
20. CSS Background Color
Example
<h1 style="background-
color:DodgerBlue;">Hello
World</h1>
<p style="background-
color:Tomato;">Cascading Style
Sheets, fondly referred to as
CSS, is a simple design language
intended to simplify the process
of making web pages
presentable.</p>
<!DOCTYPE html>
<html>
<body>
<h1 style="background-
color:DodgerBlue;">Hello
World</h1>
<p style="background-
color:Tomato;">
Cascading Style Sheets, fondly
referred to as CSS, is a simple design
language intended to simplify the
process of making web pages
presentable.</p>
</body>
</html>
21. CSS Text Color
Example
<h1 style="color:Tomato;">Hello
World</h1>
<p style="color:DodgerBlue;">welcome
to CSS..</p>
<p
style="color:MediumSeaGreen;">Changin
g text color...</p>
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello
World</h3>
<p style="color:DodgerBlue;">Welcome
to CSS.</p>
<p
style="color:MediumSeaGreen;">Working
with TEXT colors</p>
</body>
</html>
23. CSS Text Color
Example
<h1 style="color:Tomato;">Hello
World</h1>
<p style="color:DodgerBlue;">welcome
to CSS..</p>
<p
style="color:MediumSeaGreen;">Changin
g text color...</p>
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello
World</h3>
<p style="color:DodgerBlue;">Welcome
to CSS.</p>
<p
style="color:MediumSeaGreen;">Working
with TEXT colors</p>
</body>
</html>
25. CSS Background Image
The background-image property specifies an image to use as the
background of an element.
By default, the image is repeated so it covers the entire element.
Example
Set the background image for a page:
body {
background-image: url("paper.gif");
}
27. CSS background-repeat: no-repeat
Showing the background image only once is also specified by the
background-repeat property:
Example
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
30. CSS Box Model
In CSS, the term "box model" is used when talking about design and
layout.
The CSS box model is essentially a box that wraps around every
HTML element. It consists of: content, padding, borders and margins.
The image below illustrates the box model:
31. CSS Box Model
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is
transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to
define space between elements.
32. CSS Box Model
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists
of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a
15px green border. </div>
</body>
</html>
35. CSS Layout - The z-index Property
The z-index Property:
When elements are positioned,
they can overlap other elements.
The z-index property specifies
the stack order of an element
(which element should be placed in
front of, or behind, the others).
An element can have a positive
or negative stack order:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRTfr_NR3pTKsr8b-
crbaViv5R3Yf4h9oWHX2iSIVGJWnlfwuhS5DSQ6
mz2Ny9s-JwNBlw&usqp=CAU">
<p>Because the image has a z-index of -1, it will be
placed behind the text.</p>
</body>
</html>
36. CSS Dropdowns
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
37. <style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
CSS-Dropdown Menu
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the
dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
42. Summary
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.
There are four ways to associate styles with your HTML document. Most commonly used methods are
inline CSS and External CSS.
A CSS rule consists of a selector and a declaration block.
CSS can be used to make forms look good. You can style forms using CSS to change the appearance of
form elements, such as text fields, checkboxes, radio buttons, select menus, and submit buttons.
CSS z-index property is used to control the stacking order of elements in a web page when they overlap
in the same stacking context. Elements with a higher z-index value appear in front of elements with
lower values.
Dropdown is a user interface element that includes a list of options. It allows the user to choose one
value from a list by hovering or clicking on a trigger element. It is typically used in navigation menus,
forms, and other interactive components of a website.
![© Dr. Khalid Nazim S.A. B.E., M. Tech, MBA[IT], PhD, LMISTE, LMCSI, MIE
Associate Professor,
Department of Computer Science & Information,
Majmaah University, Az- Zulfi Campus, KSA.
CSI 511: Web Programming and Internet Technology](https://image.slidesharecdn.com/week7workingwithcsspart1-250717041922-ad5caacb/85/working-with-internet-technologies-using-CSS-1-320.jpg)
