Scribd
Upload
11 views92 pages

WDUnit 3

This document provides a comprehensive overview of Cascading Style Sheets (CSS), detailing its importance, basic syntax, and various selectors. It covers different methods of applying CSS, including inline, internal, and external styles, as well as properties related to backgrounds, fonts, text formatting, and the box model. Additionally, it highlights advantages and disadvantages of using CSS, along with practical examples for better understanding.

Uploaded by

aryanmaheshpatel07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views92 pages

WDUnit 3

This document provides a comprehensive overview of Cascading Style Sheets (CSS), detailing its importance, basic syntax, and various selectors. It covers different methods of applying CSS, including inline, internal, and external styles, as well as properties related to backgrounds, fonts, text formatting, and the box model. Additionally, it highlights advantages and disadvantages of using CSS, along with practical examples for better understanding.

Uploaded by

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

Web Designing

Unit - 3
Cascading Style
Sheets (CSS)
Outline
1. Introduction to CSS
• What is CSS?
• Importance of CSS
2. Basics of CSS
• Basic Syntax & Structure
• Class & ID
• Types of CSS
• Multiple selector, Multilevel selector
3.Background
4.Fonts & Text
Outline (Cont.)
5. Box Model
• Margin, Border, Padding
6. List
• List Type, List with Image, List Position
7.Links
8.CSS Positioning
9. CSS Layers
10. CSS Floating Property
11. Introduction to CSS3
What is CSS?
▪ Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pages presentable.
▪ CSS defines layout of HTML documents. For example, CSS covers
Fonts, colors, margins, lines, height, width, background images,
advanced positions and many other things.
Importance of CSS
▪ CSS defines HOW HTML elements are to be displayed.
▪ Styles are normally saved in external .css files.
▪ External style sheets enable you to change the appearance and
layout of all the pages in a Web site, just by editing one single file.
▪ Advantages :
• Improves Website Presentation
• External CSS makes Updates Easier and Smoother
• External CSS helps Web Pages Load Faster
▪ Disadvantages :
• Browser Dependent
• Difficult to retrofit in old websites
Basic Syntax of CSS
▪ A CSS rule has two main parts: a selector, and one or more
declarations
Selector Declaration 1 Declaration 2

h1 {color:blue; font-size: 12px;}

property value property value


▪ The selector can be HTML element, id or class.
▪ Each declaration consists of a property and a value.
▪ The property is the style attribute you want to change. Each
property has a value.
The “id” selector
▪ The id selector is used to specify a style for a single, unique
element.
▪ The id selector uses the id attribute of the HTML element, and is
defined with a "#“ in css.
▪ The style rule below will be applied to the element with
id="para1":

HTML CSS
<h1 id=“para1”> #para1{
Hello Friends color: blue;
</h1> }

<h1> Output
How are you Hello Friends
</h1> How are you
The “class” selector
▪ The class selector is used to specify a style for a group of
elements.
▪ The class selector uses the HTML class attribute, and is defined
with a ".“ in css.

HTML CSS
<h1 class=“myClass”> .myClass{
Hello Friends color: blue;
</h1> }
<h1>
How are you
</h1> Output
<h1 class=“myClass”> Hello Friends
How are you How are you
</h1> How are you
Different ways to write CSS
▪ There are three ways of writing a style sheet:
1. Inline Style
2. Internal/Embedded Style sheet
3. External Style Sheet
1) Inline Style
▪ It is possible to place CSS right in your HTML code, and this
method of CSS usage is referred to as inline css.
▪ Inline CSS has the highest priority out of external, internal, and
inline CSS.
▪ This means that you can override styles that are defined in
external or internal by using inline CSS.
▪ If you want to add a style inside an HTML element all you have to
do is specify the desired CSS properties with the style HTML
attribute.
▪ Example:
HTML
<p style="background: blue; color: white;"> My Inline CSS </p>
2) Internal Style Sheet
▪ This type of CSS is only for Single Web Page.
▪ When using internal CSS, we must add a new tag, <style>, inside
the <head> tag.
▪ The HTML code below contains an example of <style>'s usage.
HTML
<html><head>
<style type="text/css">
p{ color: red;}
</style>
</head><body>
<p>Your page's content!</p></body>
</html>
3) External Style Sheet
▪ When using CSS it is preferable to keep the CSS separate from
your HTML.
▪ Placing CSS in a separate file allows the web designer to
completely differentiate between content (HTML) and design
(CSS).
▪ External CSS is a file that contains only CSS code and is saved with
a ".css" file extension.
▪ This CSS file is then referenced in your HTML using the <link>
instead of <style>.
3) External Style Sheet (Cont.)
▪ Example :
Demo.html test.css
<html> #para1{
<head> text-align: center;
<link rel=“stylesheet” type=“text/css” }
href=“test.css”> p
</head> {
<body> color : blue;
}
<p> Hello Friends </p>
<p id=“para1”> How are you? </p> Output
Hello Friends
</body> How are you?
</html>
3) External Style Sheet (Cont.)
▪ Advantages:
• It keeps your website design and content separate.
• It's much easier to reuse your CSS code if you have it in a separate file.
Instead of typing the same CSS code on every web page you have, simply
have many pages refer to a single CSS file with the "link" tag.
• You can make drastic changes to your web pages with just a few changes in
a single CSS file.
Assign Multiple Classes
▪ We can apply different class to same html element by giving space
separated class names in the class attribute:

Demo.html test.css
<html> . class1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head> . class2
<body> {
text-align : center;
<h1 class=“class1 class2”> }
How are you?
</h1> Output

</body>
How are you?
</html>
Multiple Selection
▪ We can apply same css to multiple selectors using comma
separated selector list, for example :

Demo.html test.css
<html> p, h1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head>
<body>

<p> Hello Friends </p>


<h1> How are you? </h1> Output
Hello Friends
</body>
</html>
How are you?
Multi-level Selection
▪ We can use hierarchical path to target html element by space
separated element/class/id names, for example :

Demo.html test.css
<html> div h1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head>
<body>
<h1>Hello Friends…</h1>
<div>
<h1>How are you?</h1> Output
</div> Hello Friends…
</body>
How are you?
</html>
Background Property
Property Name

▪ Background Color (background-color)


▪ Background Image (background-image)
▪ Background Image Repeat (background-repeat)
▪ Fixed Background Image (background-
attachment)
▪ Background Image Positioning (background-position)
Background Color
▪ The background-color property specifies the background color of
an element.
▪ The background color of a page is defined in the body selector:
▪ Below is example of CSS backgrounds

test.css
body
{
background-color : red;
background-color : #FF0000;
background-color : rgb(255,0,0);
}
Background Image
▪ The background-image property specifies an image to use as the
background of an element.
▪ For Example,

test.css
body
{
background-image : url(‘pathToImage.jpg’);
}
Background Image Repeat
▪ You can have a background image repeat vertically (y-axis),
horizontally (x-axis), in both directions, or in neither direction.
test.css
body
{
background-image : url(‘pathToImage.jpg’);

no-repeat
repeat-y
background-repeat : repeat;

repeat-x
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
}
Fixed Background Image
▪ The background-attachment property sets whether a background
image is fixed or scrolls with the rest of the page.
▪ For Example,
test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-attachment : fixed;
}
Background Image Positioning
▪ The background-position property sets the starting position of a
background image.
test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-position: 20px 10px;
background-position: 30%30%;

30% 30%
background-position: top center;
}
CSS Font
▪ CSS font properties define the font family, boldness, size, and the
style of a text.
Property Name

1. Font Color (color)


2. Font Family (font-family)
3. Font Size (font-size)
4. Font Style (font-style)
5. Font Weight (font-weight)
6. Font Variant (font-variant)
CSS Font (Cont.)
h4{
▪ Font Color color : red;
• Set the text-color for different elements }
h4{
▪ Font Family font-family : sans-serif;
• The font family of a text is set with the }
font-family property. h4{
font-size: 120%;
▪ Font Size font-size : 10px;
• The font-size property sets the size of font-size : small;
font-size : smaller;
the text.
font-size : x-small;
• font-size : 120% font-size : xx-small;
• font-size : 10px; font-size : large;
• font-size : x-large; font-size : larger;
font-size : x-large;
font-size : xx-large;
font-size : medium;
}
CSS Font (Cont.)
▪ Font Style h4{
font-style: italic ;
• The font-style property is mostly used to }
specify italic text.
h4{
▪ Font Weight font-weight : 300;
• The font-weight property sets how thick font-weight : bolder;
or thin characters in text should be font-weight : lighter;
}
displayed.
▪ Font Variant h4{
font-variant: small-caps;
• The font-variant property specifies
whether or not a text should be }
displayed in a small-caps ( all lowercase letters
are converted to uppercase letters.) font.

• font-variant : small-caps;
CSS Text Property
▪ While CSS Font covers most of the traditional ways to format your
text, CSS Text allows you to control the spacing, decoration, and
alignment of your text.
Property Name

1. Text Decoration (text-decoration)


2. Text Indent (text-indent)
3. Text Align (text-align)
4. Text Transform (text-transform)
5. White Space (white-space)
6. Word Spacing (word-spacing)
7. Letter Spacing (letter-spacing)
8. Line Height (line-height)
CSS Text Property (Cont.)
▪ Text Decoration
h4{
• The text-decoration property is used to text-decoration : line-through;
set or remove decorations from text. text-decoration : overline;
text-decoration : underline;
• The text-decoration property is mostly
text-decoration : none;
used to remove underlines from links for }
design purposes.
▪ Text Indent h4{
• The text-indentation property is used to text-indent : 20px;
text-indent : 30%;
specify the indentation of the first line of }
a text. h4{
▪ Text Align text-align : right;
text-align : justify;
• The text-align property is used to set the text-align : left;
horizontal alignment of a text. text-align : center;
}
CSS Text Property (Cont.)
▪ Text Transform h4{
text-transform : capitalize;
• The text-transform property is used to
text-transform : uppercase;
specify uppercase and lowercase letters text-transform : lowercase;
in a text. }

▪ White Space h4{


• The white-space attribute allows you to white-space : nowrap;
prevent text from wrapping until you }
place a break <br /> into your text.
▪ Word Spacing h4{
word-spacing : 10px;
• With the CSS attribute word-spacing you
}
are able to specify the exact value of the
spacing between your words. Word-
spacing should be defined with exact
values.
CSS Text Property (Cont.)
▪ Letter Spacing h4{
letter-spacing : 3px;
• With the CSS attribute letter-spacing you
}
are able to specify the exact value of the
spacing between your letters. Letter-
spacing should be defined with exact
values.
▪ Line Height h4{
• The line-height attribute will set the line-height : 10px;
height of the line in the page. }
The Box Model
▪ All HTML elements can be considered as boxes. In CSS, the term
"box model" is used when talking about design and layout.
▪ The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
▪ The box model allows us to place a border around elements and
space elements in relation to other elements.
The Box Model (Cont)
▪ The image below illustrates the box model:
Margin
Border
Padding
Content
The Box Model (Cont)

margin-top
border-top
padding-top

padding-right

margin-right
border-right
padding-left
margin-left
border-left

Content

padding-bottom
border-bottom
margin-bottom
CSS Padding
▪ The CSS padding properties define h4{
padding : 10px;
the space between the element }
border and the element content.
▪ The top, right, bottom, and left h4{
padding-top : 10px;
padding can be changed padding-right : 20px;
independently using separate padding-bottom : 30 px;
padding-left : 40 px;
properties. }
▪ A shorthand padding property can h4{
also be used, to change all padding padding : 10px 20px 30px 40px;
}
at once.
CSS Border
▪ The CSS border properties allow you to specify h4{
the style and color of an element's border. border : 1px solid red;
▪ Border Style Types }
• The border-style property specifies what kind of h4{
border to display. border-style : solid;
▪ Border Width border-style : dotted;
• The border-width property is used to set the width of border-style : double;
the border. }
▪ Border Color h4{
• The border-color property is used to set the color of border-width : 7px;
the border. }
• Border colors can be any color defined by RGB,
h4{
hexadecimal, or key terms. Below is an example of
border-color : red;
each of these types.
}
▪ The top, right, bottom, and left border can be
changed independently using separate h4{
border-top : 1px solid red;
properties.
}
OUTLINE

•dotted - Defines a dotted outline


•dashed - Defines a dashed outline
•solid - Defines a solid outline
•double - Defines a double outline
•none - Defines no outline
•hidden - Defines a hidden outline
CSS Margin
▪ The CSS margin properties define the h4{
margin: 10px;
space around elements }

▪ The top, right, bottom, and left h4{


margin -top : 150px;
margin can be changed margin -right : 150px;
margin -bottom : 100 px;
independently using separate margin -left : 50 px;
properties. }

▪ A shorthand margin property can h4{


margin : 10px 20px 30px 40px;
also be used, to change all margins }
at once. (top right,bottom,left)
CSS List ul{
list-style-type: circle;
▪ The CSS list properties allow you to: list-style-type: disc;
• Set different list item markers for list-style-type: square;
ordered & unordered lists }
• Set an image as the list item marker
• Set the position of the marker
▪ CSS List Style Type
▪ CSS List with Image
▪ CSS List Position ol{
list-style-image : url(‘imgPath’);
}

ol{
list-style-position : outside;
list-style-position : inside;
}
Styling Links
▪ Anchor/Link States a:link{
color:#FF0000;
• The four links states are:
/*unvisited link*/
1. a:link - a normal, unvisited link }
2. a:visited - a link the user has visited a:visited{
3. a:hover - a link when the user text-decoration : none;
/*visited link*/
mouse over it
}
4. a:active - a link the moment it is
a:hover{
clicked color:#00FF00;
/*mouse over link*/
}

a:active{
color:#0000FF;
/*selected link*/
}
CSS Positioning
▪ Absolute Positioning
h1{
• With absolute positioning, you define the position : absolute;
exact pixel value where the specified left : 50px;
top : 100px;
HTML element will appear.
}
• The point of origin is the top-left of the
browser's viewable area, so be sure you
are measuring from that point.
h1{
▪ Relative Positioning position : relative;
• Relative positioning changes the position left : 50px;
of the HTML element relative to where it top : 100px;
}
normally appears.
▪ Fixed Positioning h1{
position : fixed;
• The element is positioned relative to the
top : 50px;
browser window, in fixed position, left : 100px;
element will be in the same place even }
we scroll the screen.
CSS Layers
▪ CSS allows you to control which item will CSS
appear on top with the use of layers. #division1{
position : absolute;
▪ In CSS, each element is given a priority. height : 100px;
▪ If there are two overlapping CSS positioned width : 100px;
elements, the element with the higher left : 100px;
top : 150px;
priority will appear on top of the other. background-color : red;
▪ To manually define a priority, set the z-index z-index : 5;
value. The larger the value, the higher the }
#division2{
priority the element will have. position : absolute;
height : 200px;
HTML
width : 200px;
left : 50px;
<div id="division1">
top : 100px;
</div>
background-color : blue;
<div id="division2">
z-index : 2;
</div>
}
CSS Float Property
▪ The CSS float property defines that an element should be taken
out of the normal flow of the document and placed along the left
or right side of its containing block.
▪ The CSS float property controls the positioning and formatting of
content on the page
CSS
▪ Text and inline elements will then#division1{
wrap around this element.
background-color : red;
HTML float : left;
width: 40%;
<div id="division1"> }
ABC Content #division2{
</div> background-color : blue;
<div id="division2"> float : right;
XYZ Content width: 40%;
</div> }
CSS layout with FlexBox and Grid
CSS Flexbox Layout Module
there are four layout modes:
• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible
responsive layout structure without using float or positioning.
The flexbox properties are supported in all modern browsers.
Flex container
flx.html flx.css
<html> .flex-container {
<head> display: flex;
<link rel=“stylesheet” background-color: Blue;
href=flx.css></head> }
<body>
<h1>Create a FlexContainer</h1> .flex-container div {
<div class="flex-container"> background-color: #f1f1f1;
<div>1</div> margin: 10px;
<div>2</div> padding: 20px;
<div>3</div> font-size: 30px;
</div> }
flex container properties
▪ flex-direction- The flex-direction property defines in which
direction the container wants to stack the flex items.column;
column-reverse; row; row-reverse;
▪ flex-wrap- The flex-wrap property specifies whether the flex items
should wrap or not.: wrap; nowrap; wrap-reverse;
▪ flex-flow: row wrap; (setting both direction and wrap)
▪ justify-content- The justify-content property is used to align the
flex items: center; flex-start; flex-end; space-around; space-
between;
▪ align-items: stretch; baseline; center; flex-start; flex-end;
column and column reverse
wrap, nowrap and wrap-reverse
space around and space between
align: center, flex-start, flex-end, stretch
Flex container properties
CSS Flexbox Items Properties
order: value <div style="order: 1">4</div>

flex-grow: value <div style="flex-grow: 8">3</div>

<div style="flex-shrink: 2">3</div>

<div style="align-self: center">3</div>


Order property:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
Flex-grow:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 7">3</div>
</div>
Flex-shrink:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Align-self:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
Responsive Flexbox

By use media queries we can create different layouts


for different screen sizes and devices.
For example, if you want to create a two-column layout
for most screen sizes, and a one-column layout for
small screen sizes (such as phones and tablets), you
can change the flex from row to column at a specific
breakpoint.
.flex-container {
display: flex;
flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column


layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
CSS Grid Layout

A grid can be defined as an intersecting set of horizontal


lines and vertical lines. CSS Grid layout divides a page into
major regions. It makes the designing of web pages easy
without positioning and floating.
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
Grid properties
▪ some of the shorthand properties:
• grid-template-columns: It is used to specify the size
of the columns.
• grid-template-rows: It is used to specify the row size.
• grid-template-areas: It is used to specify the grid
layout by using the named items.
• grid-auto-rows: It is used to specify the automatic
size of the rows.
• grid-auto-columns: It is used to specify the
automatic size of the columns.
• grid-auto-flow: It is used to specify how to place
auto-placed items and the automatic row size.
Display Property of grid layout

Display Property
.grid-container {
display: grid;
}

.grid-container {
display: inline-grid;
}
.main{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 250px 200px;
background-color: black;
grid-gap: 10px;
padding: 20px;
}
justify-content property

• space-evenly: It provides equal space in between or


around the columns.
• space-around: It provides equal space around the
columns.
• space-between: It gives an equal amount of space
between the columns.
• center: It is used to align the grid in the middle of
the container.
• start: It is used to align the grid at the beginning of
the container.
• end: It is used to align the grid at the end of the
container.
Grid Columns

The vertical lines of grid items are called columns.


Grid rows
The horizontal lines of grid items are called rows.
Grid Gaps

● column-gap
● row-gap
● gap: The gap property is a shorthand property for the row-gap and the column-gap properties:
Grid Lines

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Introduction to CSS3
▪ CSS3 is the latest standard for CSS.
▪ CSS3 is completely backwards-compatible with earlier versions of
CSS.
▪ CSS3 has been split into "modules". It contains the "old CSS
specification" (which has been split into smaller pieces). In addition,
new modules are added.
▪ CSS3 Transitions are a presentational effect which allow property
changes in CSS values, such as those that may be defined to occur
on :hover or :focus, to occur smoothly over a specified duration –
rather than happening instantaneously as is the normal behaviour.
▪ Transition effects can be applied to a wide variety of CSS properties,
including background-color, width, height, opacity, and many more.
CSS3 stands for Cascading Style Sheet level 3, which is the advanced
version of CSS. It is used for structuring, styling, and formatting web
pages. Several new features have been added to CSS3 and it is
supported by all modern web browsers. The most important feature of
CSS3 is the splitting of CSS standards into separate modules that are
simpler to learn and use.
Introduction to CSS3 (Cont)
▪ Some of the most important CSS3 modules are:
• CSS Animations and Transitions
• Calculating Values With calc()
• Advanced Selectors
• Generated Content and Counters
• Gradients
• Webfonts
• Box Sizing
• Border Images
• Media Queries
• Multiple Backgrounds
• CSS Columns

Courtesy : http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/
CSS Animations and Transitions

Transition:
With CSS3 transitions you have the potential to alter the appearance and behavior
of an element whenever a state change occurs, such as when it is hovered over,
focused on, active, or targeted.
four transition related properties:
transition-property
transition-duration
transition-timing-function
transition-delay
Trans.html Trans.css
<div class=“box”>box</div> body { color: #fff;
font: 600 14px/24px "Open Sans",
"HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida
Grande", Sans-Serif;

} .box { background: #2db34a;


border-radius: 6px;
cursor: pointer;
height: 95px;
line-height: 95px;
text-align: center;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
width: 95px; }
.box:hover { background: #ff7b29;
}
CSS Web Fonts

Web fonts allow Web designers to use fonts that are not
installed on the user's computer.
When you have found/bought the font you wish to use,
just include the font file on your web server, and it will
be automatically downloaded to the user when needed.
Different Font Formats
▪ TrueType Fonts (TTF)
▪ OpenType Fonts (OTF)
▪ Web Open Font Format (WOFF)
▪ Web Open Font Format (WOFF 2.0)
▪ Embedded OpenType Fonts (EOT)
▪ SVG Fonts/Shapes
Animation
Animations:
Animations within CSS3 allow the appearance and behavior of an
element to be altered in multiple keyframes. Transitions provide a
change from one state to another, while animations can set multiple
points of transition upon different keyframes.
Example

.html
</style>
</head>
<body>
<div class="container gradient-bg animated">
<div class="content shadow">
<h1 class="text-effect">Hey Students</h1>
<p class="text-effect">How Are You?</p>
</div>
</div>
</body>
</html>
Example

/* Animation */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
} /* Applying Animation */
.animated {
/* Shadows */ animation: fadeIn 1s ease-out;
.shadow { }
/* Example of Usage */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); .container {
} width: 100%;
height: 100vh;
/* Text Effects */
display: flex;
.text-effect { justify-content: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); align-items: center;
}
color: #ffffff; .content {
} padding: 20px;
border-radius: 10px;
/* Gradients */
background-color: #931414;
.gradient-bg { }
background: linear-gradient(to right, #372825,
#feb47b);
}
CSS Media queries

Media queries help to add responsiveness to the website by adding breakout points
or when only a certain condition is true.

@media only screen and (max-width: 600px) {


body {
background-color: lightblue;
}
}
Add a Breakpoint
CSS @media Rule
The @media rule is used in media queries to apply
different styles for different media types/devices.
Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait
mode?)
• resolution
Using media queries are a popular technique for delivering
a tailored style sheet (responsive web design) to
desktops, laptops, tablets, and mobile phones.
responsive web design
Responsive design:
▪ Endless new resolutions and devices are difficult to
support seperately for web developer
▪ Responsive design is a way for web developer to make his website
adapt to all the devices and resolutions
▪ Responsive design is a necessity and not a luxury anymore
Various ways to achieve responsive design:
I. Setting up viewport
II. Use max-width/max-height
III. Using CSS media queries
IV. Using rem/vh/vw units over pixels
Setting The Viewport

include the <meta> viewport element in all your web


pages
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
This gives the browser instructions on how to control
the page's dimensions and scaling.
width=device-width: sets the width of the page to
follow the screen-width of the device
initial-scale=1.0: sets the initial zoom level when
the page is first loaded by the browser.

You might also like