Scribd
Upload
3 views

Introduction to CSS notes

CSS (Cascading Style Sheets) is a stylesheet language that separates content from presentation, allowing for flexible and maintainable web design. It operates through various levels of styling, including inline, internal, and external styles, each with distinct advantages and disadvantages. The document also covers CSS selectors, properties, and the evolution of CSS, emphasizing the importance of cascading rules and specificity in styling HTML elements.

Uploaded by

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

Introduction to CSS notes

CSS (Cascading Style Sheets) is a stylesheet language that separates content from presentation, allowing for flexible and maintainable web design. It operates through various levels of styling, including inline, internal, and external styles, each with distinct advantages and disadvantages. The document also covers CSS selectors, properties, and the evolution of CSS, emphasizing the importance of cascading rules and specificity in styling HTML elements.

Uploaded by

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

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.

You might also like