Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
0 views

CSS_Notes

The document provides an overview of Cascading Style Sheets (CSS) for web authoring, explaining concepts such as attached and inline stylesheets, the cascading order of styles, and how to style various HTML elements like backgrounds, fonts, and tables. It includes examples of CSS properties and classes, demonstrating how to apply styles effectively. Additionally, it presents a worked example with specific CSS modifications for a teacher's web page design.

Uploaded by

Maryam Hasan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

CSS_Notes

The document provides an overview of Cascading Style Sheets (CSS) for web authoring, explaining concepts such as attached and inline stylesheets, the cascading order of styles, and how to style various HTML elements like backgrounds, fonts, and tables. It includes examples of CSS properties and classes, demonstrating how to apply styles effectively. Additionally, it presents a worked example with specific CSS modifications for a teacher's web page design.

Uploaded by

Maryam Hasan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Subject : ICT

Year: VIII
Term: II

CSS Notes : Web Authoring


What is CSS?
 Cascading Style Sheets (CSS) define the style or appearance of a
webpage
 CSS uses selectors such as classes or IDs
 CSS can be placed within HTML or externally in a file
 Multiple pieces of CSS can be combined
 Where CSS is used within the HTML, this will be used rather than any
external CSS styling and will override the external stylesheet
Attached & Inline
What is an attached stylesheet?
 An attached stylesheet is a separate CSS file that is linked to the HTML
page by a hyperlink
 Attached stylesheets mean they can be edited separately to the HTML
 This allows for the same styles to be reused across multiple pages
<head>
<link rel="stylesheet" href="styles.css">
</head>
Relative file paths for attached stylesheets
 Relative file paths are used for linked stylesheets because they refer to
the location of the CSS file relative to the current HTML file
 This makes the code more portable and easier to manage
 E.g. if the CSS file is in the same folder as the HTML file, the path would
be "styles.css"
 If the CSS file is in a subfolder named css, the path would
be "css/styles.css"
What is an inline stylesheet?
 Inline stylesheets are written directly within a HTML tag using
the style attribute
 The styles only apply to the webpage they are written into
<p style="color:blue;">This is a blue paragraph.</p>
Hierarchy of multiple attached stylesheets and inline styles
Subject : ICT
Year: VIII
Term: II

CSS Notes : Web Authoring


 If there are multiple styles defined for the same HTML element, the style
closest to the element takes priority
 This is called the cascading order
 The cascading order, from highest to lowest priority, is:
1. Inline styles (inside an HTML element)
2. External and internal styles (in the head section)
3. Browser default
Styles
What are CSS styles?
 Styles control the visual properties of an element in the body of a
webpage
 Examples of elements that can be styled are:
o Backgrounds

o Fonts

o Tables

Backgrounds
 Background colour: Set the background colour using the background-
color property
o E.g. background-color: blue;

 Background images: Set a background image using the background-


image property
o E.g. background-image: url("image.jpg");

Fonts
 Control the appearance of text with font properties
 This includes font-size, font-family, color, text-align, and more
p{
font-size: 14px;
font-family: Arial;
color: blue;
text-align: center;
Subject : ICT
Year: VIII
Term: II

CSS Notes : Web Authoring


}
Tables
 CSS is used to style HTML tables, allowing users to define the appearance
of the table, table rows, table headers, and table data cells
o Size: Control the width and height of a table
using width and height.
 E.g. width: 100%; height: 200px;
o Background colour: Use background-color to set the background.

 E.g. background-color: yellow;


o Borders: Apply a border using the border property including colour,
thickness, and visibility.
 E.g: border: 2px solid black;
o Collapsed borders: Use border-collapse: collapse; to make borders
appear as a single line
o Spacing: Control the space between cells with border-spacing.

 E.g. border-spacing: 5px;


o Padding: Define the space between cell content and its border
with padding.
 E.g. padding: 10px;
table {
width: 100%;
height: 200px;
background-color: yellow;
border: 2px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
Classes
What are CSS classes?
 Classes allow styles to be grouped together and applied to multiple
elements
Subject : ICT
Year: VIII
Term: II

CSS Notes : Web Authoring


 Classes act at reusable templates
 To define a class, use a period (.) followed by the class name
 To apply a class to an HTML element, use the class attribute
Background colour
 Use the background-color property
.red-background {
background-color: red;
}
Background images
 Use the background-image property
.image-background {
background-image: url("image.jpg");
}
Font properties
 Control the font size, family, colour, and alignment
.big-blue-text {
font-size: 20px;
font-family: Arial;
color: blue;
text-align: center;
}
Size
 Control the width and height with width and height
.small-cell {
width: 30px;
height: 30px;
}
Background colour
 Use background-color to set the background
Subject : ICT
Year: VIII
Term: II

CSS Notes : Web Authoring


.yellow-cell {
background-color: yellow;
}
Horizontal and vertical alignment
 Use text-align (horizontal) and vertical-align (vertical)
.center-align {
text-align: center;
vertical-align: middle;
}
Spacing, padding, borders
 Use padding for space inside the cell, and border for cell borders
.padded-cell {
padding: 10px;
border: 2px solid black;
}
Collapsed borders
 Use border-collapse: collapse; the table class to remove spaces between
cell borders
.collapsed-table {
border-collapse: collapse;
}
Worked Example
A teacher is creating a web page in HTML to display on the school’s intranet.
All colour codes must be in hexadecimal. It has the following style sheet
attached:
h1 {color: #ff0000;
font-family: Times, serif;
font-size: 30pt;
text-align: center;}
h2 {color: #0000ff;
Subject : ICT
Year: VIII
Term: II

CSS Notes : Web Authoring

font-family: Times, Helvetica, serif;


font-size: 24pt;
text-align: center;}
h3 {color: #00ff00;

font-family: Times, Helvetica, serif;


font-size: 14pt;
text-align: justify;}

body {background-color: #ad88e6;}


table {border-color: #000000;}
Having tested the web page the teacher needs to make some changes to the
style sheet.
Write down the CSS to:
a. edit style h1 so that the font is Comic Sans or, if not available, Arial or, if this is
not available, the browser’s default sans-serif font.
[3]
b. add a markup to the table style to set a 3-pixel wide, dashed external border.
[4]
c. edit style h3 so that the colour is set to black.
[1]
d. add a markup to the start of style h2 to display the text as bold.
[2]
Answers
a. font-family: "Comic Sans", Arial, sans-serif;
"Comic Sans", [1]
Arial, [1]
sans-serif; [1]
Must be in the correct order
b. table {border-color: #000000; border-style: dashed; border-width: 3px }
Subject : ICT
Year: VIII
Term: II

CSS Notes : Web Authoring


border-style: [1]
dashed; [1]
border-width: [1]
3px [1]
c. h3 {color: #000000;
#000000; [1]
d. h2 { font-weight: bold;
font-weight: [1]
bold; [1]

You might also like