Scribd
Upload
35 views

CSS For Class 10

CSS (Cascading Style Sheets) is a language used to style and lay out web pages. CSS describes how HTML elements should be displayed on screen, paper, or other media. CSS allows control over layout, fonts, colors, and other attributes for multiple web pages all at once through external style sheets stored in CSS files. A CSS rule consists of a selector that points to an HTML element to style paired with a declaration block containing property-value pairs to define styles.

Uploaded by

ajprogaming933
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

CSS For Class 10

CSS (Cascading Style Sheets) is a language used to style and lay out web pages. CSS describes how HTML elements should be displayed on screen, paper, or other media. CSS allows control over layout, fonts, colors, and other attributes for multiple web pages all at once through external style sheets stored in CSS files. A CSS rule consists of a selector that points to an HTML element to style paired with a declaration block containing property-value pairs to define styles.

Uploaded by

ajprogaming933
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

 CSS is the language we use to style an HTML document.

 CSS describes how HTML elements should be displayed.

What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web
pages all at once
 External stylesheets are stored in CSS files

CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by


semicolons.

Each declaration includes a CSS property name and a value, separated by a


colon.

Multiple CSS declarations are separated with semicolons, and declaration


blocks are surrounded by curly braces.

Example
In this example all <p> elements will be center-aligned, with a red text
color:

p {
color: red;
text-align: center;
}
Example Explained
 p is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

Colour and Background Colour


Border Style
Margins

Properties related to Fonts


i. Font-family : Used to define a list of fonts that should be prioritized to be used to
display a given element on web page.
ii. Font-variant : A font can be displayed in two variants : normal font or small-caps
font. A Small-Caps font is a font that uses smaller sized capitalized letters in place of
lower case letters.
iii. Font-weight : Specifies the boldness or heaviness for a font. A font can be set to
either normal or bold via property font-weight.
iv. Font -style : Define the style in normal or italic or oblique for the chosen font. Italic
forms are generally cursive in nature while oblique faces are typically sloped versions
of the regular face.
v. Font-size : set the size of font. Different units are : px(pixels), pt(Point-size),
%(percentage) and em etc. (one em is equal to the font size for the current font, 3
ems means triple the size.)
Question
Sample Program

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>


<p>This is a paragraph.</p>

</body>
</html>

Output

You might also like