Unit-III: Cascading Style Sheets (CSS) - HTML
Unit-III: Cascading Style Sheets (CSS)
1. CSS Overview
·
What is CSS? CSS (Cascading Style Sheets) is a
language used for describing the presentation of a document written in a markup
language like HTML. It dictates how HTML elements are to be displayed on
screen, paper, or in other media.
·
Separation of Concerns: CSS promotes the
separation of document content (HTML) from document presentation (CSS). This
makes websites easier to maintain, more flexible, and more accessible.
·
How it Works: Browsers apply CSS rules to render
HTML elements according to the specified styles.
2. CSS Rules
A CSS Rule (or Rule Set) consists of two main parts:
·
Selector: Points to the HTML element(s) you
want to style.
·
Declaration Block: Contains one or
more declarations, enclosed in curly braces {}.
Declaration: Consists of a property name and a value, separated by
a colon :, and ended with a semicolon ;.
·
Example: color: blue; (property: color, value: blue)
CSS
/* This is a CSS Rule */
p { /* Selector: 'p' selects all
paragraph elements */
color: blue; /* Declaration 1: Sets text color to blue */
font-size: 16px; /* Declaration 2: Sets font size to
16 pixels */
}
3. Selectors
Selectors are crucial for targeting
specific HTML elements.
Type (Element) Selectors: Selects all
instances of a given HTML element.
·
Syntax: elementname { /*
declarations */ }
·
Example: h1 { color: green;
} (Applies to all <h1> tags)
Universal Selector (*): Selects all HTML
elements on the page. Use sparingly as it can impact performance and override
specific styles.
·
Syntax: * { /* declarations
*/ }
·
Example: * { margin: 0;
padding: 0; } (Resets margin and padding for all elements, common for initial setup)
Class Selectors: Selects HTML
elements with a specific class attribute. An element can have
multiple classes.
·
Syntax in CSS: .classname { /*
declarations */ }
·
Syntax in HTML: <p
class="intro">This is an intro paragraph.</p>
·
Example: .highlight {
background-color: yellow; } (Applies to <span
class="highlight">)
ID Selectors: Selects a single HTML element with a specific id attribute. IDs must be unique within a document.
·
Syntax in CSS: #idname { /*
declarations */ }
·
Syntax in HTML: <div
id="header">Website Header</div>
·
Example: #main-content {
width: 800px; } (Applies to the element with id="main-content")
4. CSS Syntax and Style
·
Readability: Use consistent indentation and line
breaks to make your CSS readable.
·
Comments: Use /* comment */ for single or
multi-line comments.
·
Semicolons: Always end declarations with a
semicolon, even the last one. It's good practice and prevents errors if you add
more declarations later.
5. <span> and <div> Elements
These are generic HTML container
elements, crucial for applying styles when no other semantic element fits.
<div> (Division):
·
A block-level element. It typically starts on a new line and takes up
the full available width.
·
Used for grouping larger sections of content.
·
Example: <div
class="container">...</div> or <div
id="footer">...</div>
<span> (Span):
·
An inline element. It does not start on a new line and only takes up as
much width as necessary.
·
Used for applying styles to smaller, specific parts of text or inline
content.
·
Example: <p>This is
some <span style="font-weight: bold;">bold</span>
text.</p>
6. Cascading
The "Cascading" in CSS
refers to how the browser determines which styles to apply when multiple rules
conflict. It follows a hierarchy:
Importance (User !important): !important declarations override normal rules (use sparingly).
Origin: Author styles >
User styles > Browser default styles.
Specificity: A more specific
selector overrides a less specific one.
·
ID selectors (#id) > Class selectors (.class) > Type selectors (p).
·
Example: #myDiv { color:
red; } will override .myClass { color: blue; } if myDiv also has myClass.
Order: If specificity and
importance are equal, the last declared rule (further down in the stylesheet)
wins.
7. Ways to Include CSS (Style Integration)
style Attribute (Inline
CSS):
·
Applies styles directly to a single HTML element.
·
Syntax: <p
style="color: red; font-size: 14px;">...</p>
·
Pros: Quick for one-off styles.
·
Cons: Mixes content and presentation, hard
to maintain, no separation of concerns. Avoid for anything significant.
style Container
(Internal/Embedded CSS):
·
CSS rules are placed within a <style> tag in the <head> section of an HTML document.
·
Syntax:
HTML
<head>
<style>
body { background-color: lightblue; }
h1 { color: navy; }
</style>
</head>
·
Pros: Good for single-page applications or
when styles are unique to one page.
·
Cons: Still mixes content and presentation
if used on many pages; not reusable across multiple HTML files.
External CSS Files (Recommended):
·
CSS rules are placed in a separate .css file.
·
Linked to the HTML document using the <link> tag in the <head> section.
·
Syntax (in HTML): <link
rel="stylesheet" href="styles.css">
·
Pros: Best practice! Complete separation
of concerns, highly reusable, easier to maintain, faster page loads (browser
caches the CSS file).
·
Cons: Requires an extra HTTP request
(minor).
8. CSS Properties (Key Categories)
A. Color Properties
color: Sets the foreground
(text) color.
background-color: Sets the
background color of an element.
Color Values:
·
Named Colors: red, blue, green, orange, transparent, etc. (limited but intuitive)
·
RGB Values (rgb()): Red, Green, Blue
components from 0 to 255.
·
Syntax: rgb(red, green,
blue)
·
Example: color: rgb(255, 0,
0); (Red)
·
Example: background-color:
rgb(0, 128, 255);
·
Hexadecimal Values (#): Six-digit hex code
representing RRGGBB.
·
Syntax: #RRGGBB or #RGB (shorthand for repeated digits like #FF0000 is #F00)
·
Example: color: #FF0000; (Red)
·
Example: background-color:
#0080FF;
·
RGBA Values (rgba()): RGB with an Alpha
(opacity) channel (0 to 1).
·
Syntax: rgba(red, green,
blue, alpha)
·
Example: color: rgba(255, 0,
0, 0.5); (50% opaque red text)
·
HSL Values (hsl()): Hue (0-360
degrees), Saturation (0-100%), Lightness (0-100%).
·
Syntax: hsl(hue,
saturation%, lightness%)
·
Example: color: hsl(120,
100%, 50%); (Pure Green)
·
HSLA Values (hsla()): HSL with an Alpha
(opacity) channel.
·
Syntax: hsla(hue,
saturation%, lightness%, alpha)
·
Example: background-color:
hsla(240, 100%, 50%, 0.7); (70% opaque blue background)
·
opacity Property: Sets the overall
opacity of an entire element (content, background, borders). Value
from 0.0 (fully transparent) to 1.0 (fully opaque).
·
Example: div { opacity: 0.7;
} (Makes the div and its contents 70% opaque)
·
Note: Unlike rgba()/hsla(), opacity affects child
elements as well.
B. Font Properties
·
font-family: Specifies the font
for text. Can list multiple fonts as fallbacks.
·
Example: font-family: Arial,
sans-serif;
·
font-size: Sets the size of
the font.
·
Units: px (pixels), em (relative to parent's font-size), rem (relative to root
HTML font-size), %, vw (viewport width), vh (viewport height).
·
Example: font-size: 16px; or font-size: 1.2em;
·
font-weight: Sets the thickness
of characters.
·
Values: normal, bold, bolder, lighter, or numeric values
100 to 900.
·
Example: font-weight: bold; or font-weight: 700;
·
font-style: Sets the style of
the font.
·
Values: normal, italic, oblique.
·
Example: font-style: italic;
·
text-decoration: Adds or removes
decorations to text.
·
Values: none, underline, overline, line-through.
·
Example: a {
text-decoration: none; } (Removes underline from links)
·
font (Shorthand): Combines multiple
font properties. Order matters.
·
Syntax: font: [font-style]
[font-variant] [font-weight] [font-size]/[line-height] [font-family];
·
Example: font: italic bold
16px/1.5 Arial, sans-serif;
·
line-height Property: Sets the height of
a line of text. Often used to improve readability.
·
Values: normal, a number
(multiplies font-size), length (px, em), percentage.
·
Example: line-height: 1.5; (1.5 times the font-size)
C. Text Properties
text-align: Aligns text
horizontally.
·
Values: left, right, center, justify.
·
Example: h1 { text-align:
center; }
text-indent: Indents the first
line of text.
·
Example: p { text-indent:
50px; }
letter-spacing: Increases or decreases the space
between characters.
·
Example: h2 {
letter-spacing: 2px; }
word-spacing: Increases or decreases the space
between words.
·
Example: p { word-spacing:
5px; }
text-transform: Controls capitalization.
·
Values: none, uppercase, lowercase, capitalize.
·
Example: h3 {
text-transform: uppercase; }
D. Border
Properties
Borders define lines around the
padding of an element.
border-width: Sets the width of the border.
·
Values: thin, medium, thick, or length (px, em).
·
Example: border-width: 2px;
border-style: Sets the style of the border.
·
Values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
·
Example: border-style:
solid;
border-color: Sets the color of the border.
·
Example: border-color:
black;
border
(Shorthand): Combines width, style, and color.
·
Syntax: border: [width]
[style] [color];
·
Example: border: 1px solid
#ccc;
Individual Sides: You can style
individual sides: border-top, border-right, border-bottom, border-left (and their respective *-width, *-style, *-color properties).
·
Example: border-bottom: 2px
dashed blue;
9. The Element Box (Box Model)
Every HTML element is considered a
rectangular box. The Box Model describes how these boxes are rendered,
comprising:
·
Content: The actual content of the element
(text, images, etc.). Its size is determined by width and height properties.
·
Padding: The space between the content and
the border. It's the inner spacing and takes the background color of the
element.
·
Border: The line that surrounds the padding
and content.
·
Margin: The space outside the border,
creating a gap between the element and other adjacent elements. It is
transparent.
+---------------------------------+
| Margin |
|
+---------------------------+ |
| | Border |
|
| | +---------------------+ | |
| | |
Padding | | |
| | |
+-------------+ | | |
| | |
| Content |
| | |
| | |
+-------------+ | | |
| | +---------------------+ | |
|
+---------------------------+ |
+---------------------------------+
A. padding Property
Adds space between
the content and the border inside the element.
Shorthand:
·
padding: 20px; (All four sides:
top, right, bottom, left)
·
padding: 10px 20px; (Top/Bottom 10px,
Left/Right 20px)
·
padding: 10px 20px 30px; (Top 10px,
Left/Right 20px, Bottom 30px)
·
padding: 10px 20px 30px 40px; (Top 10px, Right
20px, Bottom 30px, Left 40px - clockwise from top)
·
Individual Sides: padding-top, padding-right, padding-bottom, padding-left.
·
Example: padding-left: 15px;
B. margin Property
·
Adds space outside the border, creating
separation from other elements.
·
Shorthand: Works identically to padding shorthand.
·
margin: 20px; (All four sides)
·
margin: 10px 20px; (Top/Bottom 10px,
Left/Right 20px)
·
Individual Sides: margin-top, margin-right, margin-bottom, margin-left.
·
Example: margin-bottom:
10px;
·
margin: auto;: For block-level
elements, margin: auto; (specifically margin-left: auto; margin-right: auto;) will horizontally center the
element within its containing block, provided a width is set.
Case Study:
Description of your City or place with the use of CSS and compare it with
previous two case studies
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Explore Martur, Andhra
Pradesh</title>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<header id="main-header">
<h1>Welcome to Martur, Andhra
Pradesh</h1>
<p class="tagline">A
Glimpse into the Heart of Prakasam District</p>
</header>
<main class="container">
<section
class="overview">
<h2>Overview</h2>
<p>Martur is a Mandal
headquarters located in the Prakasam district of <span
class="highlight">Andhra Pradesh, India</span>. It is
strategically located near the National Highway, making it a significant
transit point. Known for its agricultural prosperity, Martur is surrounded by
lush green fields, primarily cultivating tobacco, paddy, and cotton.</p>
<p>The town serves as a local
hub for trade and commerce, offering various essential services to the
surrounding villages. Its vibrant local markets are a testament to its economic
activity.</p>
</section>
<section
class="landmarks">
<h2>Key Aspects &
Landmarks</h2>
<div
class="feature-box">
<h3>Agricultural
Hub</h3>
<p>Martur's economy is
heavily reliant on agriculture. The fertile lands support a variety of crops,
contributing significantly to the regional economy. The landscape is often
dotted with borewells and irrigation systems, vital for farming.</p>
<p>Notable crops include:
<span class="crop">Tobacco</span>, <span
class="crop">Paddy (Rice)</span>, and <span
class="crop">Cotton</span>.</p>
</div>
<div
class="feature-box">
<h3>Transport
Connectivity</h3>
<p>Being close to
<span class="important-info">National Highway 16</span>
(formerly NH5), Martur benefits from excellent road connectivity to major
cities like Vijayawada, Guntur, and Chennai. This enhances its importance as a
local logistic center.</p>
</div>
<div
class="feature-box">
<h3>Local Culture &
Community</h3>
<p>The community in
Martur is warm and welcoming, reflecting the traditional values of Andhra
Pradesh. Festivals are celebrated with enthusiasm, bringing people together.
The local cuisine offers authentic Andhra flavors, known for their spice and
richness.</p>
<p>Explore the <a
href="#market" class="link-style">local market</a>
for fresh produce and handicrafts.</p>
</div>
</section>
<section id="market"
class="contact-info">
<h2>Experience
Martur</h2>
<p>Whether you're interested
in the agricultural landscape, local trade, or simply want to experience the
tranquil rural life of Andhra Pradesh, Martur offers a unique
perspective.</p>
<div
class="contact-details">
<p>For more information,
visit the local Mandal Parishad Office.</p>
<p>Or contact us at:
<span
class="contact-email">info.martur@example.com</span></p>
</div>
</section>
</main>
<footer id="main-footer">
<p>© 2025 Martur
Exploration. All rights reserved.</p>
<p>Developed with love and
CSS.</p>
</footer>
</body>
</html>
Styles.css
/*
Universal Selector */
* {
box-sizing: border-box; /* Ensures padding
and border are included in element's total width/height */
margin: 0;
padding: 0;
}
/* Type
Selectors */
body {
font-family: 'Segoe UI', Tahoma, Geneva,
Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4; /* Light grey
background */
}
h1, h2, h3
{
font-family: 'Arial Black', sans-serif;
color: #2c3e50; /* Dark blue/grey */
margin-bottom: 15px; /* Space below
headings */
text-transform: capitalize; /* Capitalize
the first letter of each word */
}
h1 {
font-size: 2.8em; /* Relative to root
font-size */
text-align: center;
color: #ecf0f1; /* Lighter color for header
text */
}
h2 {
font-size: 2em;
border-bottom: 2px solid #3498db; /* Blue
underline */
padding-bottom: 5px; /* Space between text
and underline */
margin-top: 30px; /* Space above section
headings */
}
h3 {
font-size: 1.5em;
color: #3498db; /* Blue */
}
p {
margin-bottom: 10px; /* Space below
paragraphs */
text-align: justify; /* Justify text for
better readability */
}
a {
color: #2980b9; /* Link color */
text-decoration: none; /* Remove underline
*/
}
a:hover {
text-decoration: underline; /* Add
underline on hover */
}
/* ID
Selectors */
#main-header
{
background-color: #34495e; /* Darker
blue/grey background */
color: #fff; /* White text */
padding: 40px 20px; /* Top/Bottom,
Left/Right padding */
margin-bottom: 20px; /* Space below header
*/
border-bottom: 5px solid #2c3e50; /* Dark
border at the bottom */
}
#main-footer
{
background-color: #2c3e50; /* Dark
blue/grey */
color: #ecf0f1; /* Light text */
text-align: center;
padding: 20px;
margin-top: 30px;
font-size: 0.9em;
}
#market {
/* An ID selector targeting a specific section */
background-color: #ecf0f1;
padding: 20px;
border-radius: 8px; /* Slightly rounded
corners */
}
/* Class
Selectors */
.container
{
max-width: 960px; /* Max width for content
*/
margin: 0 auto; /* Center the container
horizontally */
padding: 20px;
background-color: #fff; /* White background
for the main content area */
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /*
Subtle shadow */
}
.tagline {
font-size: 1.2em;
font-style: italic;
text-align: center;
color: rgba(255, 255, 255, 0.8); /*
Slightly transparent white */
margin-top: 10px;
}
.overview
p:first-of-type { /* Pseudo-selector for first paragraph in overview */
font-weight: bold;
}
.highlight
{
background-color: rgba(255, 255, 0, 0.6);
/* Semi-transparent yellow highlight */
padding: 2px 5px;
border-radius: 3px;
}
.feature-box
{
background-color: #ecf0f1; /* Lighter
background for feature boxes */
border: 1px solid #ddd; /* Light grey
border */
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0,
0.05); /* Very subtle shadow */
}
.crop {
font-weight: bold;
color: #27ae60; /* Green color for crop
names */
}
.important-info
{
color: #e74c3c; /* Red color for important
info */
font-weight: bold;
}
.link-style
{
font-style: italic;
text-decoration: underline;
color: #1abc9c; /* Turquoise color for
specific links */
}
.contact-info
{
background-color: #ecf0f1;
padding: 20px;
border-top: 3px dashed #95a5a6; /* Dashed
top border */
margin-top: 30px;
text-align: center;
}
.contact-details
{
margin-top: 15px;
font-size: 1.1em;
color: #555;
}
.contact-email
{
font-weight: bold;
color: #d35400; /* Orange color for email
*/
}
/* Span and
Div Elements in action */
/* Most
class selectors are applied to div or span elements implicitly */
/*
.container, .feature-box are divs */
/*
.highlight, .crop, .important-info, .contact-email are spans */
/* Example
of more specific rule (Cascading) */
.container
p { /* All paragraphs inside .container */
line-height: 1.7;
}
.overview p
{ /* More specific: paragraphs inside .overview */
color: #444; /* Darker text */
}
/* Element
Box Properties in action */
/* padding,
margin are extensively used in body, header, footer, container, feature-box, p,
h1, h2 */
/* border
is used in h2, feature-box, main-header, contact-info */
/*
box-sizing: border-box is used universally for predictable box model behavior
*/
Comments
Post a Comment