Ict 8 css
ChristianReglos
554 views
44 slides
Nov 28, 2018
Slide 1 of 44
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
About This Presentation
ICT8 CSS
Slide Content
LORD JESUS, teacher of all students,
I entrust my learning to you.
Open my mind to your grace , O Lord.
As I begin my study today.
You are the source of all wisdom and truth;
So guide me along the right path,
That I may persevere in my studies and
scholarship.
May I learn well, What I need to know;
May I understand, What I need to learn;
May I remember, What I need to explain.
ALL this, We pray…to your Holy name .
AMEN.
I entrust my learning to you.
Open my mind to your grace , O Lord.
As I begin my study today.
You are the source of all wisdom and truth;
So guide me along the right path,
That I may persevere in my studies and
scholarship.
May I learn well, What I need to know;
May I understand, What I need to learn;
May I remember, What I need to explain.
ALL this, We pray…to your Holy name .
AMEN.
GOOD MORNING /
AFTERNOON
AFTERNOON
4
(Cascading Style Sheet)
CSS
Prepared by:
Christian Jay B Tantan
(Cascading Style Sheet)
CSS
Prepared by:
Christian Jay B Tantan
Styling HTML with CSS
CSS stands
for Cascading Style Sheets.
CSS describes how HTML elements
are to be displayed on screen,
paper, or in other media.
CSS saves a lot of work. It can
control the layout of multiple web pages
all at once.
5
CSS stands
for Cascading Style Sheets.
CSS describes how HTML elements
are to be displayed on screen,
paper, or in other media.
CSS saves a lot of work. It can
control the layout of multiple web pages
all at once.
5
CSS can be added to HTML elements in 3
ways:
Inline - by using the style attribute in
HTML elements
Internal - by using a <style> element
in the <head> section
External - by using an external CSS
file
6
ways:
Inline - by using the style attribute in
HTML elements
Internal - by using a <style> element
in the <head> section
External - by using an external CSS
file
6
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.
This example sets the text color of
the <h1> element to blue:
7
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.
This example sets the text color of
the <h1> element to blue:
7
Example
h1 style="color:blue;">This is a Blue
Heading</h1>
Try it Yourself »
8
h1 style="color:blue;">This is a Blue
Heading</h1>
Try it Yourself »
8
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:
9
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:
9
Example
<!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>
10
<!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>
10
External CSS
An external style sheet is used to define
the style for many HTML pages.
With an external style sheet, you
can change the look of an entire
web site, by changing one file!
To use an external style sheet, add a
link to it in the <head> section of the
HTML page:
11
An external style sheet is used to define
the style for many HTML pages.
With an external style sheet, you
can change the look of an entire
web site, by changing one file!
To use an external style sheet, add a
link to it in the <head> section of the
HTML page:
11
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
12
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
12
CSS Fonts
The CSS color property defines the text
color to be used.
The CSS font-family property defines
the font to be used.
The CSS font-size property defines the
text size to be u
13
The CSS color property defines the text
color to be used.
The CSS font-family property defines
the font to be used.
The CSS font-size property defines the
text size to be u
13
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
14
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
14
CSS Border
The CSS border property defines a
border around an HTML element:
Example
p {
border: 1px solid powderblue;
}
15
The CSS border property defines a
border around an HTML element:
Example
p {
border: 1px solid powderblue;
}
15
CSS Padding
The CSS padding property defines a
padding (space) between the text and
the border:
Example
p {
border: 1px solid powderblue;
padding: 30px;
}
16
The CSS padding property defines a
padding (space) between the text and
the border:
Example
p {
border: 1px solid powderblue;
padding: 30px;
}
16
CSS Margin
The CSS margin property defines a
margin (space) outside the border:
Example
p {
border: 1px solid powderblue;
margin: 50px;
}
17
The CSS margin property defines a
margin (space) outside the border:
Example
p {
border: 1px solid powderblue;
margin: 50px;
}
17
The id Attribute
To define a specific style for one special
element, add an id attribute to the
element:
<p id="p01">I am different</p>
18
To define a specific style for one special
element, add an id attribute to the
element:
<p id="p01">I am different</p>
18
The class Attribute
To define a style for special types of
elements, add a class attribute to the
element:
<p class="error">I am different</p>
19
To define a style for special types of
elements, add a class attribute to the
element:
<p class="error">I am different</p>
19
External References
External style sheets can be referenced with
a full URL or with a path relative to the current
web page.
This example uses a full URL to link to a style
sheet:
Example
<link rel="stylesheet" href="https://www.w3sc
hools.com/html/styles.css">
20
External style sheets can be referenced with
a full URL or with a path relative to the current
web page.
This example uses a full URL to link to a style
sheet:
Example
<link rel="stylesheet" href="https://www.w3sc
hools.com/html/styles.css">
20
CSS Syntax
A CSS rule-set consists of a selector
and a declaration block:
21
A CSS rule-set consists of a selector
and a declaration block:
21
22
CSS Colors
Colors are specified using predefined
color names, or RGB, HEX, HSL,
RGBA, HSLA values.
23
Colors are specified using predefined
color names, or RGB, HEX, HSL,
RGBA, HSLA values.
23
CSS Backgrounds
The CSS background properties are used to
define the background effects for elements.
CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
24
The CSS background properties are used to
define the background effects for elements.
CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
24
Background Color
The background-color property
specifies the background color of an
element.
The background color of a page is set
like this:
Example
body {
background-color: lightblue;
} 25
The background-color property
specifies the background color of an
element.
The background color of a page is set
like this:
Example
body {
background-color: lightblue;
} 25
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.
The background image for a page can be set like
this:
Example
body {
background-image: url("paper.gif");
}
26
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.
The background image for a page can be set like
this:
Example
body {
background-image: url("paper.gif");
}
26
Background Image - Repeat Horizontally or
Vertically
By default, the background-image property repeats
an image both horizontally and vertically.
Some images should be repeated only horizontally or
vertically, or they will look strange, like this:
Example
body {
background-image: url("gradient_bg.png");
}
27
Vertically
By default, the background-image property repeats
an image both horizontally and vertically.
Some images should be repeated only horizontally or
vertically, or they will look strange, like this:
Example
body {
background-image: url("gradient_bg.png");
}
27
CSS Border Properties
The CSS border properties allow you to
specify the style, width, and color of an
element's border.
28
The CSS border properties allow you to
specify the style, width, and color of an
element's border.
28
Border Style
The border-style property specifies what kind of
border to display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
29
The border-style property specifies what kind of
border to display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
29
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on
the border-color value
ridge - Defines a 3D ridged border. The effect depends on the
border-color value
inset - Defines a 3D inset border. The effect depends on the
border-color value
outset - Defines a 3D outset border. The effect depends on the
border-color value
none - Defines no border
hidden - Defines a hidden border
30
groove - Defines a 3D grooved border. The effect depends on
the border-color value
ridge - Defines a 3D ridged border. The effect depends on the
border-color value
inset - Defines a 3D inset border. The effect depends on the
border-color value
outset - Defines a 3D outset border. The effect depends on the
border-color value
none - Defines no border
hidden - Defines a hidden border
30
Example
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
31
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
31
32
CSS Padding
The CSS padding properties are used
to generate space around an element's
content, inside of any defined borders.
With CSS, you have full control over the
padding. There are properties for
setting the padding for each side of an
element (top, right, bottom, and left).
33
The CSS padding properties are used
to generate space around an element's
content, inside of any defined borders.
With CSS, you have full control over the
padding. There are properties for
setting the padding for each side of an
element (top, right, bottom, and left).
33
Padding - Individual Sides
CSS has properties for specifying the
padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
34
CSS has properties for specifying the
padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
34
CSS Links
With CSS, links can be styled in
different ways.
35
With CSS, links can be styled in
different ways.
35
Styling Links
36
Links can be styled with any CSS
property (e.g. color, font-
family, background, etc.).
Example
a {
color: hotpink;
}
36
Links can be styled with any CSS
property (e.g. color, font-
family, background, etc.).
Example
a {
color: hotpink;
}
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses
over it
a:active - a link the moment it is clicked
37
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses
over it
a:active - a link the moment it is clicked
37
HTML Lists and CSS List Properties
In HTML, there are two main types of
lists:
unordered lists (<ul>) - the list items are
marked with bullets
ordered lists (<ol>) - the list items are
marked with numbers or letters
38
In HTML, there are two main types of
lists:
unordered lists (<ul>) - the list items are
marked with bullets
ordered lists (<ol>) - the list items are
marked with numbers or letters
38
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered
lists
Set an image as the list item marker
Add background colors to lists and list items
39
Set different list item markers for ordered lists
Set different list item markers for unordered
lists
Set an image as the list item marker
Add background colors to lists and list items
39
<!DOCTYPE html>
<html>
<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>
<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>
</ol>
</body>
</html>
40
<html>
<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>
<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>
</ol>
</body>
</html>
40
Table Code
<!DOCTY PE html>
<html>
<head>
<s ty le>
#c us tomers {
font-family : " Trebuc het MS", Arial, H elv etic a, s ans -s erif;
border-c ollaps e: c ollaps e;
w idth: 100%;
}
#c us tomers td, #c us tomers th {
border: 1px s olid #ddd;
padding: 8px ;
}
#c us tomers tr:nth- child(ev en){back ground- color: #f2f2f2;}
#c us tomers tr:hover {bac k gr ound-c olor: #ddd;}
#c us tomers th {
padding- top: 12px ;
padding- bottom: 12px ;
tex t-align: left;
back ground- c olor: #4CAF50;
c olor: w hite;
}
</s ty le>
</head>
<body>
<table id=" cus tomer s ">
<tr>
<th>Company </th>
<th>Contact< /th>
<th>Country </th>
</tr>
<tr>
<td>Alfreds Futterk is te</td>
<td>Mar ia Anders </td>
<td>Germany </td>
</tr>
<tr>
<td>Berglunds snabbk öp</td>
<td>Chris tina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro c omerc ial Moc tez uma</td>
<td>Franc is c o C hang</td>
<td>Mex ic o< /td>
</tr>
<tr>
<td>Erns t Handel</td>
<td>Roland Mendel</td>
<td>Aus tria</td>
</tr>
<tr>
<td>Is land Tr ading</t d>
<td>Helen Bennett</td>
<td>UK< /td>
</tr>
<tr>
<td>Königlic h Es s en</td>
<td>Philip Cramer</td>
<td>Germany </td>
</tr>
<tr>
<td>Laughing Bac c hus Winec ellars </td>
<td>Yos hi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magaz z ini Alimentari Riuniti</td>
<td>Giov anni Rov elli</td>
<td>Italy </td>
</tr>
<tr>
<td>North/South</td>
<td>Simon C row ther </td>
<td>UK< /td>
</tr>
<tr>
<td>Paris spéc ialités </td>
<td>Mar ie Bertrand</td>
<td>Franc e</td>
</tr>
</table>
</body >
</html>
41
<!DOCTY PE html>
<html>
<head>
<s ty le>
#c us tomers {
font-family : " Trebuc het MS", Arial, H elv etic a, s ans -s erif;
border-c ollaps e: c ollaps e;
w idth: 100%;
}
#c us tomers td, #c us tomers th {
border: 1px s olid #ddd;
padding: 8px ;
}
#c us tomers tr:nth- child(ev en){back ground- color: #f2f2f2;}
#c us tomers tr:hover {bac k gr ound-c olor: #ddd;}
#c us tomers th {
padding- top: 12px ;
padding- bottom: 12px ;
tex t-align: left;
back ground- c olor: #4CAF50;
c olor: w hite;
}
</s ty le>
</head>
<body>
<table id=" cus tomer s ">
<tr>
<th>Company </th>
<th>Contact< /th>
<th>Country </th>
</tr>
<tr>
<td>Alfreds Futterk is te</td>
<td>Mar ia Anders </td>
<td>Germany </td>
</tr>
<tr>
<td>Berglunds snabbk öp</td>
<td>Chris tina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro c omerc ial Moc tez uma</td>
<td>Franc is c o C hang</td>
<td>Mex ic o< /td>
</tr>
<tr>
<td>Erns t Handel</td>
<td>Roland Mendel</td>
<td>Aus tria</td>
</tr>
<tr>
<td>Is land Tr ading</t d>
<td>Helen Bennett</td>
<td>UK< /td>
</tr>
<tr>
<td>Königlic h Es s en</td>
<td>Philip Cramer</td>
<td>Germany </td>
</tr>
<tr>
<td>Laughing Bac c hus Winec ellars </td>
<td>Yos hi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magaz z ini Alimentari Riuniti</td>
<td>Giov anni Rov elli</td>
<td>Italy </td>
</tr>
<tr>
<td>North/South</td>
<td>Simon C row ther </td>
<td>UK< /td>
</tr>
<tr>
<td>Paris spéc ialités </td>
<td>Mar ie Bertrand</td>
<td>Franc e</td>
</tr>
</table>
</body >
</html>
41
Table Borders
To specify table borders in CSS, use
the border property.
The example below specifies a black
border for <table>, <th>, and <td>
elements:
42
To specify table borders in CSS, use
the border property.
The example below specifies a black
border for <table>, <th>, and <td>
elements:
42
Example
table, th, td {
border: 1px solid black;
}
43
table, th, td {
border: 1px solid black;
}
43
44
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 554
- Slides 44
- Age 2562 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
48 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
47 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
34 views
21
Know for Certain
DaveSinNM
22 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views