Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

Copy of Module 3. Introduction to CSS

The document provides a comprehensive introduction to CSS (Cascading Style Sheets), covering its definition, key features, syntax, and types (Inline, Internal, and External CSS). It explains how to style HTML elements, including colors, alignment, links, and images, while emphasizing best practices and the importance of comments. The document also outlines when to use each type of CSS and provides examples for better understanding.

Uploaded by

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

Copy of Module 3. Introduction to CSS

The document provides a comprehensive introduction to CSS (Cascading Style Sheets), covering its definition, key features, syntax, and types (Inline, Internal, and External CSS). It explains how to style HTML elements, including colors, alignment, links, and images, while emphasizing best practices and the importance of comments. The document also outlines when to use each type of CSS and provides examples for better understanding.

Uploaded by

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

3.

Introduction to CSS

3.1 Introduction of CSS

What is CSS?
CSS, or Cascading Style Sheets, is a stylesheet language used to control the presentation and
layout of web pages. It works alongside HTML to define how elements should appear on the
screen, such as their colours, sizes, positions, and overall style.

Key Features of CSS:


1. Styling: CSS defines how HTML elements should look.
● Example: Setting font size, colour, and background.
2. Separation of Content and Design: Using CSS, you can keep your HTML code focused on
content while styling is handled separately.
3. Reusability: One CSS file can style multiple web pages, improving consistency and
reducing redundancy.
4. Flexibility: CSS allows responsive designs that adapt to different devices and screen
sizes.

3.2 CSS syntax


The CSS syntax is simple and consists of selectors, properties, and values. Here's a detailed
breakdown:

selector {
property: value;
}

● Selector: Specifies the HTML element(s) to style.


● Property: The style attribute to change (e.g., colour, font size, margin).
● Value: The setting for the property (e.g., red, 16px, 10px).
Example:
p{
color: blue;
font-size: 16px;
}
● This styles all <p> elements with blue text and a font size of 16px.

Components of CSS Syntax


● Selector: Defines which HTML elements the style applies to.
○ Example selectors: h1, .class-name, #id-name.
● Declaration Block: Contains one or more declarations inside curly braces {}.
○ Declarations are written as property: value;.
● Declaration: A single property-value pair ending with a semicolon ;.

Selectors
Target specific elements in the HTML:
1. Type Selector: Targets all elements of a given type.
Example:
h1 { color: red; }
2. Class Selector: Targets elements with a specific class, prefixed with ..
Example:
.example { font-size: 20px; }
3. ID Selector: Targets an element with a specific ID, prefixed with #
Example:
#unique { text-align: center; }
4. Group Selector: Targets multiple elements, separated by a comma.
Example:
h1, p { margin: 10px; }

3.3 Types of CSS


CSS can be applied in three different ways: Inline CSS, Internal CSS, and External CSS. Each type
has its specific use cases, advantages, and limitations. Let’s explore them in detail with
examples.

Inline CSS
Inline CSS applies styles directly to a specific HTML element using the style attribute within the
opening tag.
Advantages
● Quick and easy to apply for small, specific changes.
● No need for additional files or <style> tags.
Disadvantages
● Not reusable across multiple elements or pages.
● Makes the HTML code cluttered and harder to maintain.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px;">This is a heading styled with Inline CSS</h1>
<p style="background-color: yellow; padding: 10px;">This paragraph has a yellow
background and padding.</p>
</body>
</html>

Output:

Internal CSS
Internal CSS is used when styles are defined within a <style> tag inside the <head> section of
the HTML document. These styles apply only to the page where they are defined.

Advantages
● Centralized styling for the page.
● No need for external files, making it easier to manage single-page projects.
Disadvantages
● Styles cannot be reused across multiple pages.
● Increases the size of the HTML document, potentially slowing page load time.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: lightgray;
}
h1 {
color: green;
text-align: center;
}
p{
color: black;
font-size: 18px;
}
</style>
</head>
<body>
<h1>This is a heading styled with Internal CSS</h1>
<p>This paragraph is styled using Internal CSS.</p>
</body>
</html>

Output:

External CSS
External CSS is defined in a separate file with a .css extension. The file is linked to the HTML
document using the <link> tag in the <head> section.
Advantages
● Reusable across multiple HTML pages, ensuring consistent design.
● Keeps HTML code clean and focused on structure.
● Easy to update styles for an entire website by modifying a single file.
Disadvantages
● Requires additional HTTP requests to load the CSS file, potentially increasing load time
(can be minimized with caching).
● External files must be correctly linked; otherwise, styles won't be applied.
Example
External styles are defined within the <link> element, inside the <head> section of an HTML
page:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading styled with External CSS</h1>
<p>This paragraph is styled using External CSS.</p>
</body>
</html>

● An external style sheet can be written in any text editor and must be saved with a .css
extension.
● The external .css file should not contain any HTML tags.
● Here is how the "style.css" file looks:

"style.css"

body {
font-family: Verdana, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: darkblue;
text-align: center;
}
p{
color: gray;
font-size: 16px;
}

Output:

When to Use Each Type?


1. Inline CSS: For quick fixes or unique styles applied to a single element (e.g., testing or temporary
changes).
2. Internal CSS: For single-page projects where styles are specific to that page.
3. External CSS: For larger projects where styles need to be reused across multiple pages.

3.4 CSS Comments


CSS comments are used to explain your code or leave notes for yourself or others. Comments
are ignored by browsers and do not affect the rendered output of the page. They are helpful for
documentation, debugging, or temporarily disabling sections of CSS.

Syntax
CSS comments begin with /* and end with */. Anything between these markers is considered a
comment.

Single-Line Comment
Example:

.CSS
body {
background-color: lightblue; /* Set the background color of the page */
}

Multi-Line Comment

.CSS
/*
This section styles the header of the webpage.
It sets the font size, color, and text alignment.
*/
h1 {
font-size: 24px;
color: navy;
text-align: center;
}

Best Practices
● Use comments to clarify complex or important code.
● Avoid overusing comments for obvious styles to keep your CSS clean.
● Use multi-line comments for detailed explanations and single-line comments for short
notes.
Comments are a vital part of writing maintainable and collaborative CSS code. They improve
readability and make it easier to update or debug styles in the future.

3.5 CSS Colors


CSS allows you to specify colors for text, backgrounds, borders, and other elements in a variety
of formats. Colors enhance the visual appeal and readability of a webpage.

Ways to Define Colors in CSS


1. Color Names

● CSS supports 140 predefined color names.


color: red;
background-color: lightblue;

2. Hexadecimal Colors
● Represented as #RRGGBB, where RR, GG, and BB are hexadecimal values for red, green,
and blue.

color: #ff0000; /* Red */


color: #00ff00; /* Green */
color: #0000ff; /* Blue */

3. RGB Colors
● Use rgb() to define red, green, and blue values between 0 and 255.

color: rgb(255, 0, 0); /* Red */


color: rgb(0, 255, 0); /* Green */

Text Colour
● You can set the colour of the text.
p{
color: blue; /* Sets text color */
}

Background Color
● You can change the background colour according to you.
body {
background-color: #f0f0f0; /* Light gray background */
}

Border Color
● You can set the colour of the border colour.
div {
border: 2px solid rgb(255, 165, 0); /* Orange border */
}

Opacity
● To apply transparency to an entire element, use the opacity property (value between 0 and 1).

div {
background-color: blue;
opacity: 0.5; /* 50% transparent */
}

3.6 CSS Aline


CSS alignment properties are used to position text, elements, or blocks within a container
horizontally or vertically. Proper alignment enhances the readability and layout of a webpage.

Types of CSS Alignment


1. Text Alignment
The text-align property aligns text horizontally within its container.

Values:
● left: Aligns text to the left.
● right: Aligns text to the right.
● center: Centers the text.
● justify: Aligns text to both left and right, adding space between words.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}
</style>
</head>
<body>
<p class="left">This text is left-aligned.</p>
<p class="center">This text is center-aligned.</p>
<p class="right">This text is right-aligned.</p>
<p class="justify">This text is justified. It stretches the text so that it aligns with both left
and right margins.</p>
</body>
</html>

Output:

2. Horizontal Alignment
The margin property can align elements horizontally when combined with auto.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 0 auto; /* Horizontally centers the block */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Output:

3. Vertical Alignment
The vertical-align property aligns inline or table-cell elements vertically.
Values:
● top: Aligns to the top.
● middle: Aligns to the middle.
● bottom: Aligns to the bottom.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
display: table;
}
.text {
display: table-cell;
vertical-align: middle;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertically Centered Text</div>
</div>
</body>
</html>

Output:

4. Flexbox Alignment
Using the CSS display: flex; property provides powerful alignment options.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
height: 100vh;
background-color: lightgreen;
}
.box {
width: 100px;
height: 100px;
background-color: coral;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>

Output:

3.7 CSS Links


CSS allows you to style links on a webpage to make them visually appealing and user-friendly.
Links are represented by the <a> tag in HTML and can be styled using pseudo-classes like :link,
:visited, :hover, :active, and :focus.

CSS Link Pseudo-Classes


● :link - Styles links that have not yet been visited.
● :visited - Styles links that the user has already visited.
● :hover - Styles links when the user hovers over them.
● :active - Styles links when they are being clicked.
● :focus - Styles links when they are focused (e.g., via keyboard navigation).

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Links Example</title>
<style>
/* Style for unvisited links */
a:link {
color: blue; /* Blue for unvisited links */
text-decoration: none; /* Removes underline */
font-weight: bold;
}

/* Style for visited links */


a:visited {
color: purple; /* Purple for visited links */
}

/* Style for links on hover */


a:hover {
color: orange; /* Orange when hovered */
text-decoration: underline; /* Adds underline on hover */
}

/* Style for active links */


a:active {
color: red; /* Red when clicked */
}

/* Style for focused links */


a:focus {
outline: 2px solid teal; /* Adds a teal outline for focus */
}
</style>
</head>
<body>
<h1>CSS Link Styling Example</h1>
<p>
<a href="https://www.example.com">Visit Example.com</a>
</p>
<p>
<a href="https://www.google.com">Visit Google</a>
</p>
</body>
</html>
Output:
Expected Behavior:
1. The links initially appear in blue and bold (unvisited state).
2. After clicking a link, it changes to purple (visited state).
3. When the mouse pointer hovers over a link, it turns orange and gets underlined.
4. Clicking on a link changes its colour to red (active state).
5. Focusing on a link using the keyboard highlights it with a teal outline.

CSS Link Styling Example


Visit Example.com

Visit Google

Explanation

● Unvisited Link (:link): Links that the user hasn't clicked yet are styled in blue and appear
bold without underlines.
● Visited Link (:visited): Links that the user has clicked are styled in purple.
● Hovered Link (:hover): When the mouse pointer hovers over a link, it turns orange and
gets an underline.
● Active Link (:active): While clicking on a link, it temporarily turns red.
● Focused Link (:focus): When the link is focused (e.g., using the Tab key), it shows a teal
outline
3.8 CSS for Images

CSS provides numerous properties to style images, enhancing their appearance, positioning,
and behaviour on a webpage. With CSS, you can control the size, alignment, borders, effects,
and more for images.

Key CSS Properties for Images


1. width and height
● Used to set the size of the image.
Example:
img {
width: 300px;
height: 200px;}
2. border
● Adds a border around the image.
Example:
img {
border: 5px solid black;
}
3. border-radius
● Rounds the corners of the image.
Example:
img {
border-radius: 50%; /* Makes the image circular if it's a square */
}
4. box-shadow
● Adds a shadow around the image.
Example:
img {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}
5. float
● Floats the image to the left or right, allowing text to wrap around it.
Example:
img {
float: right;
margin: 10px;
}
6. object-fit
● Specifies how the image should fit within its container.
Example:
img {
width: 300px;
height: 200px;
object-fit: cover; /* Ensures the image covers the container without distortion */
}
7. filter
● Adds effects like grayscale, blur, brightness, etc.
Example:
img {
filter: grayscale(100%); /* Makes the image black and white */
}

Example: Styling Images with CSS


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Images Example</title>
<style>
/* Basic Styling */
.image1 {
width: 300px;
height: auto;
border: 5px solid #333;
border-radius: 15px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}
/* Circular Image */
.image2 {
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid #ff5722;
}

/* Hover Effect */
.image3 {
width: 300px;
height: auto;
transition: transform 0.3s, filter 0.3s;
}

.image3:hover {
transform: scale(1.1);
filter: brightness(1.2);
}
</style>
</head>
<body>
<h1>CSS Images Example</h1>
<p>Styled images using CSS:</p>
<div>
<h3>Basic Styled Image</h3>
<img src="https://via.placeholder.com/300x200" alt="Sample Image" class="image1">
</div>
<div>
<h3>Circular Image</h3>
<img src="https://via.placeholder.com/150" alt="Sample Image" class="image2">
</div>

</body>
</html>
Explanation
1. Basic Styling (.image1):
● The image is resized to a width of 300px with a proportional height.
● It has a solid border, rounded corners, and a shadow for a 3D effect.
2. Circular Image (.image2):
● The image is made circular using border-radius: 50%.
● It has a colored border for emphasis.
Output:

You might also like