css introduction
TRANSCRIPT
CSSIntroduction
by Niciuzza, nicha.in.th
Cascading Style Sheets =
CSS
CSS for Web Designer by Niciuzza, nicha.in.th
CSS Syntax
CSS for Web Designer by Niciuzza, nicha.in.th
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;
}
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
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
Three way to insert CSS
CSS for Web Designer by Niciuzza, nicha.in.th
External Style Sheet1.Internal Style Sheet2.Inline Style3.
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
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
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
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
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;
}
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;}
References
CSS for Web Designer by Niciuzza, nicha.in.th
● http://www.w3schools.com/css/