Internet Development
03 Introduction to CSS
Dr. Fatma Sakr
2
Agenda
Introduction
CSS Syntax
CSS Selector
Fonts and Colors
Summary
2-Mar-24
3
Introduction
2-Mar-24
4
Cascading Style Sheets (CSS)
Describes the appearance, layout, and presentation of information on a
web page.
Remember : “ HTML describes the content of the page”.
Describes how information is to be displayed, not what is being
displayed.
Can be embedded in HTML document or placed into separate css file.
2-Mar-24
5
Why Use CSS?
Used to define styles for your web pages.
Including the design
Layout and variations in display for different devices and screen sizes.
Saves a lot of work
With an external stylesheet file, you can change the look of an entire website by
changing just one file
2-Mar-24
6
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
CSS is connected to the Document Object Model (DOM).
The word cascading means that a style applied to a parent element will also
apply to all children elements within the parent. So, if you set the color of the
body text to "blue", all headings, paragraphs, and other text elements within
the body will also get the same color (unless you specify something else)!
2-Mar-24
7
Why Use CSS?
With CSS and its integration with the DOM,
You can quickly and easily restyle any element.
For example, if you don’t like the default look of the <h1>, <h2>, and other
heading tags,
You can assign new styles to override the default settings for many properties.
2-Mar-24
8
CSS Syntax
2-Mar-24
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.
2-Mar-24
10
CSS Syntax: Example
All <p> elements will be center-aligned, with a red text color.
p is a selector that 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
p {
color: red;
text-align: center;
} CSS
2-Mar-24
11
Importing a Stylesheet
There are three ways of inserting a style sheet:
External CSS: by using a <link> element to link to an external CSS file
Internal CSS: by using a <style> element in the <head> section
Inline CSS: by using the style attribute inside HTML elements
2-Mar-24
12
Importing a Stylesheet
External CSS:
You can also include a stylesheet with the HTML <link> tag:
You can also use as many <link> elements as you like in your HTML.
<link rel='stylesheet' href='styles.css’>
CSS
The rel attribute specifies the relationship between the current document and the
linked document. Only used if the href attribute is present.
3-Mar-24
13
Importing a Stylesheet
External CSS:
An external style sheet is used to define the style <!DOCTYPE html>
<html>
for many HTML pages. <head>
<link rel="stylesheet" href="styles.css">
</head>
To use an external style sheet, add a link to it in <body>
the <head> section of each HTML page: <h1>This is a heading</h1>
<p>This is a paragraph.</p>
With an external style sheet, you can change the </body>
</html>
look of an entire web site, by changing one file! CSS
The external style sheet can be written in any text
editor. The file must not contain any HTML code,
and must be saved with a .css extension. 3-Mar-24
Importing a Stylesheet: Example 1 14
<html>
<head>
<link rel='stylesheet' href='mystyles.css'>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> HTML
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
mystyles.css
2-Mar-24
15
Importing a Stylesheet
Internal CSS:
Used if one single HTML page has a unique style.
Is defined inside the <style> element, inside the head section.
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head> CSS
2-Mar-24
Importing a Stylesheet: Example 2 16
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> HTML
2-Mar-24
17
Importing a Stylesheet
Inline CSS:
Used to apply a unique style for a single element.
To use it, add the style attribute to the relevant element.
<h1 style="color:blue; text-align:center;">This is a heading</h1>
CSS
2-Mar-24
Importing a Stylesheet: Example 3 18
<html>
<head>
</head>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html> HTML
2-Mar-24
19
CSS Selector
2-Mar-24
20
CSS Selector
Used to find the HTML elements you want to style.
We can divide CSS selectors into categories:
Simple selectors: select elements based on name, id, class.
Combinator selectors select elements based on a specific relationship between
them.
2-Mar-24
21
Type Selector
Selects HTML elements based on the element name.
Here, all <p> elements on the page will be center-aligned, with a red
text color:
p {
color: red;
text-align: center;
} CSS
2-Mar-24
22
Type Selector: Example 4
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the
style.</p>
<p>And me!</p>
</body>
</html>
HTML
2-Mar-24
23
Descendant Selector
Let you apply styles to elements that are contained within other
elements.
Example: sets all text within <b>...</b> tags to red, but only if those tags occur
within <p>...</p> tags.
p b {
color: red;
} CSS
2-Mar-24
24
Descendant Selector: Example 5
<html>
<head>
<style>
ol ol { list-style-type:lower-alpha; }
</style>
</head>
<body>
<ol>
<li>One</li> <li>Two</li>
<li>Three
<ol>
<li>One</li> <li>Two</li>
<li>Three</li>
</ol>
</li>
</ol>
</body>
</html>
2-Mar-24
HTML
<!DOCTYPE html>
<html>
25
<head>
<style>
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; }
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li> The Output
</ol>
</body> 3-Mar-24
</html> HTML
26
id Selector
Uses the id attribute to select a specific HTML element.
The id is unique within a page, so it is used to select a unique element.
Note: An id name cannot start with a number!
To define it, write a hash (#) followed by the id of the element:
#para1 {
color: red;
text-align: center;
} CSS
2-Mar-24
27
id Selector: Example 6
<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>
HTML
2-Mar-24
28
class Selector
Used to select HTML elements with a specific class attribute.
To select elements with a specific class, write a dot (.) character,
followed by the class name.
.center {
color: red;
text-align: center;
} CSS
2-Mar-24
29
class Selector: Example 7
<html>
<head>
<style>
.center{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center“ > Red and center heading</h1>
<p class="center"> Red and center paragraph.</p>
</body>
</html>
HTML
2-Mar-24
30
class Selector
You can also specify that only specific HTML elements should be
affected by a class.
HTML elements can also refer to more than one class.
p.center {
color: red;
text-align: center;
} CSS
<p class="center large">This paragraph refers to
two classes.</p>
HTML
2-Mar-24
31
class Selector
If some properties have been defined for the same selector (element) in
different style sheets
The value from the last read style sheet will be used.
h1 { h1 {
color: navy; color: orange;
} CSS } CSS
2-Mar-24
HTML Color Values 32
SET 372 – Internet Development 3-Mar-24
33
CSS Grouping Selector
Selects all the HTML elements with the same style definitions.
h1, h2, and p elements have the same style definitions.
h1 {
color: red;
text-align: center;
}
h2 { h1, h2, p {
color: red; color: red;
text-align: center;
} = }
text-align: center;
p { CSS
color: red;
text-align: center;
} CSS
2-Mar-24
34
Cascading Order
What style will be used when there is more than one style is used?
The style that has the highest priority:
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.
2-Mar-24
35
Cascading Order: Example 8
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set
with inline CSS, and also with an internal CSS,
and also with an external CSS.</p>
</body>
</html> HTML
Type attribute default value is "text/css", which indicates that the content is CSS. For now, the only
3-Mar-24
supported value is "text/css"
36
Fonts
You can change four main font properties using CSS:
font-family
font-style,
font-size,
font-weight.
2-Mar-24
37
font-family
The font-family property assigns the font to use
If font name is made up of two or more words
p {
font-family: Georgia;
Enclose the name in quotation marks }
h2 {
font-family: "Courier New";
} CSS
This paragraph uses the first style above.
This h2 uses the second style above.
output
2-Mar-24
38
font-style
Used to choose to display a font p.normal {
font-style: normal;
}
normal - The text is shown normally p.italic {
font-style: italic;
}
italic - The text is shown in italics p.oblique {
font-style: oblique;
oblique - very similar to italic, but less supported. } CSS
This is a paragraph in normal style.
This is a paragraph in italic style.
This is a paragraph in oblique style
output
2-Mar-24
39
font-size
Used to sets the size of the text.
h1 {
font-size:240%;
}
This is heading 1 h2 {
font-size:200%;
This is heading 2 }
h3 {
This is heading 3 font-size:160%;
This is a paragraph. }
output CSS
The solution that works in all browsers, is to set a default font-size in percent for the
<body> element: i.e. body { font-size: 100%; } 3-Mar-24
40
font-size
pt specifies number of point, where a point is 1/72 of an inch on screen.
px specifies a number of pixels on the screen.
em specifies number of m-widths, where 1 em is equal to the font's current
size = 16 px. So i.e. 2.5 em = 2.5 *16 = 40 px
To allow users to resize the text (in the browser menu), many developers use
em instead of pixels.
3-Mar-24
41
Responsive Font Size: viewport width
The text size can be set with a vw unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is
50cm wide, 1vw is 0.5cm.
Example
<h1 style="font-size:10vw">Hello World</h1>
SET 372 – Internet Development 3-Mar-24
42
Responsive Font Size: viewport width
SET 372 – Internet Development 3-Mar-24
43
CSS properties for text
text-align: alignment of text within its element.
text-decoration: decorations such as underlining.
2-Mar-24
44
text-align
text-align can be left, right, center, or justify
blockquote { text-align: justify; }
h2 { text-align: center; }
CSS
The Gollum’s Quote
We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!
output
2-Mar-24
45
text-align
Can also be overline, line-through, blink, or none.
p {
text-decoration: underline;
Effects can be combined: }
CSS
text-decoration: overline underline;
This paragraph uses the style above.
output
2-Mar-24
46
CSS properties for colors
color : color of the element's text.
background-color: color that will appear behind the element.
p {
color: red;
background-color: yellow;
}
CSS
This paragraph uses the style above output
2-Mar-24
47
CSS properties for colors
p {
Color names: aqua, black, blue, color: red;
fuchsia, gray, green, lime, maroon, }
h2 {
navy, olive, purple, red, silver, teal, color: rgb(128, 0, 196);
}
white (white), yellow
h4 {
color: #FF8800;
RGB codes: red, green, and blue } CSS
values from 0 (none) to 255 (full) This paragraph uses the first style above
hex codes: RGB values in base-16
This h2 uses the second style above.
from 00 (0, none) to FF (255, full)
This h4 uses the third style above. output
2-Mar-24
Summary 48
Introduction
CSS Syntax
CSS Selector
Fonts and Colors
Summary
2-Mar-24
Questions
