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