Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Introduction HTML and CSS
1.
2. •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 cont
rol the layout of multiple web pages all at once
•External stylesheets are stored in CSS files.
5. Including CSS in HTML Documents
CSS can either be attached as a separate
document or embedded in the HTML document
itself. There are three methods of including CSS in
an HTML document:
•Inline styles — Using the style attribute in the
HTML start tag.
•Embedded styles — Using the <style> element
in the head section of a document.
•External style sheets — Using
the <link> element, pointing to an external CSS
file.
8. External Style Sheets
An external style sheet holds all the style rules in a
separate document that you can link from any HTML
file on your site. External style sheets are the most
flexible because with an external style sheet, you can
change the look of an entire website by changing
just one file.
<!DOCTYPE html>
<html lang="en">
<head> <title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css"> </head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
9. Importing External Style Sheets
The @import rule is another way of loading an
external style sheet. The @import statement
instructs the browser to load an external style
sheet and use its styles.
<style>
@import url("css/style.css");
p { color: blue; font-size: 16px; }
</style>
10. CSS Selectors
The CSS element Selector
The element selector selects HTML elements based on the element name.
<style>
p {
text-align: center;
color: red;
}
</style>
11. The CSS id Selector
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
12. CSS Comments
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
<head>
<style>
/* This is a single-line comment */
p {
color: red;
}
</style>
</head>
13. CSS Background Color
<body>
<h1 style="background-
color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
</body>
