CSS Styling Guide for HTML Elements

CSS - HTML Styles (external style)
• Each element has one or more declarations, each

separated by a semicolon.
• Each declaration has a property name and a value,
separated by a colon.
h1 {color:#ff0000;font-size:14px}
Value
Property Name
CSS Format
• Each style can have a number of properties and
values :
h1 {text-align: center;
font-size: 16pt;
font-weight: bold}
• If a value within a style contains more than one word

h2 {font-family: “Times New Roman”, serif}
<html>
<head>
<title>Task21a </title>
<link rel=“stylesheet” type=“text/css” href=“style1.css”>
</head>
<body>
<p> My first web page by Lalitha</p>
<h1>This is style h1</h1>
</body>
</html> Intro.htm
Enter the styles :
h1 {font-family: serif}
P {font-family: serif}
This could be simplified as :

h1,h2,h3,h4,h5,h6,p {font-family: serif}
Activity
Edit this stylesheet so that style h1 is 36 point, h2 is
24 point, h3 is 18 point, h4 is 16 point, h5 is 14 point,
h6 is 12 point and the paragraph style is 12 point
h1 {font-family: serif; font-size: 36pt}

P {font-family: serif; font-size: 10pt}
Enhance text within a stylesheet
h1 {text-align: center}
h2 {text-align: right}
P {text-align: left}
h1 {text-weight: bold;
font-style: italic;
text-declaration: underline}
Activity
• Create a new stylesheet called mystyle1.css and
attach this to the web page called webpage5.htm.
• This stylesheet will set style h1 to a bold, italic, 18

point font. If ‘Times New Roman’ is available the
browser will use that, otherwise it will choose
‘Times’, but if this is not available the browser’s
default serif font will be used. Make this text centre
aligned.
Answer
h1 {font-family: “Times New Roman”, Times, serif;

font-size: 18pt;
text-align: center;
font-weight: bold;
font-style: italic}
Colour - CSS
• Edit your files so that style h1 contains the following

colour hexadecimal components: red 0, blue ff and
green 00
color:#0000ff}
CSS background colour
• Edit your files so that the web page has a khaki

(f0e68c) background colour
body {background-color:#f0e68C;}
The background-color property must contain a hypen
• Background colour can be applied to the whole page,

or to tables, table rows, headers or footers
Background images
• Edit your files so that the web page has the file
task21ai.png as a single background image place in the
top right of the window
body {background-color:#f0e68c;
background-image: url(“task21ai.png”);
• Position a background image

background-position: right top;}

CSS Styling Guide for HTML Elements

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

CSS Styling Guide for HTML Elements

Загружено:

Авторское право:

Доступные форматы

CSS - HTML Styles (external style)

• Each element has one or more declarations, each

• If a value within a style contains more than one word

This could be simplified as :

h1 {font-family: serif; font-size: 36pt}

• This stylesheet will set style h1 to a bold, italic, 18

h1 {font-family: “Times New Roman”, Times, serif;

• Edit your files so that style h1 contains the following

• Edit your files so that the web page has a khaki

• Background colour can be applied to the whole page,

• Position a background image

Вам также может понравиться