Web Programming
02 Introduction to CSS
Dr. Mostafa Elgendy
Agenda 2
❖ Introduction
❖ CSS Syntax
❖ CSS Selector
❖ Fonts and Colors
❖ More Styles
❖ Box Model
❖ Summary
18-Oct-23
3
Introduction
18-Oct-23
Cascading Style Sheets (CSS) 4
❖ Describes the appearance, layout, and presentation of information on a
web page.
❖ 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.
18-Oct-23
Why Use CSS? 5
❖ 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
18-Oct-23
Why Use CSS? 6
❖ 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).
18-Oct-23
Why Use CSS? 7
❖ 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.
18-Oct-23
8
CSS Syntax
18-Oct-23
CSS Syntax 9
❖ 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.
18-Oct-23
CSS Syntax: Example 10
❖ 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
18-Oct-23
Importing a Stylesheet 11
❖ There are three ways of inserting a style sheet:
❖ External CSS
❖ Internal CSS
❖ Inline CSS
18-Oct-23
Importing a Stylesheet 12
❖ 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
18-Oct-23
Importing a Stylesheet: Example 1 13
<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;
} CSS
18-Oct-23
Importing a Stylesheet 14
❖ 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
18-Oct-23
Importing a Stylesheet: Example 2 15
<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
18-Oct-23
Importing a Stylesheet 16
❖ 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
18-Oct-23
Importing a Stylesheet: Example 3 17
<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
18-Oct-23
18
CSS Selector
18-Oct-23
CSS Selector 19
❖ 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.
18-Oct-23
Type Selector 20
❖ 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
18-Oct-23
Type Selector: Example 4 21
<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
18-Oct-23
Descendant Selector 22
❖ 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
18-Oct-23
Descendant Selector: Example 5 23
<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> HTML
18-Oct-23
id Selector 24
❖ 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
18-Oct-23
id Selector: Example 6 25
<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
18-Oct-23
class Selector 26
❖ Used to select HTML elements with a specific class attribute.
❖ To select elements with a specific class, write a period (.) character,
followed by the class name.
.center {
color: red;
text-align: center;
} CSS
18-Oct-23
class Selector: Example 7 27
<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
18-Oct-23
class Selector 28
❖ 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
18-Oct-23
class Selector 29
❖ 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
18-Oct-23
CSS Grouping Selector 30
❖ 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
18-Oct-23
Cascading Order 31
❖ 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.
18-Oct-23
Cascading Order: Example 8 32
<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
18-Oct-23
33
Fonts and Colors
IS388 - Web Programming 18-Oct-23
Fonts 34
❖ You can change four main font properties using CSS:
❖ font-family
❖ font-style,
❖ font-size,
❖ font-weight.
18-Oct-23
font-family 35
❖ 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
18-Oct-23
font-style 36
❖ 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 CSS
This is a paragraph in normal style.
This is a paragraph in italic style.
output
18-Oct-23
font-size 37
❖ Used to sets the size of the text.
h1 {
font-size:240%;
This is heading 1 }
h2 {
This is heading 2 font-size:200%;
}
This is heading 3 h3 {
This is a paragraph. font-size:160%;
output }
CSS
18-Oct-23
font-size 38
❖ pt specifies number of point, where a point is 1/72 of an inch onscreen.
❖ 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.
18-Oct-23
CSS properties for text 39
❖ text-align: alignment of text within its element.
❖ text-decoration: decorations such as underlining.
18-Oct-23
text-align 40
❖ 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
18-Oct-23
text-align 41
❖ 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
18-Oct-23
CSS properties for colors 42
❖ 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
18-Oct-23
CSS properties for colors 43
p {
❖ Color names: aqua, black, blue, color: red;
fuchsia, gray, green, lime, maroon, }
h2 {
navy, olive, purple, red, silver, color: rgb(128, 0, 196);
}
teal, 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
18-Oct-23
44
More Styles
IS388 - Web Programming 18-Oct-23
Inheriting styles 45
❖ When multiple styles apply to
body { font-family: sans-serif; background-color: yellow; }
an element, they are inherited p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }
❖ A more tightly matching rule CSS
can override a more general
inherited rule.
IS388 - Web Programming 18-Oct-23
Sections of a page <div> 46
❖ The <div> tag defines a division or a section in an HTML document.
❖ The <div> tag is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.
❖ The <div> tag is easily styled by using the class or id attribute.
❖ Any sort of content can be put inside the <div> tag!
IS388 - Web Programming 18-Oct-23
Sections of a page <div> 47
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html> HTML
IS388 - Web Programming 18-Oct-23
Creating Web Layout using Div 48
❖ div tag can be used for creating a layout of web pages.
❖ We can also create web layout using tables tag but table tags are very
complex to modify the layout.
❖ The div tag is very flexible in creating web layouts and easy to modify.
IS388 - Web Programming 18-Oct-23
Creating Web Layout using Div 49
IS388 - Web Programming 18-Oct-23
50
Box Model
IS388 - Web Programming 18-Oct-23
The Box Model and Layout 51
❖ The box model of an object starts at the outside, with the object’s
margin.
❖ Inside this is the border, then there is padding between the border and
the inner contents.
❖ Finally, you have the object’s contents.
IS388 - Web Programming 18-Oct-23
Margins 52
❖ Separates elements from each other.
❖ When setting the margin property:
❖ You can supply one, two, three, or four arguments.
/* Set all margins to 1 pixel */
margin:1px;
/* Set top and bottom to 1 pixel, and left and right to 2 */
margin:1px 2px;
/* Set top to 1 pixel, left and right to 2, and bottom to 3 */
margin:1px 2px 3px;
/* Set top to 1 pixel, right to 2, bottom to 3, and left to 4 */
margin:1px 2px 3px 4px;
CSS
IS388 - Web Programming 18-Oct-23
Margins 53
<html>
<head>
<link rel='stylesheet' href='mystyles.css'>
</head>
<body>
<table>
<tr>
<td>
<div id='object1’>
margin:<br>10px 20px 30px 40px;
</div>
</td>
</tr>
</table>
</body>
</html> HTML
IS388 - Web Programming 18-Oct-23
Borders 54
❖ The main properties used to modify
borders are /* All borders */
border-width:1px;
❖ border, border-left, border-top, border- /* Top/bottom and left/right */
border-width:1px 5px;
right, and border-bottom. /* Top, left/right, and bottom */
border-width:1px 5px 10px;
/* Top, right, bottom, and left */
❖ Each of these can have other sub properties border-width:1px 5px 10px 15px;
CSS
added as suffixes,
❖ such as -color, -style, and -width.
IS388 - Web Programming 18-Oct-23
Borders 55
IS388 - Web Programming 18-Oct-23
Padding 56
❖ is applied inside any borders and/or
margins. /* All padding */
padding:1px;
/* Top/bottom and left/right */
❖ The main properties padding:1px 2px;
/* Top, left/right, and bottom */
padding:1px 2px 3px;
❖ padding, padding-left, padding-top, /* Top, right, bottom, and left */
padding:1px 2px 3px 4px;
padding-right, and padding-bottom
IS388 - Web Programming 18-Oct-23
Padding 57
<html>
<head>
<style>
#object1 {
border-style: solid;
border-width: 1px;
background: orange;
color: darkred;
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id='object1'>To be, or not to be that is the
question:.
</div>
</body>
</html> HTML
IS388 - Web Programming 18-Oct-23
Padding 58
❖ is applied inside any borders and/or
margins. /* All padding */
padding:1px;
/* Top/bottom and left/right */
❖ The main properties padding:1px 2px;
/* Top, left/right, and bottom */
padding:1px 2px 3px;
❖ padding, padding-left, padding-top, /* Top, right, bottom, and left */
padding:1px 2px 3px 4px;
padding-right, and padding-bottom
IS388 - Web Programming 18-Oct-23
Padding 59
table {
width: 70%;
border: 1px solid #CCC;
border-spacing: 0;
}
table td {
padding: 15px;
background-color: #EEE;
border: 1px solid #CCC;
}
table thead td {
background-color: #f44336;
color: #FFF;
font-weight: bold;
text-align: center;
border-color: #F35246;
}
CSS
IS388 - Web Programming 18-Oct-23
Summary 60
❖ Fonts and Colors
❖ More Styles
❖ Box Model
❖ Summary
IS388 - Web Programming 18-Oct-23
Questions
Summary 62
❖ Introduction
❖ CSS Syntax
❖ CSS Selector
❖ Fonts and Colors
❖ Summary
18-Oct-23
Questions
