CS 283
Lecture 03: Cascading Style Sheets
(Fall 2022/2023)
Dr. Nehal M. Ali
CS283 1
Stands for Cascading Style Sheets
Primarily used for Considering the
variations in display
styling the display of of devices and screen
the HTML elements. sizes.
What is CSS?
Saves considerable time and efforts by
defining the styling of multiple pages only
once.
It also allows creating one HTML page with
multiple styles!
CS283 2
The HTML was basically created to
determine the content of web pages
rather than their styles!
Why is When the styling tags were introduced in
CSS HTML 3.2, the developers suffered a lot
applying them in every HTML element.
needed ? To resolve this, CSS were primarily
introduced by the World Wide Web
Consortium (W3C).
CSS Basic Syntax
CSS Selectors
• Simple selectors → select elements based on id, Class or name.
• Combinator selectors → select HTML elements based on the relevance between them
• Pseudo-class selectors → select HTML elements based on a specific state.
• Pseudo-elements selectors → select and style a specific part of an HTML element.
• Attribute selectors → select elements based on an attribute or attribute value
Simple Element Selectors
• Element Selector based on element • Element Selector based on element
Name ID
h1 { #para1 {
color: Blue; color: Blue;
text-align: center; text-align: center;
} }
<h1> some content</h1> <h1 id=“para1”> some
content</h1>
Simple Element Selectors (cont.)
• Element Selector based on element • Element Selector of HTML elements
class with specific class
.center { h1.center{
color: Blue; color: Blue;
text-align: center; text-align: center;
} }
<h1 class=“center”>
<h1 class=“center”> some content</h1>
some content</h1>
<h1> some content</h1>
Simple Element Selectors (Cont.)
• HTML elements can refer to more than one class.
h1.center {
text-align: center;
color: blue;
}
h1.large {
font-size: 400%;
}
<h1 class="center large">some heading content.</h1>
Grouping Selector
• Group the selectors with the same style
definitions.
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
h1, h2 {
text-align: center;
color: blue;
}
Universal Selector
• Applies to the entire elements of the HTML page
* {
text-align: center;
color: blue;
}
Applying CSS in HTML
Applying CSS in HTML
External CSS
Internal CSS
Inline CSS
<!DOCTYPE html>
<html>
<head>
External body {
background-color: yellow;
<link rel="stylesheet" href="my
style.css">
CSS } </head>
<body>
h1 {
color: green; <h1>some heading content</h1>
margin-right: 60px; <h2>some heading 2 content</h2>
}
</body>
</html>
• Defined as a <style> element
within the <head> section.
• Can be applied in case a single
HTML page has a unique style.
Internal
CSS <head>
<style>
body {
background-color: yellow;
}
h1 {
color: green;
margin-right: 60px;
}
</style>
</head>
Inline CSS
• Defined inside the "style" attribute.
• Not the best practice.
<body>
<p style="color:maroon;text-align:right;">paragraph content</p>
</body>
Inline style → Highest
priority
Cascading External and internal
Order style sheets
Browser default
Defining multiple styles for the same selector
• If an external CSS and an Internal CSS were defined for the same element,
the most recently-mentioned style is applied.
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
body {
<style>
background-color: Orange;
body {
}
background-color: yellow;
} </style>
</head>
External CSS
Internal CSS
CSS comments /*…*/
• CSS (like HTML) is usually not commented as rigorously as
programming languages such as Java
• The // single-line comment style is NOT supported in CSS
• The <!-- ... --> HTML comment style is also NOT supported
in CSS
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
}
CSS
CS380 18
19
Specifying colors
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS
This paragraph uses the first style above
This h2 uses the second style above.
This h4 uses the third style above.
output
• color names: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white (white), yellow
• RGB codes: red, green, and blue values from 0 (none) to 255 (full)
• hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
Specifying colors
color names: aqua, RGB codes: red, hex codes: RGB
black, blue, fuchsia,
green, and blue values in base-16
gray, green, lime,
maroon, navy, olive, values from 0 from 00 (0, none)
…… (none) to 255 (full) to FF (255, full)
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS
This paragraph uses the first style above
This h2 uses the second style above.
This h4 uses the third style above.
output
20
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)
Backgrounds in CSS
• div {
background-color: yellow;
}
• body {
background-image: url(“simpleImage.jpg");
}
• body {
background-
image: url(“cloudImg.png");
Background background-repeat: repeat-y;
}
Repeat
• The background- • body {
image property background-image: url(“Logo.png");
background-repeat: no-repeat;
by default }
repeats the • body {
background background-image: url(“logo.png");
image image background-repeat: no-repeat;
background-position: Left top;
both horizontally }
and vertically.
Background • Determines
Attachment whether a body {
background background-image: url(“logo.png");
background-repeat: no-repeat;
image shall be background-position: Left top;
scrolled with background-attachment: fixed;
the page. }
body {
background-image: url(“logo.png");
background-repeat: no-repeat;
background-position: Left top;
background-attachment: Scroll;
}
body {
background-color: #FF8800;
background-
image: url(“logo.png");
background-repeat: repeat-y;
Background }
background-position: right left;
Shorthand
body {
background: #FF8800 url(“logo.png") repeat-y
right left;
}
CSS Borders
Different borders with different classes example!
https://www.w3schools.com/css/tryit.asp?filename=trycss_border-color1
CSS Borders
Styling each border separately !
p {
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: solid;
border-left-style: dotted;
}
• Defines the space around any defined borders of
an element.
property description
CSS
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
Margins margin-right
margin-top
margin on right side only
margin on top side only
Complete list of margin properties
http://www.w3schools.com/css/css_reference.asp#margin
• Defines the space around any defined borders of
an element.
CSS div {
margin-top: 90px;
Margins margin-bottom: 150px;
margin-right: 100px;
margin-left: 100px;
}
• Defines the space around the
content within an element.
div {
padding-top: 40px;
CSS padding-right: 70px;
padding-bottom: 70px;
padding-left: 40px;
Padding }
OR
div {
padding: 25px 50px 75px 100px;
}
• Defines the space around the
content within an element.
property description
CSS padding
padding-bottom
padding-left
padding on all 4 sides
padding on bottom side only
padding on left side only
Padding padding-right
padding-top
padding on right side only
padding on top side only
Complete list of padding properties
http://www.w3schools.com/css/css_reference.asp#padding
CSS Icons
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Ico
ns">
</head>
<body>
<h1>Google icon library</h1>
<p>Some Google icons:</p>
<i class="material-icons">traffic</i>
<i class="material-icons">computer</i>
<i class="material-icons">cloud</i>
<i class="material-icons">attachment</i>
<i class="material-icons">favorite</i>
</body>
</html>
CSS Text
• Determined by the “color” property.
body {
color: orange;
letter-spacing: 5px;
}
div {
background-color: black;
color: white;
text-align: left;
text-transform: uppercase;
text-indent: 50px;
}
h1{text-shadow: 2px 2px;}
Font Family
https://fzheng.me/2015/08/14/font-family/
CSS Fonts
.p1 {
font-family: Arial, Helvetica, sans-serif;
}
• Fallback Fonts The best practice is to .p2 {
have several font names ordered by the font-family: "Lucida Console", "Courier New", monospace;
priority for your design. And end with a font-size: 40px;
generic family. }
• Web safe fonts are fonts that are
globally installed across all devices. .p3 {
font-family: "Times New Roman", Times, serif;
• Font style: bold,italic.. font-style: italic;
}
Using Google Fonts!
• <head>
<link rel="stylesheet" href="https://font
s.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
CSS Links
Link State Description
a:link unvisited link
a:visited The user has visited this link
a:hover The mouse has hovered this
link
a:active The moment of clicking the
link
CSS Links (Cont.)
• a:link {
color: blue;
}
/* visited link */
a:visited {
color: purple;
}
/* mouse over link */
a:hover {
color: orange;
}
/* selected link */
a:active {
color: green;
}
CSS Tables
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 70px;
} https://www.w3schools.com/css/tryit.asp?filename=trycss_table_width
CSS Lists
• ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
• ul {
list-style-image: url(mybullet.gif');
}
• div {
overflow: scroll;
}
CSS Value Description
overflow
overflow: visible Displays the content regardless of
the element size
overflow: hidden Shows only the content that can fit
within the element space
Property Overflow: scroll
overflow: auto
A scroll bar is shown to scroll within
the element area
Same as the “scroll” value with the
difference that the scroll bars are
shown as needed.
• specifies the transparency of an element.
img {
opacity: 0.3;
Opacity / }
Transparency
img:hover {
Property }
opacity: 1.0;
Example :
https://www.w3schools.com/css/tryit.asp?filename=trycss_ima
ge_transparency
Linking to sections
of a web page
• Link target can include an ID at the end, preceded by a #
• Browser will load that page and scroll to element with
given ID
<p>Visit <a href=
"http://www.textpad.com/download/index.html#downloads">
textpad.com</a> to get the TextPad editor.</p>
<p><a href="#mission">View our Mission Statement</a></p>
HTML
Visit textpad.com to get the TextPad editor.
View our Mission Statement
output
CS380 42
CSS Combinator
Selectors
CSS Combinator
Selectors
Combinator Description
descendant selector (space) selects all descendant elements of the specified element.
child selector (>) Selects only the child elements of the specified element.
Adjacent Sibling Selector (+) select an element that is immediately after another specified element.
General Sibling Selector (~) all elements that are next siblings of a specified element.
Descendant selector (space)
div p {
background-color: lightblue;
}
<body>
<<h2>An example of a Descendant Selector</h2>
<div>
<p>Paragraph 1 </p>
<p>Paragraph 2 </p>
<section><p>Paragraph 3</p></section>
</div>
<p>Paragraph 4. </p>
<p>Paragraph 5. </p>
</body>
Child selector (>)
Div > p {
background-color: lightblue;
}
<body>
<h2>An example of a Child Selector</h2>
<div>
<p>Paragraph 1 </p>
<p>Paragraph 2 </p>
<section><p>Paragraph 3</p></section>
</div>
<p>Paragraph 4. </p>
<p>Paragraph 5. </p>
</body>
Adjacent Sibling Selector (+)
Div + p {
background-color: lightblue;
}
<body>
<h2>An example of an Adjecent sibling Selector</h2>
<div>
<p>Paragraph 1 </p>
<p>Paragraph 2 </p>
<section><p>Paragraph 3</p></section>
</div>
<p>Paragraph 4. </p>
<p>Paragraph 5. </p>
</body>
General Sibling Selector (~)
Div ~ p {
background-color: lightblue;
}
<body>
<h2>An example of an General sibling Selector</h2>
<div>
<p>Paragraph 1 </p>
<p>Paragraph 2 </p>
<section><p>Paragraph 3</p></section>
</div>
<p>Paragraph 4. </p>
<p>Paragraph 5. </p>
</body>
Attendance
Project –Teams Form
