4. CSS Comments
CSS for Web Designer by Niciuzza, nicha.in.th
A CSS comment begins with "/*", and ends with "*/"
/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
5. CSS ID
CSS for Web Designer by Niciuzza, nicha.in.th
● The id selector is used to specify a style for a single, unique element.
● The id selector uses the id attribute of the HTML element, and is defined
with a "#".
● The style rule below will be applied to the element with id="para1"
#para1{
text-align:center;
color:red;
}
<div id=”para1”></div>
style.css index.htm
6. CSS CLASS
CSS for Web Designer by Niciuzza, nicha.in.th
● The class selector is used to specify a style for a group of elements. Unlike
the id selector, the class selector can used on several elements.
● The class selector uses the HTML class attribute, and is defined with a "."
● Call the class in HTML element with class="center"
.center{
text-align:center;
}
<p class=”center”></p>
style.css index.htm
7. Three way to insert
CSS
CSS for Web Designer by Niciuzza, nicha.in.th
External Style Sheet1.
Internal Style Sheet2.
Inline Style3.
8. External Style Sheet
CSS for Web Designer by Niciuzza, nicha.in.th
hr {color:sienna;}
p {margin-left:20px;}
body {
background-image:url
("images/back40.gif");
}
<head>
<link rel="stylesheet"
type="text/css" href="style.
css">
</head>
<body>
…
</body>
style.css index.htm
9. Internal Style Sheet
CSS for Web Designer by Niciuzza, nicha.in.th
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body{
background-image:url("images/back40.gif");
}
</style>
</head>
index.htm
10. Inline Style
CSS for Web Designer by Niciuzza, nicha.in.th
<p style="color:sienna;margin-left:20px">
This is a paragraph.
</p>
index.htm
11. Cascaded Order
CSS for Web Designer by Niciuzza, nicha.in.th
Browser default
External style sheet
Internal style sheet
(in the head section)
Inline style
(inside an HTML element)
LOW PRIORITY
HIGH PRIORITY
12. Grouping Selectors
CSS for Web Designer by Niciuzza, nicha.in.th
h1{
color:green;
}
h2{
color:green;
}
p{
color:green;
}
h1, h2, p{
color:green;
}
13. Nesting Selectors
CSS for Web Designer by Niciuzza, nicha.in.th
<p>This paragraph has blue text, and
is center aligned.</p>
<div class="marked">
<p>This paragraph has not blue
text.</p>
</div>
<p>p elements inside a "marked"
classed element keeps the alignment
style, but has a different text
color.</p>
p{
color:blue;
text-align:center;
}
.marked{
background-color:red;
}
.marked p{
color:white;
}
14. References
CSS for Web Designer by Niciuzza, nicha.in.th
● http://www.w3schools.com/css/
