CSS Tutorial #1
CSS Syntax
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.
CSS declaration always ends with a semicolon.
Declaration blocks are surrounded by curly braces.
Example:
p{
color: red;
text-align: center;
CSS Comments
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
External Style Sheet
theme.css page1.html
body {
<!DOCTYPE html>
background-color: lightblue;
<html>
}
<head>
<link rel="stylesheet" href="theme.css">
h1 {
</head>
color: white;
<body>
text-align: center;
}
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
p{
font-family: verdana;
</body>
font-size: 20px;
</html>
}
Internal Style Sheet
home.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline Style Sheet
<h1 style="color:blue;text-align:center;">This is a heading</h1>
CSS Tutorial #2
Types of CSS Selectors
a) Universal Selector
The universal selector (*) selects all HTML elements on the page. Therefore the CSS rule will affect
every HTML element on the page.
*{
text-align: center;
color: blue;
b) Element Selector
The element selector selects all elements with the specified element name.
p{
color: blue;
c) Class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
.cities { <div class="cities">
<OL>
text-align: center;
<LI> Colombo </LI>
color: red; <LI> Kandy </LI>
</OL>
} </div>
d) ID Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
#para1 {
text-align: center; <p id = para1> This is a test</p>
color: red;
}
e) Attribute Selectors
The attribute selector is used to select elements based on the presence or value of html attributes.
a[target] { <a href="http://www.disney.com" target="_top">disney.com</a>
background-color: yellow;
-------------
a[target=_blank] {
<a href="http://www.disney.com" target="_blank">disney.com</a>
background-color: yellow;
f) Pseudo-classes Selector
The pseudo-class selector is used to select a special state of an element. For example, it can be used
to style an element when a user moves the mouse over it.
a:hover {
color: #FF00FF;
g) Pseudo-elements Selector
The pseudo-element selector is used to select specified parts of an element. For example, it can be
used to style the first letter (or line) of an element.
p::first-line {
color: #ff0000;
font-variant: small-caps;
h) Multiple Selectors
Multiple selector is sued to select all the HTML elements with the same style definitions.
h1, div, #header {
text-align: center;
color: red;
}
Style Elements
a) Text Layout | color, alignment, text –decoration
h3 {
color: blue;
text-align: center;
text-decoration: underline;
}
b) Font |font -family, font -style, font –size, font – weight
p{
font-family: "Times New Roman", Times, serif;
font-style: italic;
font-size: 40px;
font-weight: bold;
}
c) Links |link, visited, hover, active, color, text -decoration, background –color
/* unvisited link */ /* visited link */ /* mouse over link */ /* selected link */
a:link { a:visited { a:hover { a:active {
color: red; color: green; color: hotpink; color: blue;
} } } }
/*link color, text -decoration, background –color*/
a{
color: hotpink
text-decoration: underline;
background-color: yellow;
}
d) Lists | list -style -position, list -style -type:none
<ul class="b">
ul.b {
<li>Coffee ..........</li>
list-style-position: inside;
<li>Tea ………….</li>
}
</ul>
Ul.demo { <ul class="demo">
list-style-type: none; <li>Coffee</li>
margin: 0; <li>Tea</li>
padding: 0; <li>Coca Cola</li>
} </ul>
e) Tables | border, border -collapse, height, width, text -align, padding, background -color, nth -
child(even), nth - child(odd))
table {
table, th, td { table { border-collapse: collapse;
border: 1px solid black; border-collapse: collapse; width: 400px;
} } height: 150px;
}
th { td { th, td {
text-align: center; vertical-align: bottom; padding: 15px;
} } }
table { tr:nth-child(even) { tr:nth-child(odd) {
background-color: red; background-color: red; background-color: yellow;
} } }
f) Images | border -radius, border, padding, width, height, opacity
img {
border-radius: 4px; <img src="paris.jpg" alt="Paris">
border: 1px solid #ddd;
padding: 5px;
width: 150px;
height: 150px;
opacity: 0.5;
