Scribd
Upload
2 views

CSS Introduction 1

CSS (Cascading Style Sheets) is a styling language essential for web development, enabling separation of content structure (HTML) from presentation. It allows for consistent styling, responsive design, and modular code through various methods of integration with HTML. Key concepts include CSS syntax, selectors, properties for styling elements, and layout management, which are crucial for creating visually appealing and adaptable web pages.

Uploaded by

maha24743
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

CSS Introduction 1

CSS (Cascading Style Sheets) is a styling language essential for web development, enabling separation of content structure (HTML) from presentation. It allows for consistent styling, responsive design, and modular code through various methods of integration with HTML. Key concepts include CSS syntax, selectors, properties for styling elements, and layout management, which are crucial for creating visually appealing and adaptable web pages.

Uploaded by

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

CSS

IT Industry-Academia Bridge Program


CSS

CSS, or Cascading Style Sheets, is a fundamental styling language used


in web development to control the presentation and layout of HTML
(Hypertext Markup Language) documents.

It was propose for the concept of separating structure (HTML) and


presentation (styles) by Håkon Wium Lie and Bert Bos in 1994.

IT Industry-Academia Bridge Program


The Purpose of CSS
• Separation of Concern:
• HTML focuses on the structure and semantics of content, while CSS handles the
styling and layout. This separation makes code more modular, maintainable, and
adaptable to different devices and screen sizes.
• Consistent Styling:
• CSS enables consistent styling across multiple pages of a website. By creating a
set of style rules, you can apply a unified look and feel, maintaining brand
consistency.
• Responsive Design:
• With the rise of various devices, from desktop computers to smartphones and
tablets, responsive design is crucial. CSS plays a pivotal role in creating layouts
that adapt to different screen sizes and resolutions.
CSS and HTML Integration
To apply CSS to an HTML document, you can use various methods:
Inline Styles: Apply styles directly within HTML tags using the style attribute.
<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>
Internal Styles: Embed CSS within the HTML document using the <style> tag in the
document's head.
<head> <style> p { color: red; font-size: 20px; } </style> </head>
External Styles: Define within <link> element. Create a separate CSS file (style.css)
and link it to the HTML document using the <link> tag.
<head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>
Note 1: If the same selector (attribute) in different style sheets is declared, the value from the last read style
sheet will be used.
Note 2: If the internal style is defined after the link (external style), the internal style will be get privilege.
Note 3: Inline style has the highest priority and will override external & internal style.
IT Industry-Academia Bridge Program
For more extensive styling and improved organization, developers often
leverage external CSS files or internal styles in conjunction with inline
styles.

IT Industry-Academia Bridge Program


CSS Syntax
CSS Syntax consist of two parts
Selectors: Selectors are elements to which you want to apply styles.
Elements can be
• tags(h1, p, etc),
• classes (prefixed with a dot, e.g., .container),
• IDs (prefixed with a hash, e.g., #header),
Declaration: Declaration is the key-value pair of a CSS property, defining
how the selected elements should appear. Properties can be color, font-
size, margin, padding, and many others.
CSS Syntax
/* Styling a heading */
h1 { color: #4285f4; font-family: 'Arial', sans-serif; text-align: center; }
The selector “h1” points to the HTML element you want to style.
Each declaration consists of a property and a value separated by a
colon (:) and ending with a semicolon (;), and the declaration groups
are surrounded by curly braces {}.
CSS property names and many values are not case-sensitive. Whereas,
CSS selectors are usually case-sensitive.
A CSS comment begins with /*, and ends with */

IT Industry-Academia Bridge Program


CSS Selector
A CSS selector selects the HTML element(s) you want to style. Selector can be
Element Selector: The element selector selects HTML elements based on the element name.
p { text-align: center; color: red; }
Attribute Selector: Element attribute selectors are used to style elements,such as class and id
• id Selector: The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page.
#para1 { text-align: center; color: red; }
• class Selector: The class selector selects HTML elements with a specific class attribute.
.center { text-align: center; color: red; } /* class centre will be red and centre-aligned */
p.center { text-align: center; color: red; } /* only <p> elements with class="center" will be */
HTML elements can also refer to more than one class.
<p class="center large">This paragraph refers to two classes.</p>
Universal Selector: The universal selector (*) selects all HTML elements on the page.
* { text-align: center; color: blue; }
Grouping Selector: Group selector have the same style to minimize code
h1, h2, p { text-align: center; color: red; }
DIV Selector
<div> is a non-semantic block level element, allows you to group related content
together.
Styling:- You can apply range of style on all elements grouped in <div>. Instead of
applying styles to each individual element (like paragraphs or images), you can wrap
them in a <div> and apply styles to the container.
Positioning:- You can manipulate the position of all elements all-together, grouped in
<div>.
<div class=“Home">
<header>
<nav> </nav>
<header>
<main>
</main>
<footer>
</footer>
</div>

Layout Management: It helps in creating flexible layouts that can adapt to


different screen sizes and orientations.
1) https://www.tutorialrepublic.com/css-tutorial/
2) https://www.w3schools.com/css/

IT Industry-Academia Bridge Program


CSS Selector(pattern matching)
In CSS, pattern matching rules determine which style rules apply to
elements in the document tree. These patterns, called selectors. In CSS,
different types of selectors can be
universal-selector * {}
id selector # {}
class selector . {}
descendant parent-selector child-selector {}

IT Industry-Academia Bridge Program


Child Selector
The child selector in CSS (>) targets elements that are direct children of
a specified parent element.
• body > p {color: green;} //simple child selector
Here p is directly child of body
• body > div > div > p {background: cyan;} //multiple child selectors
Here p is direct child of div, dive is direct child of another div and that dive is
child of body
The :nth-child() selector in CSS allows you to target elements based on
their position among siblings.
element:nth-child(n) { /* styles */ }
n is a formula, which can be a number, keyword, or expression.
p:nth-child(2n) { color: blue; }Selecting every second element:
li:nth-child(3) { font-weight: bold; } Selecting the third element:
Child Selector
The :first-child selector is used to select the specified selector, only if it
is the first child of its parent.
p:first-child { font-weight: bold; color: blue; }
In this example, the first <p> element within its parent will be bold and
blue.

IT Industry-Academia Bridge Program


Tools and Resources
• Text Editors:
• Use text editors like Visual Studio Code, Sublime Text, or Atom to write and
edit HTML and CSS files.
• Browsers Developer Tools:
• Modern browsers come with built-in developer tools (e.g., Chrome DevTools,
Firefox Developer Tools) that allow you to inspect and debug your HTML and
CSS.
• Online Resources:
• Utilize online resources like MDN Web Docs (Mozilla Developer Network),
W3Schools, and CSS-Tricks for learning and reference.

IT Industry-Academia Bridge Program


Color Styling
Color in CSS can be defined as
RGB Color:- rgb(red, green, blue) = rgb(0-255, 0-255, 0-255)
RGBA Color:- rgba(red, green, blue, alpha) = rgba(0-255, 0-255, 0-255, 0.0-1.0)
The alpha parameter specify the opacity for a color.
Hex Color:- #rrggbb where rr equal to red, gg equal to green, bb equal to blue
are hexadecimal value between 00 to ff (0 to 255)
HSL Color:- hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is
blue.
• Saturation is a percentage value. 0% means a shade of gray, and 100% is the full
color.
• Lightness is also a percentage value. 0% is black, and 100% is white.
IT Industry-Academia Bridge Program
Background Styling
background-color:- color-name/#rrggbb/rgb(red,geen,blue)
The opacity property specifies the opacity/transparency of an element.
div { background-color: green; opacity: 0.3; }
background-image:- url("paper.gif");
background-repeat:- no-repeat / repeat-x
background-position:- left top / left center / left bottom / center top /
center center / center bottom/ right top / right center / right bottom
background-attachment:- fixed/scroll
property specifies whether the background image should scroll or be fixed
Background Shorthand
background: #ffffff url("img_tree.png") no-repeat right top;
Border Styling
The CSS border properties allow you to specify the style, width, and color of an element's border.
border-style: solid / dotted / double /dashed
border-style: dotted solid;
border-style: dotted solid double dashed;
Individual side can be styled as border-top/right/bottom/ left-style
border-width 5px (for all sides) / thick / medium / thin
border-width 5px 10px (for top and bottom)
border-width 5px 10px 5px 10px (for top right bottom left)
border-color green / red green blue yellow / #ff0000 / rgb(255,0,0)

The border property is a shorthand property for border-width/style(required)/color


border: 5px solid red;
border-left: 6x solid red; Specify all the individual border properties for just one side:
border-radius: 5px; border-radius property is used to add rounded borders to an element:
CSS Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.
Margin for individual side
margin-top/right/bottom/left: 10px
Margin for multiple sides
margin: 25; (for all sides)
margin: 25px 50px 75px 100px; (top right bottom left)
margin: auto; horizontally center the element within its container.
margin-left: inherit; left margin inherited from the parent element
IT Industry-Academia Bridge Program
CSS Padding
Padding is used to create space around an element's content, inside of
any defined borders.
Padding for Individual Side
padding-top/right/bottom/left: 10px
Margin for multiple sides
padding: 25; (for all sides)
padding: 25px 50px 75px 100px; (top right bottom left)

IT Industry-Academia Bridge Program


CSS Width & Height
The height and width properties are used to set the height and width of an element. The
values can be
• auto - This is default. The browser calculates the height and width
• % - Defines the height/width in percent of the containing block
• inherit - The height/width will be inherited from its parent value
width: 100px
height: 100px
max-width: The max-width property is used to set the maximum width of an element and
browser handle the width for small size screen even if the content inside it or the
viewport width is larger.
max-width: 500px;

IT Industry-Academia Bridge Program


CSS Text
CSS has a lot of properties for formatting text.
background-color: lightgrey;
color: blue;
text-align: center/left/right/justify /*Horizontal alignment*/
Text Decoration
text-decoration-line: overline/line-through/underline;
text-decoration-color: green; /* decoration line color*/
text-decoration-style: double; /* decoration line style
Text Spacing
• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space
CSS Font
font-family: "Times New Roman", Times, serif;
font-size: 30px;
font-style: normal/italic/;
font-weight: normal/bold;
font-variant: normal/small-caps;
Font Shorthand
font: italic small-caps bold 12px/30px Georgia serif
Where 12px/30px equal to font-size/line-height

IT Industry-Academia Bridge Program


CSS Image
<img src="https://via.placeholder.com/200" alt="Sample Image">

IT Industry-Academia Bridge Program


External Resources
To add external resources like icon, font, img, you include either via a CDN or by downloading it.
Method-1: By Downloading:-
• Download version of FontAwesome from the official website.
• Unzip the downloaded file and place it in your project directory.
• Add the local FontAwesome CSS file link to the <head> of your HTML
<link rel="stylesheet" href="path/to/font-awesome/css/fontawesome.min.css">
Method-2 By CDN
• Add the following <link> tag to the <head> section of your HTML file:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
Add icon in your HTML
<i class="fas fa-home"></i>
<head>
1. To add Font Awesome icons, to your HTMLgo to fontawesome.com, <link rel="stylesheet" href="https:/….">
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script> </head>
2. To add the Bootstrap glyphicons, add the following line inside the <head> section <body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
3. To use the Google icons, add the following line inside the <head> section </body>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
CSS Layout

IT Industry-Academia Bridge Program


Display Properties
The display property is a powerful tool in CSS that significantly affects
the layout and structure of a webpage. The display properties values
can be
Element Layout
display:block display:inline display:inline-block

Page/Section Layout
display:flex display:grid display:table
display:none
display:block - This property in CSS defines an element as a block-level
element. Block-level elements take up the full width of their container and
start on a new line. Remember the following rules!
• It takes up the entire width of its parent container by default (unless a width is
specified).
• It starts on a new line, meaning any element before or after it will be pushed
above or below it.
• It respects width, height, padding, and margin.
• Block elements can contain other block or inline elements.
Examples: <div> <h1..h6> <p> <ul,ol,li> <header> <footer> <section> <article>
display:inline - The element only takes up as much width as necessary and
does not start on a new line.
• Width and height properties have no effect on inline elements.
• Inline elements respect horizontal padding and margin, but vertical padding and
margin may not behave as expected.
• Inline elements can be placed within block elements
If you set display: inline; for the parent and display: block; for the child,
and then apply a width to the child. What would be the output ?

<span style="display: inline; background-color: lightgray; padding:20px">


<div style="display: block; width: 300px; background-color: lightblue;">
I am a block inside an inline parent
</div>
</span>

IT Industry-Academia Bridge Program


Display Properties continue…

display: inline-block – inline-block allows an element to behave like an


inline element but it allows you to set width and height.
• Elements are placed next to each other in the same line unless the container's
width is exceeded.
• The width, height, padding, and margin properties can be set and will affect
the layout.
Display Properties
• Display: Block: Best for elements that should stack vertically and take
the full width.
• Display: Inline: Best for elements that should flow within a line of text
without disrupting the flow.
• Display: Inline-Block: Useful when you want block-like elements to sit
next to each other. With and Height for Inline elements

IT Industry-Academia Bridge Program


Display Properties Exceptions
• If child display is block and parent display is inline, child will take all full
width and push any next child to new line. This will override the rule –
display:block - It takes up the entire width of its parent container
To control block child to follow rule, change the child display property
from display:block to display:inline-block
• When you place inline elements inside a block element, the inline
elements will flow horizontally within the available width of the block.
• If you place a block element inside an inline element (like in your previous
code), the block element will still take the full width available, effectively
breaking the inline flow.
IT Industry-Academia Bridge Program
CSS Layouts
To create a webpage structure, CSS provides powerful tools likes
• CSS Frameworks (Bootstrap, Foundation)
• CSS Flexbox
• CSS Grid

IT Industry-Academia Bridge Program


Web Layout (CSS Layout)
Web Layout is a design pattern to determine how elements are positioned, sized, and
arranged within a web page. Here are some common CSS layout techniques:
Float Layout: Floats were traditionally used for layout before the advent of Flexbox
and CSS Grid. Floating elements can be positioned to the left or right of their
container, allowing text and other elements to wrap around them.
Flexbox Layout: Flexbox is a one-dimensional layout method for laying out items in
rows or columns. It provides more control over the alignment, direction, order, and
size of elements within a container. Flexbox is particularly useful for creating
responsive layouts and aligning items within a container.
Grid Layout: CSS Grid Layout is a two-dimensional layout system for designing grid-
based layouts in CSS. It allows you to divide a page into rows and columns, providing
precise control over the placement and sizing of elements within the grid. Grid Layout
is powerful for creating complex layouts and is well-suited for designing both full-page
layouts and smaller components.
Floats
Floats in CSS are used to position elements to the left or right of their
containing block, allowing text and inline elements to wrap around
them. Float use left or right property to display items.
float: left/right;

Here image on left side and text on right side

Here nav items are displayed on right side


Flexbox Layout
Flexbox (Flexible Box) is a one-dimensional layout method for arranging
items in rows or columns. Before Flexbox (2017) float and positioning
layouts were reliable for cross-browser tools. The Flexible Box Layout
Module, makes it easier to design flexible responsive layout structure
without using float or positioning.
CSS use display property to decide the layout model.
display: flex

In above figure container is displayed as block-level content. To display


container as inline content, use the value inline-flex as
display:inline-flex
The Flex model
All items inside Flexbox layout are placed in term of row or column. The flex-direction
property defines in which direction the container wants to stack the flex items.
flex-direction: row (default)|column | row-reverse | column-reverse
Flexbox main-axis vs cross-axis
All items inside Flexbox layout are placed in term of two axes – the
main axis or cross axis defined by flex-direction property.

IT Industry-Academia Bridge Program


Flexbox Properties
flex-wrap: This sets whether flex items are forced onto one line or can
wrap onto multiple lines.
flex-wrap: nowrap (default) | wrap | wrap-reverse;
• wrap: The flexbox is multiline
• nowrap: The flex containers is a single line
• wrap-reverse: same as ‘wrap’ except the cross-start and cross-end‘’
directions are swapped.
flex-flow: This is shorthand for the flex-direction and flex-wrap
flex-flow: column wrap

IT Industry-Academia Bridge Program


Alignment Property (justify-content)
The justify-content property is used to align the flex item. This define
the alignment along the main axis.
justify-content: center | flex-start | flex-end | space-around | space-between | space-evenly

center

flex-start

flex-end

space-around

space-between
IT Industry-Academia Bridge Program
Alignment Property (align-item)
The align-items property is used to align the flex items. This is cross-axis
version. This defines the default behavior for flex items laid out along
the cross axis.
align-items: stretch | flex-start | flex-end | center | baseline | first
baseline | last baseline | start | end | self-start | self-end + ... safe |
unsafe;
Alignment Property (align-content)
align-content aligns the entire set of flex lines (not individual items) within
the flex container. The values could be
• flex-start
• flex-end
• Center
• space-between
• space-around
• space-evenly
Flexbox Properties
gap: The gap property explicitly controls the space between flex items.
It can gap: | row-gap | column-gap container {
display: flex;
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
Perfect Center:- To align flex item perfectly center, use the justify-
content and align-items properties. .flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
Flex Example
Flex
<body>
<div class="container">
Example <style>
.main-content {
body { margin: 0; padding: 0; }
<!-- Main Header --> margin: 0px 50px 0px 50px;
<div class="header"> .container { padding: 20 20 20 20;
<div> Logo</div> height: 100vh; height: 100vh;
<ul> display: flex; display: flex;
<li>Home</li> flex-direction: column; background-color: bisque;
} }
<li>Contact</li>
.header { .right-sidebar , .left-sidebar {
<li>Search</li> display: flex;
display: flex;
</ul> width: 20%;
height: 100px;
<div>Login</div> background-color: blue; background-color: blueviolet;
</div> color: white; justify-content: center;
justify-content: space-between; }
<!-- Main Body Area --> align-items: center; .center {
padding: 10px; display: flex;
<div class="main-content">
} flex: auto;
<div class="left-sidebar">Left Sidebar</div> justify-content: center;
ul {display: flex;}
<div class="center">Center Body</div> align-items: center;
ul li { list-style-type: none; padding: 10px; }
<div class="right-sidbar">Right Sidebar</div> .footer { }
</div> color: white; </style>
<!-- Footer Area --> background-color: black;
<div class="footer"> <p>Footer </p></div> display: flex;
</div> height: 100px;
</body> justify-content: center;
}
Grid Layout
CSS Grid Layout is a powerful two-dimensional responsive layout system
for mobile, tablet, and desktop devices. It allows you to design complex
web layouts with rows and columns.
To start with Grid layout, you have to define a html container element
first with CSS display property as
.wrapper {display: grid}
Or
.wrapper {display: inline-grid}

IT Industry-Academia Bridge Program


Grid Layout
Here are some key component of CSS Grid Layout:
• Grid Container: The element that contains the grid is referred to as the grid
container. You can define an element as a grid container by applying the display:
grid; or display: inline-grid; property to it.
• Grid Items: The children of the grid container are called grid items. These are
the elements that will be laid out within the grid.
• Grid Lines: The horizontal and vertical lines that define the grid are known as
grid lines. Grid lines divide the grid into rows and columns.
• Grid Cells: The rectangular areas formed by the intersection of grid rows and
columns are called grid cells. Each grid cell can contain one or more grid items.
• Grid Areas: You can define named grid areas using the grid-template-areas
property. This allows you to assign specific grid items to predefined areas within
the grid.
Grid Layout
• Grid Tracks: The spaces between two adjacent grid lines, either horizontal or
vertical, are called grid tracks. These tracks can be explicitly sized using CSS
properties like grid-template-columns and grid-template-rows, or they can be
auto-sized to fit the content.
• Grid Lines Numbering: Grid lines are numbered starting from 1. You can also use
negative indices to count from the end of the grid.
• Grid Template: You can define the structure of the grid using the grid-template-
columns and grid-template-rows properties, which allow you to specify the size
and number of columns and rows in the grid.
• Grid Gap: The grid-gap property sets the size of the gap between grid tracks
(rows and columns). It's a shorthand for grid-row-gap and grid-column-gap.
• Alignment: CSS Grid Layout provides various properties to align and justify grid
items within the grid, such as justify-items, align-items, justify-content, and
align-content.
Grid Layout
The grid layout is a CSS layout that allows you to create responsive and flexible layouts. A
responsive grid view often has 12 columns and a total width of 100%. Here is an example
<style>
.grid { In grid class
display: flex; display: flex - creates a flexible container for elements
flex-wrap: wrap;
flex-wrap: wrap - wraps item onto multiple lines if necessary to
}
.column { fit within the container.
flex: 0 0 8.33%; /* Take up 8.33% of the grid (12 columns) */
background-color: red;
color: white; In column class
text-align: center;
flex: 0 0 8.33% - sets the flex-grow, flex-shrink, and flex-basis
}
</style> properties to 0, 0, and 8.33%, where the 8.33% represents how
<div class="grid"> much size the column will take, i.e. 1/12th of the screen.
<div class="column">1</div>
<div class="column">2</div>
...
<div class="column">11</div>
<div class="column">12</div>
</div>
CSS Grid Layout
CSS Grid tool is used to create two dimensional responsive layouts for
mobile, tablet, and desktop devices. Other then CSS Grid layouts are
Flow layout, Table layout, Flexbox.
To start with Grid layout, you have to define a html container element
first with CSS display property as

.wrapper {display: grid}


Or
.wrapper {display: inline-grid}
CSS Grid Layout
(Implicit Gird Example)
CSS
HTML .wrapper
<div class="wrapper"> {
<div class =“box”> One </div> display: grid;
<div class =“box”> Two</div> border: 2px solid #670707;
<div class =“box”> Three</div> border-radius: 5px;
<div class =“box”> Four</div> background: #fff4ef;
<div class =“box”> Five</div> }
</div> .box {
border: 2px
solid #670707;
border-radius: 5px;
}

All direct children of grid containers become grid items and display inside container ‘wrapper’ in single column by default

IT Industry-Academia Bridge Program


Grid Elements
The children (i.e. direct descendants) of the grid container are known are grid items (grid
elements). By default grid items are display in single column.
Explicitly set a grid by creating columns and rows with the grid-template-columns and grid-
columns and grid-template-rows properties.
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
}

To create a flexible grid item length, fr unit is used to represent fraction of the available
space in the grid container.

grid-template-columns: 2fr 1fr 1fr;

grid-template-columns: 500px 1fr 1fr;

Value “auto” can be use to cover remaining space grid-template-columns: 80px auto auto
Grid Elements properties
repeat- Large grids with many tracks can use the repeat() notation, to repeat all or a
section of the track listing.
grid-template-columns: 1fr 1fr 1fr; == grid-template-columns: repeat(3, 1fr);
- Mix of absolute size with flexible repeat
grid-template-columns: 70px repeat(3, 1fr) 70px;
grid-auto-row/grid-auto-column- These properties define the size for explicit
columns or rows implicitly (default)
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}

Here grid-auto-rows define the height of a row inside grid-template-columns.


- When we create explicit grid by grid-template-columns property, the grid create rows its own implicitly, have auto-sized
by default, based on the content inside track.
Grid Elements Properties
minmax: Using minmax() in the value of grid-auto-rows means that the
size of row will be according to the size of inside content with minimum
defined size.
.wrapper {
<div class="wrapper">
display: grid;
<div>One</div>
grid-template-columns: repeat(3, 1fr);
<div>
grid-auto-rows: minmax(100px, auto);
Two
}
<p>I have some more content in.</p>
<p>This makes me taller than 100 pixels.</p>
</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
Grid Lines
In CSS Grid Layout, grid lines are the lines that separate the rows and
columns of a grid. Still now, we have created grid by grid tracks to place
items inside. Grid lines define the structure of the grid and provide the
basis for placing grid items within the grid container.
In given figure, according to grid track, we have three
columns and two rows and according to grid line structure,
we have 4 lines or column and 3 lines of rows.
- Column lines are start from left to right
- Row lines are start from top to bottom.

Grid lines are defined by the following properties


• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
Grid Lines .wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
<div class="wrapper"> grid-auto-rows: 100px;
<div class="box1">One</div> }
<div class="box2">Two</div>
<div class="box3">Three</div> .box1 {
<div class="box4">Four</div> grid-column-start: 1;
<div class="box5">Five</div> grid-column-end: 4;
</div> grid-row-start: 1;
grid-row-end: 3;
}

.box2 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}
.box1 {
grid-column: 1 / 4;
Line positioning can be defined by ‘/’ for shortest notation grid-row: 1 / 3;
}
grid-row / grid-column properties
Grid-row & grid-column properties define, which row of column an
element will be displayed on. You can use individual property as
grid-row: <row-start> / <row-end>; grid-row: 2 / 4;
grid-row: <row-start> / span <n>; grid-row: 2 / span 3;

Both properties work in conjunction to define the placement of grid


items within the grid container.
grid-column: 5;
grid-row: 3;
This conjunction will select cell in column 5 and row 3.
Span value of grid spread the column or row, start from start property.
grid-column-start: 1;
grid-column-end: span 4
Grid Gutter
Grid gutter is the space/gap between cells by using properties
column-gap: 50px;
row-gap: 50px;
The gap property is a shorthand property for the row-gap and
the column-gap properties:
gap: 50px 100px;

IT Industry-Academia Bridge Program


Grid Alignment (justify-content vs justify-
item)
To control the alignment of column or row, justify-content property is used.
wrapper {
display: grid;
grid-template-columns: 90px 90px;
justify-content: center;
}
Column alignment could be start | center | space-between | space-around | space-evenly
To control the alignment of items within row or columns, justify-item property is
used .parent {
display: grid;
grid-template-columns: 90px 90px;
justify-content: center;
justify-items: stretch;
}

Item alignment could be stretch (default) | start | center | end


Grid Alignment (justify-self)
justify-self:- This property is used to align a specific grid child.
.parent {
display: grid;
grid-template-columns: 90px 90px;
justify-content: start;
}
.one {
justify-self: start;
}

Possible values could be stretch | start |end |center


justify-items is used on a grid container and is used to determine how grid
items are spread out along a row by setting the default justify-self
property for all child boxes. justify-self is used to set how an individual grid
item positions itself along the row/inline axis.
Grid Alignment (align-content | align-
items)
To align grid stuff in horizontal direction, Grid provides align-content &
align-items properties.
align-content is like justify-content, but it affects rows instead of
columns. Similarly, align-items is like justify-items, but it handles
the vertical alignment of items inside their grid area, rather than
horizontal.

IT Industry-Academia Bridge Program


Grid Examples
How to Define Grid Layout
Define the Grid: You can define the structure of the grid using properties like grid-
template-columns and grid-template-rows on the grid container. These properties allow
you to specify the size and number of columns and rows in the grid.
• Place Grid Items: Once the grid is defined, you can place the grid items within the grid
using properties like grid-column and grid-row. These properties determine which grid
lines the items start and end on, effectively positioning them within the grid.
• Alignment: Grid containers provide properties to align and justify grid items within the
grid, such as justify-items, align-items, justify-content, and align-content. These
properties control the alignment of items along the row and column axes.
• Grid Gap: You can also specify the size of the gap between grid tracks (rows and
columns) using the grid-gap property or its shorthand equivalents grid-row-gap and grid-
column-gap.
• Responsive Layouts: CSS Grid Layout allows you to create responsive layouts that adapt
to different screen sizes and orientations. By using flexible units like percentages or fr
units, you can create layouts that adjust dynamically based on the available space.
Flexbox vs Grid Layout
Flexbox is consider for small-scale layouts, whereas Grid layout is intended
for large scale layouts.
Grid is a two dimension layout model, which control column and rows
together.
Flex is a one-dimensional layout means that layout in one dimension at a
time – either as a row or as a column.
All items inside Flexbox layout are placed in term of row or column. The
flex-direction property defines in which direction the container wants to
stack the flex items.

IT Industry-Academia Bridge Program


Practice Pge
https://gridbyexample.com/
http://www.flexboxdefense.com/
https://flexboxfroggy.com/
https://gridcritters.com/
https://cssbattle.dev/

IT Industry-Academia Bridge Program


Reference:-
https://
developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_co
ncepts_of_grid_layout
https://www.joshwcomeau.com/css/interactive-guide-to-grid/
https://css-tricks.com/snippets/css/complete-guide-grid/
Grid Examples:-
https://gridbyexample.com/examples/

IT Industry-Academia Bridge Program


CSS Positioning
CSS positioning refers to the way elements are arranged on a web page
using the position property. There are five common values:
• Static (default): Elements are positioned in the normal document
flow.
• Relative: Positioned relative to its normal position.
• Absolute: Positioned relative to its nearest positioned ancestor or the
viewport if none exists.
• Fixed: Positioned relative to the viewport; doesn't move on scroll.
• Sticky: Switches between relative and fixed, depending on scroll
position.
Each position can be displayed by top, right, bottom, and left properties
CSS Positioning
Static Potion:- The static position is the default position of an element
in CSS. This means that the element is positioned according to the
normal flow of the document.
• All elements are static by default unless otherwise specified.
• The top, right, bottom, and left properties have no effect when the
position is set to static.
CSS Positioning
Relative Position:- When an element is positioned relatively, it’s positioned
relative to its original (static) location in the normal document flow.
• You can move it using the top, right, bottom, and left properties without
affecting other elements' positions.
• Z-index value define the element overlapping.
Examples

Relative Positioning for a Tooltip Button with Floating Label


CSS Positioning
Absolute Position:- An absolutely positioned element is removed from the
normal document flow and positioned relative to its nearest positioned
ancestor (any element with relative, absolute, or fixed positioning).
• The top, right, bottom, and left properties are used to position it from ancestor
precisely .
• Without the ancestor having relative, absolute of fixed positioning, the absolute
element would be positioned relative to the viewport.
• Ideal for creating elements like floating tooltips, pop-up modals, or overlay text on
images.
• Example
CSS Positioning
Fixed Position:- Elements with fixed positioning are removed from the
normal document flow and are positioned relative to the browser window
(viewport). This means the element stays fixed at a specified position even
when the user scrolls. Properties left, right, up, bottom take effect
Use-Cases:-
• Sticky Header: Keep navigation or important information visible while scrolling.
• Persistent Footer: Keep key information, such as contact info, always accessible at
the bottom of the page.
• Fixed Sidebars: Useful for websites that need a sidebar for navigation that
remains accessible while scrolling the main content.
• Alert Bars: Used on websites to show urgent or important messages that users
can always see while navigating.
• Scroll Navigation: This is commonly used on long pages to give users an easy way
to scroll back to the top.
CSS Positioning
Sticky Position: sticky allows an element to "stick" to a specific position
when the user scrolls past it, behaving like relative until that point and
fixed afterwards.
Static Position Relative Position Absolute Position

<style> <style>
<style> .relative-container { .relative-container {
.relative-container { background-color: black; position: relative;
background-color: black; width: 200px; background-color: black;
width: 200px; padding: 20px; width: 200px;
padding: 20px; } padding: 20px;
} .box1 { }
.box1 { background-color: lightcoral; .box1 {
background-color: lightcoral; padding: 20px; background-color: lightcoral;
padding: 20px; } padding: 20px;
} .box2 { }
.box2 { position: relative; .box2 {
background-color: lightgreen; background-color: lightgreen; position: absolute;
padding: 20px; padding: 20px; top: 10px;
} top: -25 left: 100px;
</style> } background-color: lightgreen;
</style> padding: 20px;
}
</style>
Important properties
CSS z-index determines the stacking order. Elements with higher z-
index values will be layered on top.
CSS transform is a powerful property that allows you to apply 2D or 3D
transformations to an element, affecting its position, size, and shape
without altering the document flow. Its value could be translate, rotate,
scale, skew, materix.
translate(x, y): transform: translate(50px, 100px);
Moves an element from its original position.

IT Industry-Academia Bridge Program


Best Examples
Absolute positioning is used to center pop-up modals on the page or within a
container.
.modal-container { <div class="modal-container">
position: relative; <div class="modal">
height: 400px; <h3>Modal Title</h3>
margin-top: 100px; <p>This is a modal content.</p>
background-color: #f1f1f1; </div>
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
padding: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
Beautiful Nav-Bar
<style>
nav {
background-color: #333;
This will display beautiful navbar, which float on left side.
overflow: hidden; /* Clears float */ Normally, we display <li> items as ‘display: inline;’ but her we used
} <a> as ‘display:block’ to improving usability for navigation menus.
nav ul {
It also enables you to apply padding and margins effectively,
list-style-type: none;
margin: 0; creating a better visual structure and layout for the navigation links.
padding: 0; This makes the menu easier to interact with, especially on touch devices.
}
nav ul li {
float: left;
display: inline;
margin-right: 20px;
padding: 10px;
}
nav ul li a { <nav>
color: white; <ul>
text-decoration: none; <li><a href="#">Home</a></li>
padding: 14px 20px; <li><a href="#">About</a></li>
display: block; <li><a href="#">Services</a></li>
} <li><a href="#">Contact</a></li>
nav ul li a:hover { </ul>
background-color: #575757; </nav>
}
IT Industry-Academia Bridge Program
IT Industry-Academia Bridge Program

You might also like