UNIT 2
CSS (Cascading Style Sheets)
SS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a
C
document written in HTML or XML. It defines how elements should be displayed on the screen,
paper, or in other media. CSS separates content from design, making it easier to maintain and
manage the look and feel of a website or application.
Types of CSS
There are three main ways to apply CSS to an HTML document:
1. Inline CSS
○ Applied directly to HTML elements using the styleattribute.
○ Can be used for quick styles on individual elements, but it's not recommended for
large-scale styling due to lack of reusability.
<h1 style="color: red; font-size: 24px;">Hello World</h1>
2. Internal CSS
○ Defined within a<style>tag in the
<head>sectionof the HTML document.
○ Useful when styling a single document or page.
<head>
<style>
h1 {
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
</body>
3. External CSS
○ The most common and efficient method, where the CSS code is placed in a
separate.cssfile and linked to the HTML document using the<link>tag.
○ Allows you to reuse the same styles across multiple HTML files.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
h1 {
color: purple;
font-size: 32px;
}
CSS Properties:
SS provides a wide variety of properties for styling different aspects of HTML elements. Some
C
key categories and properties include:
Text Styling:
● c olor: Sets the text color.
● font-family: Specifies the font to use.
● font-size: Defines the size of the font.
● font-weight: Controls the boldness of the text.
● line-height: Controls the spacing between lines oftext.
● text-align: Aligns the text (e.g., left, right, center).
Box Model
TheCSS box modeldefines how the dimensions of anelement are calculated, including
margins, borders, padding, and the actual content area.
● idth: Sets the width of an element.
w
● height: Sets the height of an element.
● margin: Adds space outside the element.
● padding: Adds space inside the element, around thecontent.
● border: Defines a border around an element.
Example of box model properties:
div {
width: 200px;
height: 100px;
padding: 20px;
margin: 10px;
border: 2px solid black;
}
Background Styling
● b ackground-color: Sets the background color of anelement.
● background-image: Sets an image as the background.
● background-size: Controls the size of the backgroundimage.
● background-position: Sets the position of the backgroundimage.
Layout
d isplay: Defines how an element is displayed (block,inline,flex,grid, etc.).
●
● position: Specifies how an element is positioned onthe page (static,relative,absolute,
fixed,sticky).
● top,right,bottom,left: Offsets the element basedon its positioning context.
● float: Floats an element to the left or right, allowingtext and inline elements to wrap
around it.
EXAMPLE:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Working with block element and objects
hen working with block elements and objects in CSS, it's important to understand how
W
block-level elements are displayed, how they interact with other elements, and how to manage
the layout effectively using properties and techniques.
1. Understanding Block-Level Elements
lock-level elements in HTML take up the full width of their container by default and start on a
B
new line. They typically stack vertically, meaning each block element pushes the next one below
it.
Some common block-level elements are:
● div>
<
● <p>
● <h1>,<h2>,<h3>, etc.
● <ul>,<ol>,<li>
● <section>
● <article>
● <footer>
2. CSS Properties for Block-Level Elements
ou can control the layout, positioning, and appearance of block elements using CSS. Here are
Y
some key properties and techniques for managing block elements:
a. Width and Height
y default, block elements take up the full width of their parent container. However, you can
B
control their width and height with thewidthandheightproperties.
div {
width: 50%; /* 50% of the parent container */
height: 200px;
}
● B lock elements will automatically extend to the full width of their parent unless explicitly
given a width.
● You can set a fixed or percentage-based width.
● You can also use min-width max-width
, min-height
, max-heightto
,and
control the dimensions.
b. Margins and Padding
argins are used to create space around elements, while padding creates space inside an
M
element.
div {
margin: 20px; /* Space outside the element */
padding: 10px; /* Space inside the element */
}
● m argin-top,margin-right,margin-bottom, andmargin-leftcontrol the margins for
individual sides.
● padding-top,padding-right,padding-bottom, andpadding-leftcontrol paddingfor
individual sides.
c. Display Property
Thedisplayproperty determines how an element isdisplayed.
● block: This is the default for block-level elements (e.g.,<div>).
div {
display: block; /* Block-level element */
}
<span>are inline by default,meaning they do not break onto a
● inline: Elements like
new line and only take up as much space as needed.
span {
display: inline;
}
● inline-block: This combines some of the behavior of both block and inline. The element
behaves like a block-level element but doesn’t break onto a new line.
div {
display: inline-block; /* Behaves like block but sits inline */
}
d. Positioning
ou can change the positioning of block-level elements using thepositionproperty. The
Y
available values are:
● s tatic (default) – No positioning, it follows the normal document flow.
● relative – Positioned relative to its normal position.
● absolute – Positioned relative to the nearest positioned ancestor.
● fixed – Positioned relative to the viewport (remains in the same position even when
scrolling).
sticky – Switches between relative and fixed, depending on the scroll position.
●
div {
position: relative;
top: 20px;
left: 30px;
}
e. Overflow
y default, if content exceeds the size of a block element, it will overflow outside. You can
B
control this with theoverflowproperty.
div {
width: 300px;
height: 150px;
overflow: auto; /* Adds scrollbars when content overflows */
}
Possible values:
● v isible(default): Content can overflow.
● hidden: Content is clipped and not visible.
● scroll: Always shows scrollbars, even if the contentfits.
● auto: Only shows scrollbars when needed.
3. Using Flexbox with Block Elements
lexbox is a powerful layout tool that can be used in conjunction with block-level elements to
F
align and distribute space within containers.
To use flexbox:
1 . S et the container element'sdisplaytoflex.
2. Flexbox enables easy vertical and horizontal alignment of block elements.
.container {
display: flex;
justify-content: space-between; /* Distributes items evenly */
}
.item {
flex: 1; /* Makes each item take up equal space */
}
4. Grid Layout
CSS Grid Layout is another powerful method for creating complex, two-dimensional layouts.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
gap: 20px; /* Adds space between grid items */
}
.item {
background-color: lightgray;
padding: 10px;
}
5. Example of Working with Block Elements
Here's an example where we style block elements within a layout using Flexbox:
<!DOCTYPE html>
<title>Block Elements and Flexbox</title>
<style>
.container {
display: flex;
justify-content: space-between;
gap: 10px;
}
.item {
width: 30%;
padding: 20px;
background-color: lightblue;
text-align: center;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
6. Working with Objects
I n CSS, objects can refer to elements such as images, videos, or other media. You can style these
objects similarly to block elements but need to take extra care for certain properties.
● I mages: Usedisplay: blockto remove inline behaviorand ensure that images behave like
block elements.
img {
display: block;
width: 100%;
height: auto;
}
● V
ideos: Similarly, you might want to style video elements as block-level to control
their layout.
video {
display: block;
width: 100%;
}
