MODULE 2
Introduction to CSS (Cascading Style Sheets)
Definition:
CSS (Cascading Style Sheets) is a stylesheet language used to control the
presentation of HTML content.
It allows developers to apply styles to web documents, defining how
elements should be displayed visually.
Purpose:
CSS separates the content (HTML) from the presentation (style), ensuring
that web content remains structured and accessible while allowing for
flexible and customizable design.
Why CSS?
Separation of Content and Style:
HTML provides the structure, content, and semantics (e.g., headings,
paragraphs).
CSS deals with the visual aspects (e.g., colors, fonts, spacing).
This separation improves maintainability, as you can update styles
independently of the content.
Reusable and Consistent Design:
CSS enables the application of consistent styles across multiple pages or
the entire website.
It supports centralized styling through external stylesheets, ensuring
uniformity without redundant code.
Efficiency:
Changes in style (like color or font) can be made in one place (a single
CSS file), and those changes automatically propagate across all linked
HTML documents.
This reduces time and effort, particularly for large websites.
How CSS Works
CSS applies styling to HTML using rules. Each rule consists of:
Selectors: Specify which HTML elements the styles apply to.
Examples:
h1: Targets all <h1> elements.
Properties: Define the style aspects you want to change.
Common properties include:
color: Text color.
font-size: Size of the text.
margin: Space around elements.
padding: Space between content and the border.
Values: Provide specific instructions on how the property should be
styled.
Examples:
color: blue;
font-size: 24px;
margin: 10px;
Example CSS Rule:
h1 {
color: blue;
font-size: 24px;
}
This rule styles all <h1> elements with blue text and a font size of 24px.
Evolution of CSS
CSS1 (1996):
Introduced by the World Wide Web Consortium (W3C).
Focused on basic styling capabilities:
Fonts (type, size, style).
Text color and background.
Margins, padding, and borders.
CSS2 (1998):
Expanded on CSS1 with additional features:
Media types: Different styles for different devices (screen, print).
Positioning: Ability to position elements using relative, absolute, or fixed
methods.
Accessibility: Enhanced support for assistive technologies.
CSS3 (Late 1990s onward):
Introduced modularization:
The specification was divided into modules (e.g., Selectors, Box Model,
Backgrounds and Borders).
Added advanced features:
Animations and Transitions: Create interactive, smooth animations.
Responsive Design: Use media queries to adapt styles for various screen
sizes.
Why “Cascading”?
CSS is described as "Cascading" because multiple styles can apply to the
same element, and CSS uses a system to decide which style to apply
based on the priority and specificity of the rules.
Priority Order:
CSS Style Sheet Levels: Comprehensive Notes
Overview
CSS (Cascading Style Sheets) can be implemented at three distinct levels:
1. Inline Styles
2. Internal (Document-level) Styles
3. External Style Sheets
1. Inline Styles
Inline styles are CSS rules that are directly embedded within an
individual HTML element using the style attribute. They apply only to
the specific element where they are declared.
Characteristics
Applied directly to individual HTML elements
Uses the style attribute
Highest specificity among all CSS levels
Affects only the element where it's applied
Syntax
html
Copy
<element style="property1: value1; property2: value2;">
Advantages
Immediate effect on specific elements
Useful for quick testing and prototyping
Overrides other style definitions
Disadvantages
Poor maintainability
Code repetition
Mixes content with presentation
Difficult to update multiple elements
2. Internal (Document-level) Styles
Internal styles, also known as document-level styles, are CSS rules that
are embedded directly within an HTML document using the <style> tag
in the document's <head> section. They apply to all matching elements
within that specific HTML document.
Characteristics
Defined within the HTML document
Placed in the <head> section
Applies to a single HTML document
Uses the <style> tag
Syntax
html
Copy
<style type="text/css"> selector { property1: value1; property2:
value2; }</style>
Advantages
No external files needed
Styles load with the HTML document
Good for single-page websites
Useful for page-specific styles
Disadvantages
Increases page load time
Styles cannot be reused across pages
Difficult to maintain in larger projects
3. External Style Sheets
External style sheets are CSS rules that are stored in a separate .css file,
which can then be linked to multiple HTML documents. This provides a
way to maintain consistent styles across an entire website.
Characteristics
Separate .css file
Linked to HTML documents using <link> tag
Can be applied to multiple pages
Most maintainable approach
Syntax
HTML:
html
Copy
<link rel="stylesheet" type="text/css" href="styles.css">
CSS File (styles.css):
css
Copy
selector { property1: value1; property2: value2;}
Advantages
Maximum reusability
Easier maintenance
Reduced file size for HTML documents
Browser caching benefits
Clear separation of concerns
Why “Cascading”?
CSS uses a **cascading mechanism** to determine which style rule to
apply when multiple rules target the same element:
1. Inline styles have the highest priority.
2. Internal styles come next.
3. External styles are applied last, unless overridden by inline or internal
styles.
Additionally, **specificity** (how detailed the selector is) and the use of
`!important` can influence which rules are applied.
Summary
- Inline Styles: Quick fixes for individual elements.
- Internal Styles: Uniform styles for a single document.
- External Styles: Reusable, centralized styling for multiple documents.
Choosing the appropriate level depends on your project’s complexity,
maintainability requirements, and scope of styling changes. Students
should practice all three methods to understand their advantages and
limitations.
Selector
Simple Selector
Also known as "Type Selector" or "Element Selector"
Matches elements based on their tag name/element type
Applies to ALL instances of that element type in the document
Can target multiple elements using comma separation
Cannot differentiate between same elements that need different
styles
Example with explanation:
css
Copy
/* Targets all h1 headings */
h1
{ color: blue;
font-size: 24px;
}/* Targets multiple elements at once */
h2, h3, h4
{ font-family: Arial;
margin-bottom: 15px;
}
Class Selector
Denoted by a period (.) followed by the class name
Can be reused across multiple elements
An element can have multiple classes (space-separated)
More specific than simple selectors
Provides flexibility in styling similar elements differently
Example with explanation:
css
Copy
/* Basic class selector */
.highlight
{ background-color: yellow;
padding: 5px;}/* Element-specific class selector */p.important
{ color: red;
font-weight: bold;}/
* Multiple classes on one rule */
.large.bold
{
font-size: 20px;
font-weight: bold;}
HTML usage:
html
Copy
<p class="highlight">Highlighted text</p><p
class="important">Important text</p><p class="large bold">Large bold
text</p>
Generic Selector
A class selector that's not tied to any specific HTML element
Can be applied to any type of element
Promotes code reusability
Useful for creating utility classes
Helps maintain consistent styling across different elements
Example with explanation:
css
Copy
/* Can be applied to any element */
.center
{ text-align: center;
margin: 0 auto;}
/* Utility classes */
.mt-20
{ margin-top: 20px;
}
.text-large {
font-size: 1.5em;
}
HTML usage:
html
Copy
<div class="center">Centered div</div><p class="center">Centered
paragraph</p><h1 class="center mt-20">Centered heading with
margin</h1>
ID Selector
Denoted by a hash (#) followed by the ID name
Must be unique within the document
Has higher specificity than classes
Should be used sparingly
Best for unique, one-off styling needs
Example with explanation:
css
Copy
/* Main header styling *
#header
{ background: black;
color: white;
position: fixed;
top: 0;
}/* Specific element styling */
#main-logo
{
width: 150px;
height: auto;}
HTML usage:
html
Copy
<header id="header">
<img id="main-logo" src="logo.png"></header>
Contextual Selector
Also known as "Descendant Selector" or "Combination Selector"
Work with parent and Child relationship
Targets elements based on their relationship in DOM hierarchy
Uses space between selectors to indicate relationship
Can include multiple levels of nesting
Helps maintain specific styling in complex layouts
Example with explanation:
css
Copy
/* Targets paragraphs inside articles */
article p
{ line-height: 1.6;
margin-bottom: 15px;
}/* Multiple levels of nesting */
nav ul li a
{ text-decoration: none;
color: blue;}/* Child selector (>) for direct children only */
<div >
p { color: red;}
Pseudo-Class Selector
Targets elements in specific states or conditions
Begins with a colon (:)
Can be combined with other selectors
Used for interactive and dynamic styling
Common in user interface design
Example with explanation:
css
Copy
/* Link states */a:link
{ color: blue;
}
a:visited {
color: purple;
}a:hover
{
text-decoration: underline;
color: red;}
a:active
{ color: orange;
}/* Form element states */
input:focus
{ border-color: blue;
outline: none;}/* Structural pseudo-classes */
li:first-child
{
font-weight: bold;
}
Universal Selector
Denoted by an asterisk (*)
Matches any element of any type
Often used for CSS resets
Can impact performance if overused
Useful for applying base styles
Example with explanation: css
Copy
/* Reset all elements */*
{ margin: 0;
padding: 0;
box-sizing: border-box;
}/* Target all elements within a container */
.container *
{ color: blue;}/* Combine with other selectors */div *.highlight
{
background-color: yellow;
}
Property Value Forms
CSS (Cascading Style Sheets) provides powerful ways to style and format
HTML elements on web pages. It allows precise control over the
appearance of text, backgrounds, borders, margins, and more. Here’s a
comprehensive breakdown of CSS properties and how they work.
1. Fonts
Font properties control the style, size, and appearance of text on a
webpage.
Font-Families
- Specifies which fonts should be used for an element's text.
- A list of fonts is provided as a fallback mechanism. If the browser
cannot load the first font, it moves to the next one.
Example:
css
h2 {
font-family: "Arial", "Verdana", sans-serif;
}
- If Arial is unavailable, the browser uses Verdana. If both are
unavailable, it defaults to a generic sans-serif font.
Font Sizes
- Defines the height and size of the text.
- Can use **absolute** values (e.g., `medium`, `small`) or **relative**
values (e.g., `120%`, `1.5em`).
- **Relative Sizes** adapt to the surrounding elements, making them
more flexible for responsive design.
- Example:
css
p{
font-size: 14px; /* Absolute size */
}
p{
font-size: 1.2em; /* Relative size */
}
Font Variant
- Customizes how text appears. For example, it can display text in
**small caps**.
Example:
css
p{
font-variant: small-caps;
}
- Converts lowercase letters to uppercase, but smaller in size.
Font Style
- Controls whether the text is italicized or remains normal.
- Options include:
- `italic` – Slanted text.
- `oblique` – Slightly angled text.
- `normal` – Regular text.
- Example:
css
h3 {
font-style: italic;
}
Font Weight
- Adjusts the thickness or boldness of the text.
- Values range from `100` (thin) to `900` (boldest), or you can use
keywords like `bold`, `normal`, `lighter`, and `bolder`.
Example:
css
p{
font-weight: 700; /* Bold */
}
Font Shorthands
- Instead of specifying multiple font-related properties individually,
shorthand notation combines them.
- **Order**: Style, Weight, Size, Line Height, Family.
Example:
```css
p{
font: italic bold 16px/1.5 "Times New Roman", serif;
}
- This sets the font to italic and bold, 16px in size, with a line height of
1.5, and uses Times New Roman as the font family.
Text Decoration
- Adds decorative effects to text, such as:
- `underline` – Underlines text.
- `overline` – Adds a line above the text.
- `line-through` – Strikes through text.
- `none` – Removes decorations.
Example:
```css
a{
text-decoration: underline;
}
Text Spacing
- **Letter-Spacing**: Adjusts space between letters in a word.
- **Word-Spacing**: Adjusts space between words in a sentence.
Example:
css
p{
letter-spacing: 2px; /* Increases letter spacing */
word-spacing: 5px; /* Adds space between words */
}
2. Lists
CSS can style both ordered and unordered lists.
List-Style-Type
- Defines the type of marker used for list items:
- `disc` – A filled circle (default for unordered lists).
- `decimal` – Numbers for ordered lists.
- `square`, `circle`, etc.
Example:
css
ul
{
list-style-type: square;
}
List-Style-Position
- Defines where the marker (bullet/number) is positioned:
- `inside` – Aligned with the list text.
- `outside` – Positioned to the left of the text.
- Example:
css
ol {
list-style-position: inside;
}
3. Alignment of Text
CSS provides properties to align text horizontally or vertically.
Text-Align
- Aligns text within an element.
- `left` – Aligns text to the left.
- `right` – Aligns text to the right.
- `center` – Centers text.
- `justify` – Spreads text to fill the container.
Example:
css
p{
text-align: justify;
}
4. Margins
Margins create space around elements.
Margin
- Specifies space around an element's border.
- Can use **absolute units** (e.g., `px`, `cm`) or **relative units** (e.g.,
`%`).
- **Example**:
```css
div {
margin: 20px; /* 20px on all sides */
}
```
Margin Shorthand
- Combines top, right, bottom, and left margins in one declaration.
- **Order**: Top, Right, Bottom, Left.
- **Example**:
```css
div {
margin: 10px 15px 20px 5px;
}
5. Colors
CSS provides several ways to specify colors.
Color Formats
1. Color Names: `red`, `blue`, `green`, etc.
2. RGB: `rgb(255, 0, 0)` (Red).
3. Hexadecimal: `#FF0000` (Red).
4. HSL: `hsl(0, 100%, 50%)` (Red).( hue, saturation, and lightness)
5. RGBA: `rgba(255, 0, 0, 0.5)` (Transparent red).(red, green, blue, alpha)
Example:
css
h1 {
color: rgb(0, 128, 0); /* Green */
background-color: #FF00FF; /* Fuchsia */
}
Box Model
The CSS Box Model is an essential concept to understand how every
element in HTML is displayed on a web page. Let's break it down further
to understand how it works, why it's important, and practical examples.
1. Components of the Box Model
Every HTML element is considered a rectangular box with the following
parts:
A. Content
What it is: The inner-most part of the box containing the actual content
(e.g., text, images).
Effect: Changing the width or height properties only affects the size of
the content. It determines how much space the actual content will occupy.
Example:
div {
width: 200px;
height: 100px;
}
This defines the size of the content area of the element, meaning the text
or image inside will be constrained to this width and height.
B. Padding
What it is: The space between the content and the element’s border.
Purpose: Padding provides space inside the element, pushing the content
away from the borders. This enhances readability and ensures that the
content does not touch the edges of the element.
Customization: Padding can be individually set for each side:
padding-top
padding-right
padding-bottom
padding-left
Example:
div {
padding: 10px;
}
This adds 10px of inner space around the content, increasing the total size
of the box by pushing the border outward.
Practical Use Case: Imagine a button with text inside it:
Without padding: The text sticks to the edges of the button, making it
look cramped.
With padding: The text has breathing room, making the button look clean
and professional.
C. Border
What it is: The boundary that surrounds the padding. It can be visible or
invisible depending on the design.
Customization:
border-width: Sets the thickness of the border (e.g., 2px, 5px).
border-style: Defines the type of border (e.g., solid, dotted, dashed, none).
border-color: Specifies the color of the border.
Example:
div {
border: 2px solid black;
}
This adds a 2px black solid line around the element, clearly defining its
boundaries.
Importance:
Borders are used to visually separate content or highlight specific areas of
a webpage. For instance, a border can be used to frame an image or
define the boundary of a section.
When combined with padding, borders contribute to a well-structured and
visually appealing layout.
D. Margin
What it is: The space outside the element’s border, creating distance
between the element and its neighboring elements.
Purpose: Margins help in spacing out elements, preventing them from
being too close to each other and improving the overall layout and
readability.
Customization: Margins can be set for each side individually:
margin-top
margin-right
margin-bottom
margin-left
Example:
div {
margin: 20px;
}
This adds 20px of space around the element, separating it from other
elements and creating a more spacious layout.
Practical Use Case: Consider a set of paragraphs:
Without margins: The paragraphs appear cluttered and are hard to read.
With margins: Each paragraph is spaced out neatly, making the text easier
to read and visually appealing.
Certainly! Here's a more theoretical and detailed explanation of the CSS
concepts you're referencing:
Background Properties
CSS background properties are used to style the background area of
elements, giving developers flexibility in enhancing the visual appeal and
usability of a webpage. These properties help to define how the
background color or image appears in relation to an element’s content
and layout.
Background-Color
This property defines the background color of an element. It can take
color values in various formats such as names (e.g., red, blue),
hexadecimal (e.g., #FF5733), RGB (e.g., rgb(255, 0, 0)), and RGBA (e.g.,
rgba(255, 0, 0, 0.3) for transparency).
Default Value: Transparent.
Example: background-color: lightblue; sets the background color of the
element to light blue.
Background-Image
This property allows you to apply an image to the background of an
element. The image can be a URL to an external resource or a data URL.
It can be further customized with properties like background-repeat (to
control tiling) and background-size (to control the scaling of the image).
Default Value: None (no image).
Example: background-image: url("image.jpg"); applies an image as the
background.
Background-Repeat
Controls whether the background image is repeated (tiled) or not. It can
take values like repeat (the default), no-repeat, repeat-x, or repeat-y.
Example: background-repeat: no-repeat; ensures the background image is
not tiled.
Background-Size
Defines the size of the background image. The value can be set as
specific dimensions (e.g., 100px 100px), percentage values, or keywords
like cover and contain.
Example: background-size: cover; ensures that the image covers the
entire background area without distortion, while maintaining its aspect
ratio.
Border Properties
Borders are used to outline an element, making it visually distinct and
allowing for separation between different parts of a page or sections.
Border-Width
Specifies the thickness of the border. The value can be in absolute units
such as pixels (e.g., px), or relative units like ems (em), rems (rem), etc.
Example: border-width: 2px; sets a border width of 2 pixels.
Border-Style
Defines the style of the border. It can take various values like solid (a
solid line), dotted (dotted line), dashed (dashed line), double (two lines),
and more.
Example: border-style: dashed; creates a dashed border around the
element.
Border-Color
Specifies the color of the border, similar to the background-color property.
It can take various color values like named colors (red), hexadecimal
colors (#FF5733), RGB (rgb(255,0,0)), etc.
Example: border-color: blue; sets the border color to blue.
Border Shorthand
Combines the border-width, border-style, and border-color properties into
one shorthand property. This makes it easier to set all three values in one
line of code.
Example: border: 2px dashed blue; sets the border to 2 pixels thick,
dashed, and blue.
Units and Values
CSS properties often require units to define the values of properties such
as width, height, margins, padding, font size, etc. These units can be
categorized into absolute units and relative units.
Absolute Units
These units have a fixed size, regardless of any other factors such as font
size or viewport size. Common absolute units include:
px (pixels)
cm (centimeters)
mm (millimeters)
in (inches)
Example: width: 200px; sets the width of an element to exactly 200 pixels.
Relative Units
These units are based on other factors such as the font size or parent
element dimensions, making them flexible and more responsive to
changes in layout or screen size.
em: Relative to the font-size of the element. For example, 1em is equal to
the current font size of the element.
rem: Relative to the font-size of the root element (html).
%: Relative to the parent element's dimensions (for example, width,
height, margin, padding).
Example: font-size: 1.5em; means the font size is 1.5 times the parent
element’s font size.
Percentages
Percentages are commonly used for relative sizing, positioning, and
layout, especially in terms of widths, heights, margins, and padding. A
percentage value is calculated relative to the parent element’s dimensions.
Example: width: 50%; sets the width of the element to 50% of its parent
element's width.
