DELHI PUBLIC SCHOOL AGRA
(Under the aegis of The Delhi Public School Society, East of Kailash, New Delhi)
Session 2024-25
Grade VII November 2024 Handouts
Computer Science
Introduction to CSS
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a
document written in a markup language. In the context of HTML, CSS is used to define the visual
appearance and layout of web pages, including font types and sizes, colors, and the arrangement of
elements on the page. By separating the presentation from the content, CSS allows for more flexibility
and maintainability in web design.
HTML with CSS
CSS (Cascading Style Sheets) and HTML (Hypertext Markup Language) are two essential web
development tools that work together to create visually appealing websites. CSS can be used with
HTML to style and layout the content on web pages. CSS defines the visual appearance of HTML
elements such as font size, color, spacing, and layout, among others. It allows developers to separate
content from presentation, which makes it easier to maintain, update and apply styles consistently
across web pages. By using CSS in conjunction with HTML, web developers can create more engaging
and aesthetically pleasing web content.
Extension of CSS file
An extension of a CSS file is a specification file that extends the functionality and capabilities of the
CSS language. It allows developers to define additional styles and properties that go beyond the
standard CSS syntax. CSS file is saved with .css extension.
Types of CSS files
There are following types of CSS files:
1. External CSS files: These are linked from an HTML document using the “link” tag. They are typically
used for styling the entire website.
2. Internal CSS files: These are embedded within the HTML document using the “style” tag. They are
typically used to style specific elements on the page.
3. Inline CSS: This is used to apply styles to individual HTML elements using the “style” attribute. This
is the least common and least effective approach to styling.
CSS Selectors
A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the
browser which HTML elements should be selected to have the CSS property values inside the rule
applied to them. The element or elements which are selected by the selector are referred to as the
subject of the selector.
1. CSS element Selector
2. CSS class Selector
3. CSS Universal Selector
4. CSS ID selector
5. CSS Grouping Selector
1. CSS element Selector: The element selector selects the HTML element by name. The element
selector in CSS is used to select HTML elements that are required to be styled. In a selector
declaration, there is the name of the HTML element and the CSS properties which are to be
applied to that element is written inside the brackets {}.
Page 1
Example Code
Output
<html>
<head>
<title>Element Selector</title>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every
paragraph.</p>
<p>Delhi Public School</p>
<p>Agra</p>
</body>
</html>
2. The CSS class Selector: The class selector selects HTML elements with a specific class
attribute. It is used with a period character. (full stop symbol) followed by the class name.
Example Code
Output
<html>
<head>
<title>class Selector</title>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p class="center">This style will be
applied on every paragraph.</p>
<h1 class="center">Delhi Public
School</h3>
<h3 class="center">Agra</h3>
</body>
</html>
3. The CSS universal selector: The asterisk (*) is known as the CSS universal selectors. It can be
used to select any and all types of elements in an HTML page. The asterisk can also be followed
by a selector while using to select a child object. This selector is useful when we want to select
all the elements on the page.
Example Code Output
<html>
<head> <body>
<title>class Selector</title> <p>This style will be applied
<style> on every paragraph.</p>
*{ <h1>Delhi Public
text-align: center; School</h3>
color: green; <h3>Agra</h3>
} </body> Page 2
</style> </html>
</head>
4. CSS ID selector : A CSS ID selector allows you to target specific HTML elements on a webpage
for styling. The id attribute of an HTML element provides a unique identifier that can be used
to select the element in CSS. The CSS ID selector uses the hash symbol (#) followed by the id
attribute value.
Example Code Output
<html>
<head>
<title>ID Selector</title>
<style>
#para {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para">This style will be applied on every
paragraph.</p>
<h1>Delhi Public School</h3>
<h3>Agra</h3>
</body>
</html>
5. CSS Grouping selector: A CSS group selector allows you to select multiple CSS elements with
one selector. The group selector syntax starts with a comma-separated list of element
selectors. The group selector enables you to apply the same style properties to multiple
elements in a single line in CSS code.
Example Code Output
<html>
<head>
<title>ID Selector</title>
<style>
#para {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para">This style will be applied on
every paragraph.</p>
<h1>Delhi Public School</h3>
<h3>Agra</h3>
</body>
</html>
Page 3
CSS Colors:
CSS Colors refer to a set of rules that provide the ability to specify colors for text, background, and
other design elements on a web page. CSS Colors allow you to define colors in a variety of ways,
including by name (e.g. "red" or "blue") or by hex code (e.g. "#FF0000" for red).
CSS background Color: To add background color in HTML, use the CSS background-color property. Set
it to the color name or code and place it inside a style tag.
Example Code Output
<html>
<head>
<title>Background color</title>
<style>
body {
background-color: coral;
}
</style>
</head>
<body>
<h1>The background-color Property</h1>
<p>The background color can be specified
with a color name.</p>
</body>
</html>
CSS text Color: The color property is used to set the color of the text. The color is specified by: a color
name - like "red" a HEX value - like "#ff0000"
Example Code Output
<html>
<head><title>Text color</title>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice
that this text is blue. The default text color
for a page is defined in the body
selector.</p>
<p>End of paragraph.</p>
</body>
</html>
CSS border Color: The border-color property is used to set the color of the four borders.
The color can be set by:
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
Page 4
CSS border style : In CSS, borders are used to add a frame or outline to an element. There are various
styles that can be used to style a border, such as solid, dotted, dashed, and rounded. The border
property controls the style, width, color, and spacing of these borders. It can also be used to create
shadow effects and to remove borders entirely.
Property Values:
dotted: A series of dots are displayed in a line as the border.
solid: A single solid and bold line is used as a border.
dashed: A series of square dashed lines are used as a border.
double: Two lines placed parallel to each other act as the border.
groove: Displays a 3D grooved border, its effect depends on border-color value.
ridge: Displays a 3D ridged border, its effect depends on border-color value.
inset: displays a 3D inset border, its effect depends on border-color value.
outset: Displays a 3D outset border, its effect depends on border-color value.
Example Code Output
<html>
<head><title>Border Color and
Style</title>
<style>
h1 {
border-color:red;
border-style: dotted;
}
h2 {
border-color:blue;
border-style: dashed;
}
</style>
</head>
<body>
<h1>A Heading with a dotted border and
red color.</h1>
<h2>A Heading with a dashed border and
blue color.</h2>
</body>
</html>
Page 5
