CSS NOTES
1. Definition of CSS
CSS (Cascading Style Sheets) is a stylesheet language used to describe the visual presentation of a web page.
- HTML defines the structure of a webpage, while CSS defines its style and layout.
- It allows web developers to control fonts, colors, spacing, backgrounds, borders, and positioning of
elements.
2. CSS Syntax
A CSS rule has two main parts:
selector {
property: value;
}
- Selector → It signifies or points to an HTML tag to which a style will be applied. Selector could be any tag
like <h1>, <table>, etc.
- Property → It is a type of attribute(such as text color, font style, paragraph spacing, etc.) of HTML tag.
- Value → It is the value assigned to the property. Value is always followed by ‘property’ and separated by
‘colon’.
Example:
p{
color: blue;
font-size: 18px;
text-align: justify;
}
Type Selector:
A type selector in CSS is used to select all elements of a given HTML tag. For example, p { color:
blue; } will apply the style to all <p> (paragraph) elements in the document.
Universal Selector:
The universal selector (*) in CSS is used to select all elements on a webpage. For example, *
{ margin: 0; padding: 0; } will remove margin and padding from every element.
3. Ways to Add CSS in HTML
a) Inline CSS
CSS is applied directly inside an element using the style attribute. Useful for small changes but not
recommended for large projects.
<p style="color: red; font-size: 20px;">This is styled with inline CSS.</p>
b) Internal CSS
CSS is written inside a <style> tag in the <head> section of the HTML document. Used when styling is needed
for a single page.
<head>
<style>
h1 { color: green; text-align: center; }
</style>
</head>
c) External CSS
CSS is written in a separate .css file, and linked using the <link> tag in the HTML <head>. Best practice for
large websites because it separates content (HTML) and design (CSS).
<head>
<link rel="stylesheet" href="style.css">
</head>
style.css:
body {
font-family: Arial, sans-serif;
background-color: lightyellow;
}
4. CSS Background
Background properties allow customization of element backgrounds:
- background-color → Sets a solid background color.
Example:
body {
background-color: blue;
}
or
<h1 style=”background-color: blue;”> Computer Application </h1>
5. CSS Border
Borders are used to create boundaries around elements.
a) Border Style (All Sides)
Defines how the border appears.
Common styles: none, solid, dotted, dashed, double, groove, ridge, inset, outset.
p{
border-style: solid;
}
or
<p style=”border-style: solid;”> Computer Application </p>
b) Border Style (Individual Sides)
You can apply different styles to each side:
p{
border-top-style: solid;
border-bottom-style: dashed;
border-left-style: dotted;
border-right-style: double;
}
or
<p style= “border-top-style: solid;
border-bottom-style: dashed;
border-left-style: dotted;
border-right-style: double;”> Computer Application </p>
c) Border Color
Sets the color of the border. Can be a color name, hex code (#ff0000), RGB (rgb(255,0,0)), or HSL.
<p style=” border-color: blue; border-style: solid;”> Computer Application </p>
d) Border Width
Defines the thickness of the border. Can be in pixels (px), em, or keywords: thin, medium, thick.
<p style=” border-width:4px; border-color: blue; border-style: solid;”> Computer Application </p>
