CLASS 7 CSS Handout 1

COMPUTER HANDOUT- GRADE VII
(2022-23)
WT4 Syllabus:
1. Introduction to CSS
 How CSS is using With HTML
 Types of CSS Files and its Syntax
 Selectors in CSS
 Color, Background, Border
2. Cyber Security and Ethics
Introduction to CSS
CSS is used to control the style of a web document in a simple and easy way. CSS is the
acronym for "Cascading Style Sheet".
 It create Stunning Web site - CSS handles the look and feel part of a web page. Using
CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs,
how columns are sized and laid out, what background images or colors are used, layout
designs, and variations in display for different devices and screen sizes as well as a variety of
other effects.
Hello World using CSS.
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
<style>
h1 {
color: #36CFFF;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Advantages of CSS
 CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages as
you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less
code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all elements in all
the web pages will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can
give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for more than one
type of device. By using the same HTML document, different versions of a website can be
presented for handheld devices such as PDAs and cell phones or for printing.
 Global web standards - Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.
Using CSS
CSS can be added to HTML documents in 3 ways:
1. Inline - by using the style attribute inside HTML elements
2. Internal - by using a <style> element in the <head> section
3. External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
1. Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Output:
A Blue Heading
A red paragraph.
2. Internal CSS
An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in
the <head> section of an HTML page, within a <style> element.
Eample :
<!DOCTYPE html>
<html><head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style></head>
<body>
<h1>Displaying heading using CSS</h1>
<p>Displaying paragraph using CSS.</p>
</body></html>
Output:
Displaying heading using CSS
Displaying paragraph using CSS.
3. External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>External style sheet example</h1>
<p> External style sheet paragraph.</p>
</body>
</html>
Output :
External style sheet example

External style sheet paragraph
The external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
Here is what the "styles.css" file looks like:
“styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
1. Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific relationship between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or attribute value)
1. The CSS element Selector

The element selector selects HTML elements based on the element name.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
2. The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique
element
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1"> select an element with a specific id, write a hash (#) character</p>
<p>This paragraph is not affected by the style.</p>
</body></html>
3. The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class
name.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center"> The class selector selects HTML elements with a specific class attribute.
</h1>
<p class="center"> select elements with a specific class.</p>
</body></html>
4. The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style></head>
<body>
<h1> CSS Universal Selector</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body></html>
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
<!DOCTYPE html>
<html><head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1> grouping selector selects all the HTML elements</h1>
<h2>Smaller heading!</h2>
<p> The grouping selector selects all the HTML elements with the same style definitions.
</p>
</body></html>
All CSS Simple Selectors
Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class p.intro Selects only <p> elements with class="intro"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements
CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body></html>
CSS Backgrounds
The CSS background properties are used to add background effects for elements.
Following CSS background properties can be set:

background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)
<!DOCTYPE html>
<html><head>
<style>h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
</style></head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body></html>
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's
border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
</body></html>
Cyber Security and Ethics

Computer security, cybersecurity or information technology security (IT security) is the
protection of computer systems and networks from information disclosure, theft of or damage
to their hardware, software, or electronic data, as well as from the disruption or misdirection of
the services they provide.
Cyber Threats and Cyber Security
There are many types of cyber-attacks that have evolved over a period of time:
1. Virus – It is a malware that self-replicates and spreads by inserting copies of itself into
other executable code or documents.
2. Hacking Websites – An unauthorized access to any website belonging in a personal or
professional space
3. Malicious Codes – It is a kind of security threat where any code present in software tends
to bring harmful effects, breach the security of the system, or bring damage to the system.
4. Advanced Worm and Trojan – This is again a malware that camouflages as a regular
software however once accessed, brings damage to the hard drive, background systems
and corrupts allocation systems
5. Identity Theft and Phishing – It is a cyber attack involving fraudulent emails posing as
authorized entities in order to induce people to reveal their information (personal and
professional.)
6. DOS, DDOS – DOS stands for Denial-of-Service attack, and DDOS stands for Distributed
Denial-of-Service attack. The attackers make the machine or network unavailable by
disrupting services of the host network through the flood of superfluous requests to
overload systems. And when such flooding of requests comes from various ends, it is
termed as DDOS.
7. Cyber Espionage – Usually when a government’s or important organization’s privacy is
posed at risk due to illegal use of computer networks to seek confidential information.
8. Cyber Warfare – Deliberately attacking the information systems through the use of
computer technology to disrupt the state’s activities, especially for military purposes.

CLASS 7 CSS Handout 1

Uploaded by

Copyright:

Available Formats

CLASS 7 CSS Handout 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CLASS 7 CSS Handout 1

Uploaded by

Copyright:

Available Formats

COMPUTER HANDOUT- GRADE VII

External style sheet example

1. The CSS element Selector

<p>Every paragraph will be affected by the style.</p>

Selector Example Example description

#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

* * Selects all elements

element p Selects all <p> elements

Following CSS background properties can be set:

Cyber Security and Ethics

You might also like