Scribd
Upload
602 views

ICT Css Notes

This document discusses CSS (Cascading Style Sheets) formatting and properties. It explains that CSS uses declarations with properties and values to style HTML elements, such as setting fonts, colors, sizes and positioning. It provides examples of CSS code to style headings and paragraphs. The document also demonstrates how to attach an external CSS stylesheet to an HTML page and how to set properties like font, size, color, alignment and background styles.

Uploaded by

Winnie Ooi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
602 views

ICT Css Notes

This document discusses CSS (Cascading Style Sheets) formatting and properties. It explains that CSS uses declarations with properties and values to style HTML elements, such as setting fonts, colors, sizes and positioning. It provides examples of CSS code to style headings and paragraphs. The document also demonstrates how to attach an external CSS stylesheet to an HTML page and how to set properties like font, size, color, alignment and background styles.

Uploaded by

Winnie Ooi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 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;}

You might also like