Scribd
Upload
21 views

CSS Tutorial1 and 2

The document provides information on CSS syntax, selectors, and properties for styling HTML elements. It explains that CSS uses selectors to target elements and declaration blocks to apply styles with properties and values. Some key selectors covered include element, class, ID, and attribute selectors. It also discusses pseudo-classes and pseudo-elements. Finally, it lists various CSS properties for styling text, links, lists, tables, images and more.

Uploaded by

Mikely Fernando
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

CSS Tutorial1 and 2

The document provides information on CSS syntax, selectors, and properties for styling HTML elements. It explains that CSS uses selectors to target elements and declaration blocks to apply styles with properties and values. Some key selectors covered include element, class, ID, and attribute selectors. It also discusses pseudo-classes and pseudo-elements. Finally, it lists various CSS properties for styling text, links, lists, tables, images and more.

Uploaded by

Mikely Fernando
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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;

You might also like