[go: up one dir, main page]
Scribd
Upload
13 views17 pages

UNIT 3 Cascading Style Sheet

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in styling HTML and XML documents. It covers various types of CSS, selectors, font properties, text properties, background properties, list properties, margin properties, and the use of comments in CSS. Additionally, it includes examples to illustrate the application of these concepts in web design.

Uploaded by

Soumya Das
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views17 pages

UNIT 3 Cascading Style Sheet

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in styling HTML and XML documents. It covers various types of CSS, selectors, font properties, text properties, background properties, list properties, margin properties, and the use of comments in CSS. Additionally, it includes examples to illustrate the application of these concepts in web design.

Uploaded by

Soumya Das
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

UNIT 3 Cascading Style Sheet & CSS 3

INTRODUCTION TO CSS:-
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a
document written in HTML or XML. It controls the layout, colors, fonts, and overall visual
appearance of web pages.

TYPES OF CSS:-
 Inline CSS
Description: Styles are applied directly within an HTML element using the style attribute.
<h1 style="color: blue; text-align: center;">Hello, World!</h1>
 Internal CSS (Embedded CSS)
Description: Styles are defined within a <style> tag in the <head> section of an HTML
document.
<style>
h1 {
color: blue;
text-align: center;
}
</style>
 External CSS
Description: Styles are defined in a separate CSS file linked to the HTML document using the
<link> tag.
<link rel="stylesheet" type="text/css" href="styles.css">

CLASS AND ID SELECTORS IN CSS:-


 Class Selector :-
Definition: A class selector targets HTML elements with a specific class attribute, allowing you
to apply styles to multiple elements.
Syntax: A class selector is denoted by a period (.) followed by the class name.
Example:
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>

<p class="highlight">This text is highlighted.</p>


<p class="highlight">This text is also highlighted.</p>
 ID Selector :-
Definition: An ID selector targets a single, unique element with a specific ID attribute. IDs
should be unique within a page.
Syntax: An ID selector is denoted by a hash (#) followed by the ID name.
Example:
#idname {
/* CSS styles */
}
Key Differences:
 Class selectors (.) can be reused on multiple elements.
 ID selectors (#) must be unique and are used for one specific element.

CSS FONT PROPERTIES :-


 font-family: Specifies the font to be applied to text. You can specify multiple fonts as a
fallback system in case the first one is unavailable. If a font name contains spaces, it should
be enclosed in quotes.
Syntax:
font-family: "Times New Roman", Georgia, serif;
 font-size: Sets the size of the font. Common units include px (pixels), em, rem, %, or
relative sizes like small, large.
Syntax:
font-size: 16px;
 font-weight: Determines the boldness of the font. It can be set to predefined values or
numeric values. Predefined values: normal, bold, bolder, lighter. Numeric values range
from 100 (thin) to 900 (bold), with 400 as normal and 700 as bold.
Syntax:
font-weight: bold;
 font-variant: Controls the use of small-caps in text, where lowercase letters appear as
smaller versions of uppercase letters. Values: normal, small-caps
Syntax:
font-variant: small-caps;
 line-height: Specifies the amount of space between lines of text. It can accept unitless
values, percentages, or specific units (e.g., px, em). Unitless values (e.g., 1.5) are often
recommended for better control of spacing across different font sizes.
Syntax:
line-height: 1.5;
 letter-spacing: Adjusts the spacing between characters. Positive values increase space;
negative values decrease space.
Syntax:
letter-spacing: 2px;
 word-spacing: Adjusts the space between words.
Syntax:
word-spacing: 5px;
 text-transform: Controls the capitalization of text. Values: none, capitalize, uppercase,
lowercase
Syntax:
text-transform: uppercase;

CSS PSEUDO :-
CSS pseudo-classes and pseudo-elements are powerful tools for styling HTML elements based
on their state or specific parts of the elements.
element: specifies the HTML element
pseudo-class: specifies the specific state of the element that we want to target
Pseudo-class keywords are added to the selectors and preceded by a colon (:).

CSS TEXT PROPERTIES:


1. Font Properties
 font-family: Specifies the typeface for the text.
p{
font-family: Arial, sans-serif;
}
 font-size: Sets the size of the font.
p{
font-size: 16px;
}
 font-weight: Defines the thickness of the font (e.g., normal, bold).
p{
font-weight: bold;
}
 font-style: Specifies whether the font is normal, italic, or oblique.
p{
font-style: italic;
}
 text-transform: Controls the capitalization of text (e.g., uppercase, lowercase).
p{
text-transform: uppercase;
}
2. Text Decoration
 text-decoration: Adds decorations to text, such as underline, overline, or line-through.
p{
text-decoration: underline;
}
 text-shadow: Applies a shadow effect to text.
p{
text-shadow: 2px 2px 5px gray;
}
3. Text Alignment
 text-align: Defines the horizontal alignment of text (left, right, center, or justify).
p{
text-align: center;
}
4. Line Properties
 line-height: Sets the space between lines of text.
p{
line-height: 1.5;
}
 letter-spacing: Controls the spacing between characters.
p{
letter-spacing: 1px;
}
 word-spacing: Controls the spacing between words.
p{
word-spacing: 2px;
}
5. Color and Background
 color: Defines the color of the text.
p{
color: blue;
}
 background-color: Sets the background color of the text element.
p{
background-color: yellow;
}
6. Text Indentation
 text-indent: Specifies the indentation of the first line of a text block.
p{
text-indent: 20px;
}
7. White Space Handling
 white-space: Specifies how white space inside an element is handled.
p{
white-space: nowrap; /* Prevents text wrapping */
}
 Example
 Here's a simple example of how you can integrate these properties into an HTML
document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text Properties Example</title>
<style>
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
text-align: center;
text-transform: uppercase;
}
p{
font-size: 16px;
line-height: 1.5;
text-align: justify;
text-decoration: underline;
color: blue;
}
</style>
</head>
<body>
<h1>CSS Text Properties</h1>
<p>This is a paragraph demonstrating various CSS text properties.</p>
</body>
</html>
CSS Background Properties
1. Background Color
 background-color: Specifies the background color of an element.
div {
background-color: lightblue;
}
2. Background Image
 background-image: Sets an image as the background of an element.
div {
background-image: url('image.jpg');
}
3. Background Size
 background-size: Defines the size of the background image.
 cover: Scales the image to cover the entire element.
 contain: Scales the image to ensure it fits within the element.
Can also use specific dimensions (e.g., 50px 100px).
div {
background-image: url('image.jpg');
background-size: cover;
}
4. Background Position
 background-position: Specifies the position of the background image.
 Can use keywords (e.g., top, bottom, left, right, center) or length values.
div {
background-image: url('image.jpg');
background-position: center center;
}
5. Background Repeat
 background-repeat: Determines how the background image is repeated.
 Values include repeat, no-repeat, repeat-x, repeat-y.
div {
background-image: url('image.jpg');
background-repeat: no-repeat;
}
6. Background Attachment
 background-attachment: Sets whether the background image scrolls with the page or is
fixed.
 Options include scroll, fixed, and local.
div {
background-image: url('image.jpg');
background-attachment: fixed;
}
7. Background Shorthand Property
 You can combine multiple background properties into one shorthand property using
background.
div {
background: lightblue url('image.jpg') no-repeat center center / cover fixed;
}
8. Multiple Backgrounds
 CSS allows you to use multiple backgrounds on a single element, separated by commas.
div {
background-image: url('image1.jpg'), url('image2.png');
background-position: center, top left;
background-size: cover, auto;
}
 Example
Here’s a complete example using various background properties in a simple HTML
document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Properties Example</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
width: 100%;
height: 100vh;
background: lightblue url('background.jpg') no-repeat center center / cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
h1 {
color: white;
background-color: rgba(0, 0, 0, 0.5); /* Optional for contrast */
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Website</h1>
</div>
</body>
</html>

CSS LIST PROPERTIES


1. List Style Types
You can change the bullet or numbering style of lists using the list-style-type property:
Unordered Lists (<ul>):
circle: Circle bullet
square: Square bullet
disc: Default filled circle

Ordered Lists (<ol>):


decimal: 1, 2, 3...
lower-alpha: a, b, c...
upper-alpha: A, B, C...
lower-roman: i, ii, iii...
upper-roman: I, II, III...
Example:
ul {
list-style-type: square;
}
ol {
list-style-type: upper-alpha;
}
2. List Style Position
You can control how list markers are positioned relative to the list items with the list-style-
position property:
inside: The marker is inside the list item's content box.
outside: The marker is outside the list item's content box (default).
Example:
ul {
list-style-position: inside;
}
3. Custom Style with list-style
You can combine multiple properties into one using the list-style shorthand property:
ul {
list-style: square inside none;
}
4. Margin and Padding
You can control the spacing around and within lists with margin and padding:
Example:
ul {
margin: 20px;
padding: 15px;
}
5. Text Decoration
You can apply styles to list items with other text properties such as font-size, color, text-
decoration, etc.
Example:
li {
color: #333;
font-size: 16px;
text-decoration: underline; /* Underlines the text */
}
6. Hover Effects
You can add interactivity to list items using pseudo-classes like :hover.

Example:
li:hover {
background-color: #f0f0f0; /* Change background on hover */
}

7. Flexbox and Grid


For more complex layouts, you can use CSS Flexbox or Grid to arrange list items:
Example with Flexbox:
ul {
display: flex;
list-style-type: none; /* Remove default bullets */
padding: 0;
}

li {
margin-right: 20px; /* Space between items */
}
CSS MARGIN PROPERTIES:
1. Margin Properties Overview
The margin property can be set using either individual side properties or a shorthand property.
The four main sides are:

margin-top: Space above the element.


margin-right: Space to the right of the element.
margin-bottom: Space below the element.
margin-left: Space to the left of the element.

2. Shorthand Margin Property


You can use the margin shorthand property to set all four margins in one declaration:
/* Syntax */
margin: [top] [right] [bottom] [left];

/* Example: */
div {
margin: 10px 20px 15px 5px; /* top, right, bottom, left */
}
Shorthand Variations:
All sides equal:
margin: 10px; /* 10px on all sides */
Vertical | Horizontal:
margin: 10px 20px; /* 10px top/bottom, 20px left/right */
Top | Right/Left | Bottom:
margin: 10px 5px 15px; /* top, right/left, bottom */

3. Margin with Auto Value


The auto value can be particularly useful for centering elements. When you set the left and
right margins to auto, the browser calculates equal margins to center the element within its
container.
Example:
.centered {
width: 50%; /* Set width to a specific value */
margin: 0 auto; /* Center horizontally */
}

4. Using Percentages
Margins can also be set using percentages, which are relative to the width of the containing
element:
Example:
div {
margin: 5%; /* 5% of the container's width */
}

5. Negative Margins
CSS allows negative margins. This can pull elements closer together or even make them
overlap.
Example:
div {
margin-top: -10px; /* Pulls the element 10px upwards */
}

6. Collapsing Margins
In certain situations, particularly with vertical margins on block elements, margins can
collapse. This means adjacent vertical margins (top margin of one element and bottom margin
of the next) may combine into a single margin, taking the larger value. Understanding this
behavior is crucial for achieving intended layouts.

7. Using Margin in Different Contexts


Block Elements: The margin property works effectively on block-level elements such as <div>,
<p>, and headings (<h1> to <h6>).
Inline Elements: Inline elements (like <span> or <a>) do not respect vertical margins, but you
can use horizontal margins.

8. Responsive Margins
When designing responsive layouts, you can use media queries to adjust margins based on
screen size.
Example:
@media (max-width: 600px) {
div {
margin: 10px; /* Smaller margin on mobile */
}
}

CSS COMMENTS:
CSS comments begin with /* and end with */. Everything between these symbols will not be
processed as CSS.
Example:
/* This is a single-line comment */

/*
This is a multi-line comment
that can span multiple lines.
*/

body {
background-color: #f0f0f0; /* Set background color for the body */
}

/* Color scheme for headings */


h1 {
color: darkblue;
}

p{
margin: 20px; /* Add spacing around paragraphs */
}

You might also like