Вы находитесь на странице: 1из 11

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>
<h2>This is style h2</h2>
<h3>This is style h3</h3>
<h4>This is style h4</h4>
<h5>This is style h5</h5>
<h6>This is style h6</h6>
</body>
</html> Intro.htm
Enter the styles :
h1 {font-family: serif}
h2 {font-family: serif}
h3 {font-family: serif}
h4 {font-family: serif}
h5 {font-family: serif}
h6 {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}


h2 {font-family: serif; font-size: 24pt}
h3 {font-family: serif; font-size: 18pt}
h4 {font-family: serif; font-size: 16pt}
h5 {font-family: serif; font-size: 14pt}
h6 {font-family: serif; font-size: 12pt}
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;}

Оценить