Introduction to Web Programming: Styling HTML with CSS
undefined
INTRODUCTION TO WEB PROGRAMMING
0731213
1
undefinedLECTURE 1
STYLING HTML WITH CSS
STYLING HTML WITH CSS
•
C
S
S
s
t
a
n
d
s
f
o
r
C
a
s
c
a
d
i
n
g
S
t
y
l
e
S
h
e
e
t
s
.
•
C
S
S
d
e
s
c
r
i
b
e
s
h
o
w
H
T
M
L
e
l
e
m
e
n
t
s
a
r
e
t
o
b
e
d
i
s
p
l
a
y
e
d
o
n
s
c
r
e
e
n
,
p
a
p
e
r
,
o
r
i
n
o
t
h
e
r
m
e
d
i
a
.
•
C
S
S
s
a
v
e
s
a
l
o
t
o
f
w
o
r
k
.
I
t
c
a
n
c
o
n
t
r
o
l
t
h
e
l
a
y
o
u
t
o
f
m
u
l
t
i
p
l
e
w
e
b
p
a
g
e
s
a
l
l
a
t
o
n
c
e
.
•
T
h
e
m
o
s
t
c
o
m
m
o
n
w
a
y
t
o
a
d
d
C
S
S
,
i
s
t
o
k
e
e
p
t
h
e
s
t
y
l
e
s
i
n
s
e
p
a
r
a
t
e
C
S
S
f
i
l
e
s
.
3
CSS
ADVANTAGES
M
a
k
e
s
w
e
b
s
i
t
e
m
o
r
e
f
l
e
x
i
b
l
e
•
CSS is
reusable
Change stylesheet to change design of many pages
•
Example: CSS Zen garden
http://www.csszengarden.com/
E
a
s
i
e
r
t
o
m
a
i
n
t
a
i
n
•
Cleaner
HTML
code
•
Separates styles
from
HTML
tags and
page content
•
C
o
n
s
i
s
t
e
n
t
l
o
o
k
a
c
r
o
s
s
e
n
t
i
r
e
w
e
b
s
i
t
e
t
h
a
t
i
s
e
a
s
i
l
y
m
a
i
n
t
a
i
n
e
d
b
y
c
h
a
n
g
i
n
g
s
t
y
l
e
s
i
n
o
n
e
p
l
a
c
e
.
4
CSS
DISADVANTAGES
N
o
t
u
n
i
f
o
r
m
l
y
s
u
p
p
o
r
t
e
d
b
y
a
l
l
b
r
o
w
s
e
r
s
.
•
C
S
S
w
o
r
k
s
d
i
f
f
e
r
e
n
t
l
y
o
n
d
i
f
f
e
r
e
n
t
b
r
o
w
s
e
r
s
.
I
E
a
n
d
O
p
e
r
a
s
u
p
p
o
r
t
s
C
S
S
a
s
d
i
f
f
e
r
e
n
t
l
o
g
i
c
.
•
C
h
r
o
m
e
a
d
h
e
r
e
s
t
o
C
S
S
s
t
a
n
d
a
r
d
s
m
o
r
e
t
h
a
n
I
E
For this course we use Chrome
5
ADDING
STYLE
T
h
e
r
e
a
r
e
t
w
o
a
s
p
e
c
t
s
t
o
a
d
d
i
n
g
s
t
y
l
e
t
o
a
W
e
b
p
a
g
e
v
i
a
C
S
S
S
p
e
c
i
f
y
i
n
g
w
h
a
t
t
h
e
s
t
y
l
e
l
o
o
k
s
l
i
k
e
“
D
e
c
l
a
r
a
t
i
o
n
”
Naming
the
HTML
element
“
Selector
”
6
selector
{property
:
value
;
property
:
value
;
...
property: value;
}
CSS
p {font-family: sans-serif;
color: red;
}
CSS
A CSS
declaration
A CSS
Selector
NAMING
HTML
ELEMENTS
•
T
h
e
r
e
a
r
e
t
w
o
n
a
m
i
n
g
o
p
t
i
o
n
s
f
o
r
a
n
H
T
M
L
e
l
e
m
e
n
t
:
a
s
s
i
g
n
i
n
g
“
I
D
”
n
a
m
e
s
a
n
d
“
c
l
a
s
s
n
a
m
e
s
.
”
•
A
n
i
d
d
e
c
l
a
r
a
t
i
o
n
i
s
t
h
e
s
a
m
e
a
s
a
c
l
a
s
s
d
e
c
l
a
r
a
t
i
o
n
,
e
x
c
e
p
t
t
h
a
t
i
t
s
h
o
u
l
d
o
n
l
y
b
e
u
s
e
d
s
p
e
c
i
f
i
c
a
l
l
y
o
n
c
e
p
e
r
W
e
b
p
a
g
e
.
7
<
h
1
c
l
a
s
s
=
”
m
y
b
o
l
d
a
n
d
b
l
u
e
l
o
o
k
”
>
I
n
t
r
o
d
u
c
t
i
o
n
<
/
h
1
>
.myboldandbluelook
{font-weight: bold;
color: blue;
}
<
h
1
i
d
=
”
m
y
b
o
l
d
a
n
d
b
l
u
e
l
o
o
k
”
>
I
n
t
r
o
d
u
c
t
i
o
n
<
/
h
1
>
#myboldandbluelook
{font-weight: bold;
color: blue;
}
ATTACHING
A CSS
FILE:
<LINK>
A
p
a
g
e
c
a
n
l
i
n
k
t
o
m
u
l
t
i
p
l
e
s
t
y
l
e
s
h
e
e
t
f
i
l
e
s
•
In case of a conflict (two sheets define a style for the same HTML
element), the latter sheet's properties will be used
•
The
rel
attribute
defines
the
relationship
between
the
current page
and
the linked page
. The rel="icon"
8
<head>
...
<link href="
filename
" type="text/css" rel="stylesheet" />
...
</head>
HTML
<link href="style.css" type="text/css" rel="stylesheet" />
HTML
How do I attach a
CSS
file to
HTML
?
CSS can be added to
HTML
documents in
3 ways
:
•
Inline
- by using the style attribute inside HTML elements.
•
Internal
- by using a <style> element in the <head> section.
•
External
- by using a <link> element to link to an external CSS file.
CSS
PROPERTIES
FOR
COLORS
9
p {color
: red;
background-color
: yellow;
}
CSS
This paragraph uses the style above
output
SPECIFYING
COLORS
c
o
l
o
r
n
a
m
e
s
:
a
q
u
a
,
b
l
a
c
k
,
b
l
u
e
,
f
u
c
h
s
i
a
,
g
r
a
y
,
g
r
e
e
n
,
l
i
m
e
,
m
a
r
o
o
n
,
n
a
v
y
,
o
l
i
v
e
,
p
u
r
p
l
e
,
r
e
d
,
s
i
l
v
e
r
,
t
e
a
l
,
w
h
i
t
e
(
w
h
i
t
e
)
,
y
e
l
l
o
w
R
G
B
c
o
d
e
s
:
r
e
d
,
g
r
e
e
n
,
a
n
d
b
l
u
e
v
a
l
u
e
s
f
r
o
m
0
(
n
o
n
e
)
t
o
2
5
5
(
f
u
l
l
)
h
e
x
c
o
d
e
s
:
R
G
B
v
a
l
u
e
s
i
n
b
a
s
e
-
1
6
f
r
o
m
0
0
(
0
,
n
o
n
e
)
t
o
F
F
(
2
5
5
,
f
u
l
l
)
/
/
/
h
e
x
a
d
e
c
i
m
a
l
n
u
m
b
e
r
s
Hex
values
are actually just a
different way to represent
RGB
values
.
Instead
of
using three numbers between 0 and 255
, you use six hexadecimal numbers
.
10
10
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
LECTURE 2
CSS PROPERTIES (1)
CSS
PROPERTIES
FOR
FONTS
12
12
Complete list of font properties
(https://www.w3schools.com/css/css_font.asp)
FONT-FAMILY
E
n
c
l
o
s
e
m
u
l
t
i
-
w
o
r
d
f
o
n
t
n
a
m
e
s
i
n
q
u
o
t
e
s
13
13
p
{font-family
: Georgia;
}
h2
{font-family
: "Courier New";
}
CSS
This paragraph uses the first style above.
This h2 uses the second style above.
output
FONT-SIZE
units
: pixels (
px
) vs. point (
pt
) vs. m-size (
em
)
16px
,
16pt
,
1.16em
vague font sizes
:
xx-small
,
x-small
,
small
,
medium
,
large
,
x-large
,
xx-large
,
smaller
,
larger
percentage font sizes
, e.g.:
90%
,
120%
14
14
p
{font-size
:
24pt
;
}
CSS
This paragraph uses the style above.
output
FONT-SIZE
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
15
15
p
{font-size
: 24pt;
}
CSS
This paragraph uses the style above.
output
FONT-WEIGHT, FONT-STYLE
E
i
t
h
e
r
o
f
t
h
e
a
b
o
v
e
c
a
n
b
e
s
e
t
t
o
n
o
r
m
a
l
t
o
t
u
r
n
t
h
e
m
o
f
f
(
e
.
g
.
h
e
a
d
i
n
g
s
)
16
16
p {font-weight
: bold;
font-style
: italic;
}
CSS
This paragraph uses the style above.
output
CSS
PROPERTIES
FOR
TEXT
17
17
Complete list of text properties
(https://www.w3schools.com/css/css_text.asp)
TEXT-ALIGN
t
e
x
t
-
a
l
i
g
n
c
a
n
b
e
l
e
f
t
,
r
i
g
h
t
,
c
e
n
t
e
r
,
o
r
j
u
s
t
i
f
y
j
u
s
t
i
f
y
(
w
h
i
c
h
w
i
d
e
n
s
a
l
l
f
u
l
l
l
i
n
e
s
o
f
t
h
e
e
l
e
m
e
n
t
s
o
t
h
a
t
t
h
e
y
o
c
c
u
p
y
i
t
s
e
n
t
i
r
e
w
i
d
t
h
)
18
18
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
TEXT-DECORATION
c
a
n
a
l
s
o
b
e
o
v
e
r
l
i
n
e
,
l
i
n
e
-
t
h
r
o
u
g
h
,
b
l
i
n
k
,
o
r
n
o
n
e
e
f
f
e
c
t
s
c
a
n
b
e
c
o
m
b
i
n
e
d
:
text-decoration
: overline underline;
19
19
p {text-decoration
: underline;
}
CSS
This paragraph uses the style above.
output
CSS
PROPERTIES
FOR
LAYOUT
T
h
e
f
l
o
a
t
P
r
o
p
e
r
t
y
•
The
float property
is
used
for
positioning and layout on web
pages
.
•
The
float property
can have
one
of the following
values
:
•
left
- The element floats
to the left
of its container
•
right
- The element floats
to the right
of its container
•
none
- The element
does not float
(will be displayed just
where it occurs in the text). This is default
•
inherit
- The element i
nherits the float
value of its
parent
•
In its simplest use, the float property can be used to wrap text
around images.
CSS PROPERTIES FOR LAYOUT
T
h
e
f
l
o
a
t
P
r
o
p
e
r
t
y
Example - float: right;
•
T
h
e
f
o
l
l
o
w
i
n
g
e
x
a
m
p
l
e
s
p
e
c
i
f
i
e
s
t
h
a
t
a
n
i
m
a
g
e
s
h
o
u
l
d
f
l
o
a
t
t
o
t
h
e
r
i
g
h
t
i
n
a
t
e
x
t
:
img {float
:
right
;
}
CSS PROPERTIES FOR LAYOUT
T
h
e
f
l
o
a
t
P
r
o
p
e
r
t
y
Example - float: left;
•
T
h
e
f
o
l
l
o
w
i
n
g
e
x
a
m
p
l
e
s
p
e
c
i
f
i
e
s
t
h
a
t
a
n
i
m
a
g
e
s
h
o
u
l
d
f
l
o
a
t
t
o
t
h
e
l
e
f
t
i
n
a
t
e
x
t
:
img {float
:
left
;
}
CSS PROPERTIES FOR LAYOUT
T
h
e
f
l
o
a
t
P
r
o
p
e
r
t
y
Example - No float
•
In the following example the image will be displayed just where
it occurs in the text (float: none;):
img {float
:
none
;
}
CSS PROPERTIES FOR LAYOUT
T
h
e
c
l
e
a
r
P
r
o
p
e
r
t
y
•
The
clear property
specifies
what elements can
float beside the cleared
element and on which side
.
•
The
clear property
can have one of the following
values
:
•
none
- Allows
floating
elements
on both sides
. This is default
•
left
-
No floating
elements allowed
on the left side
•
right-
No floating
elements allowed
on the right side
•
both
-
No floating
elements allowed on
either the left
or
the right side
•
inherit
- The element
inherits
the clear value
of its parent
•
The
CSS float property
specifies
how
an element should float.
The CSS clear
property
specifies
what
elements can float beside the cleared element and on
which side.
•
The most common way to use the clear property is after you have used a float
property on an element.
•
When clearing floats, you should match the clear to the float. If an element is
floated to the left, then you should clear to the left. Your floated element will
continue to float, but the cleared element will appear below it on the web page.
CSS PROPERTIES FOR LAYOUT
T
h
e
c
l
e
a
r
P
r
o
p
e
r
t
y
The following example clears the float to the left. Means that
no
floating
elements are
allowed
on the
left side
(of the div):
div {clear
:
left
;
}
Without
Clear
With
Clear
LECTURE 3
CSS PROPERTIES (2)
CSS PROPERTIES
•
CSS properties for colors.
More details
•
CSS properties for Backgrounds.
More details
•
CSS properties for Borders.
More details
•
CSS properties for Margins.
More details
•
CSS properties for padding.
More details
•
CSS properties for text.
More details
•
CSS properties for fonts.
More details
•
CSS properties for links.
More details
•
CSS properties for float and clear.
More details
•
CSS properties for align.
More details
•
and even more
27
27
BODY
STYLES
A
p
p
l
i
e
s
a
s
t
y
l
e
t
o
t
h
e
e
n
t
i
r
e
b
o
d
y
o
f
y
o
u
r
p
a
g
e
S
a
v
e
s
y
o
u
f
r
o
m
m
a
n
u
a
l
l
y
a
p
p
l
y
i
n
g
a
s
t
y
l
e
t
o
e
a
c
h
e
l
e
m
e
n
t
28
28
body
{font-size
: 16px;
}
CSS
CSS COMMENTS /*…*/
T
h
e
/
/
s
i
n
g
l
e
-
l
i
n
e
c
o
m
m
e
n
t
s
t
y
l
e
i
s
N
O
T
s
u
p
p
o
r
t
e
d
i
n
C
S
S
T
h
e
<
!
-
-
.
.
.
-
-
>
H
T
M
L
c
o
m
m
e
n
t
s
t
y
l
e
i
s
a
l
s
o
N
O
T
s
u
p
p
o
r
t
e
d
i
n
C
S
S
29
29
/*
This is a comment.
It can span many lines in the CSS file.
*/
p {color: red; background-color: aqua;
}
CSS
GROUPING
STYLES
A
s
t
y
l
e
c
a
n
s
e
l
e
c
t
m
u
l
t
i
p
l
e
e
l
e
m
e
n
t
s
s
e
p
a
r
a
t
e
d
b
y
c
o
m
m
a
s
T
h
e
i
n
d
i
v
i
d
u
a
l
e
l
e
m
e
n
t
s
c
a
n
a
l
s
o
h
a
v
e
t
h
e
i
r
o
w
n
s
t
y
l
e
s
30
30
p
, h1, h2
{color: green;
}
h2 {background-color: yellow;
}
CSS
This paragraph uses the above style.
output
This h2 uses the above styles.
DESCENDANT
(
NESTED
)
SELECTOR
S
y
n
t
a
x
i
s
s
i
m
i
l
a
r
t
o
t
h
e
e
x
a
m
p
l
e
o
f
g
r
o
u
p
i
n
g
s
e
l
e
c
t
o
r
s
—
b
u
t
w
i
t
h
o
u
t
t
h
e
c
o
m
m
a
s
•
Selects all elements that correspond to the “nested”
structure specified by the selector
•
E.g
., the above style will apply to
any
<strong> HTML tag that
lies
within
an <a> tag that lies within an <li> tag that lies
within
a <ul> tag
31
31
ul li a strong{color:green;} CSS
CSS
EXAMPLE
E
x
a
m
p
l
e
.
h
t
m
l
s
t
y
l
e
.
c
s
s
32
32
HTML
CSS
REFERENCES
•
https://www.w3schools.com/
•
Robin Nixon, Learning PHP, MySQL, JavaScript, and CSS,
2013
•
Mike McGrath, PHP & My SQL in easy steps, 2012.
THE END
Styling HTML with CSS is essential for controlling the layout and design of web pages. CSS offers advantages like flexibility, reusability, and easier maintenance but also has drawbacks such as varying browser support. Learn about naming HTML elements, adding style via CSS, and attaching CSS files to HTML documents in this comprehensive guide.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
INTRODUCTION TO WEB PROGRAMMING 0731213 1
LECTURE 1 STYLING HTML WITH CSS
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. The most common way to add CSS, is to keep the styles in separate CSS files. 3
CSS ADVANTAGES Makes website more flexible CSS is reusable Change stylesheet to change design of many pages Example: CSS Zen garden http://www.csszengarden.com/ Easier to maintain Cleaner HTML code Separates styles from HTML tags and page content Consistent look across entire website that is easily maintained by changing styles in one place. 4
CSS DISADVANTAGES Not uniformly supported by all browsers. CSS works differently on different browsers. IE and Opera supports CSS as different logic. Chrome adheres to CSS standards more than IE For this course we use Chrome 5
ADDING STYLE There are two aspects to adding style to a Web page via CSS Specifying what the style looks like Declaration Naming the HTML element Selector selector { property: value; property: value; ... property: value; } p { font-family: sans-serif; color: red; } A CSS Selector A CSS declaration CSS CSS 6
NAMING HTML ELEMENTS There are twonaming options for an HTML element: assigning ID names and class names. An id declaration is the same as a class declaration, except that it should only be used specifically once per Web page. <h1 class= myboldandbluelook > Introduction </h1> .myboldandbluelook { font-weight: bold; color: blue; } <h1 id= myboldandbluelook > Introduction </h1> #myboldandbluelook { font-weight: bold; color: blue; } 7
ATTACHING A CSS FILE: <LINK> How do I attach a CSS file to HTML? CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file. <head> ... <link href="filename" type="text/css" rel="stylesheet" /> ... </head> HTML <link href="style.css" type="text/css" rel="stylesheet" /> HTML A page can link to multiple style sheet files In case of a conflict (two sheets define a style for the same HTML element), the latter sheet's properties will be used The rel attribute defines the relationship between the current page and the linked page. The rel="icon" 8
CSS PROPERTIES FOR COLORS p { color: red; background-color: yellow; } CSS This paragraph uses the style above output property color description color of the element's text color that will appear behind the element background-color 9
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) /// hexadecimal numbers Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers. 10
LECTURE 2 CSS PROPERTIES (1)
CSS PROPERTIES FOR FONTS property font-family font-size font-style font-weight description which font will be used how large the letters will be drawn used to enable/disable italic style used to enable/disable bold style Complete list of font properties (https://www.w3schools.com/css/css_font.asp) 12
FONT-FAMILY p { font-family: Georgia; } h2 { font-family: "Courier New"; } CSS This paragraph uses the first style above. This h2 uses the second style above. output Enclose multi-word font names in quotes 13
FONT-SIZE p { } font-size: 24pt; CSS This paragraph uses the style above. output units: pixels (px) vs. point (pt) vs. m-size (em) 16px, 16pt, 1.16em vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger percentage font sizes, e.g.: 90%, 120% 14
FONT-SIZE p { } font-size: 24pt; CSS This paragraph uses the style above. output 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 15
FONT-WEIGHT, FONT-STYLE p { font-weight: bold; font-style: italic; } CSS This paragraph uses the style above. output Either of the above can be set to normal to turn them off (e.g. headings) 16
CSS PROPERTIES FOR TEXT property text-align text-decoration description alignment of text within its element decorations such as underlining Complete list of text properties (https://www.w3schools.com/css/css_text.asp) 17
TEXT-ALIGN 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 text-align can be left, right, center, or justify justify (which widens all full lines of the element so that they occupy its entire width) 18
TEXT-DECORATION p { text-decoration: underline; } CSS This paragraph uses the style above. output can also be overline, line-through, blink, or none effects can be combined: text-decoration: overline underline; 19
CSS PROPERTIES FOR LAYOUT The float Property The float property is used for positioning and layout on web pages. The float property can have one of the following values: left - The element floats to the left of its container right- The element floats to the right of its container none - The element does not float (will be displayed just where it occurs in the text). This is default inherit - The element inherits the float value of its parent In its simplest use, the float property can be used to wrap text around images.
CSS PROPERTIES FOR LAYOUT The float Property Example - float: right; The following example specifies that an image should float to the right in a text: img { float: right; }
CSS PROPERTIES FOR LAYOUT The float Property Example - float: left; The following example specifies that an image should float to the left in a text: img { float: left; }
CSS PROPERTIES FOR LAYOUT The float Property Example - No float In the following example the image will be displayed just where it occurs in the text (float: none;): img { float: none; }
CSS PROPERTIES FOR LAYOUT The clear Property The clear property specifies what elements can float beside the cleared element and on which side. The clear property can have one of the following values: none - Allows floating elements on both sides. This is default left - No floating elements allowed on the left side right- No floating elements allowed on the right side both - No floating elements allowed on either the left or the right side inherit - The element inherits the clear value of its parent The CSS float property specifies how an element should float. The CSS clear property specifies what elements can float beside the cleared element and on which side. The most common way to use the clear property is after you have used a float property on an element. When clearing floats, you should match the clear to the float. If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.
CSS PROPERTIES FOR LAYOUT The clear Property The following example clears the float to the left. Means that no floating elements are allowed on the left side (of the div): div { clear: left; } Without Clear With Clear
LECTURE 3 CSS PROPERTIES (2)
CSS PROPERTIES CSS properties for colors. More details CSS properties for Backgrounds. More details CSS properties for Borders. More details CSS properties for Margins. More details CSS properties for padding. More details CSS properties for text. More details CSS properties for fonts. More details CSS properties for links. More details CSS properties for float and clear. More details CSS properties for align. More details and even more 27
BODY STYLES body { font-size: 16px; } CSS Applies a style to the entire body of your page Saves you from manually applying a style to each element 28
CSS COMMENTS /**/ /* This is a comment. It can span many lines in the CSS file. */ p { color: red; background-color: aqua; } CSS The // single-line comment style is NOT supported in CSS The <!-- ... --> HTML comment style is also NOT supported in CSS 29
GROUPING STYLES p, h1, h2 { color: green; } h2 { background-color: yellow; } CSS This paragraph uses the above style. This h2 uses the above styles. output A style can select multiple elements separated by commas The individual elements can also have their own styles 30
DESCENDANT (NESTED) SELECTOR Syntax is similar to the example of grouping selectors but without the commas Selects all elements that correspond to the nested structure specified by the selector ul li a strong{color:green;} CSS E.g., the above style will apply to any <strong> HTML tag that lies within an <a> tag that lies within an <li> tag that lies within a <ul> tag 31
CSS EXAMPLE Example.html HTML style.css CSS 32
REFERENCES https://www.w3schools.com/ Robin Nixon, Learning PHP, MySQL, JavaScript, and CSS, 2013 Mike McGrath, PHP & My SQL in easy steps, 2012.
