Scribd
Upload
15 views94 pages

CSS With Media Query

CSS, or Cascading Style Sheets, is a language used to style HTML documents, defining how elements are displayed on various media. It offers advantages such as time savings, faster page loading, easy maintenance, and platform independence. CSS can be implemented in three ways: inline, internal, and external, with selectors for classes and IDs to target specific elements.

Uploaded by

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

CSS With Media Query

CSS, or Cascading Style Sheets, is a language used to style HTML documents, defining how elements are displayed on various media. It offers advantages such as time savings, faster page loading, easy maintenance, and platform independence. CSS can be implemented in three ways: inline, internal, and external, with selectors for classes and IDs to target specific elements.

Uploaded by

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

What is CSS?

- CSS stands for Cascading Style Sheets.


- CSS is the language we use to style an HTML document.
- CSS describes how HTML elements should be displayed.
- CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.

Advantages of CSS:
- CSS saves time: You can write CSS once and then reuse the same sheet in multiple
HTML pages.
- Pages load faster: If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
- Easy maintenance: To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
- Platform Independence: The Script offers consistent platform independence and
can support the latest browsers as well.

CSS - Syntax:
selector {
property: value;
}
Types Of CSS / Stylesheet:
- CSS can be added to HTML documents in 3 ways:
1. Inline - by using the style attribute inside HTML elements
2. Internal - by using a <style> element in the <head> section
3. External - by using a <link> element to link to an external CSS file
4. Multiple CSS
- Note: The most common way to add CSS is to keep the styles in external CSS files.

1. Inline CSS:
- Inline styles are CSS declarations that affect a single HTML element,
contained within a style attribute.
- If you want to use inline CSS, you should use the style attribute to the
relevant tag.

Example:
<h1 style="color:blue;"> A Blue Heading</h1>

2. Internal CSS:
- An internal CSS is used to define a style for a single HTML page.
- An internal CSS is defined in the <head> section of an HTML page, within a
<style> element.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
background-color: red;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 > This is Heading.</h1>
</body>
</html>

3. External CSS:
- An external style sheet is used to define the style for many HTML pages.
- To use an external style sheet, add a link to it in the <head> section of each
HTML page:

Example:
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 > This is Heading.</h1>
<p > This is Paragraph.</p>
</body>
</html>

style.css
body {
background-color: red;
}
h1 {
color: blue;
}
p{
color: white;
}

4. Multiple CSS:
- Actually Multiple Stylesheet is not a type of Style Sheets but it is a
combination of
1. External Style Sheet,
2. Internal Style Sheet and
3. Inline Style Sheet
- As per designers requirement.
- We can use more than one style sheet in a HTML document file.
- This method of working with more then one style sheet that’s why it is
known as Multiple Style Sheet.

Example:
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body {
background-color: red;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>This is Heading.</h1>
<p style="font-size:20px;">A red paragraph.</p>
</body>
</html>
style.css
body {
background-color: red;
}
p{
background-color: yellow;
}

CSS Selectors:
There are two types of selector:
● Class
● ID
CSS selectors select HTML elements according to its id, class, type, attribute etc.

Class:
- The .class selector selects elements with a specific class attribute.
- To select elements with a specific class, write a period (.) character, followed
by the name of the class.
- HTML elements can also refer to more than one class (look at Example
below).

Syntax:
.class {
css declarations;
}

Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
color: red;
text-align: center;
}
p.large {
font-size: 30px;
}
</style>
</head>
<body>
<p class="center large"> Skywin IT Academy</p>
</body>
</html>

ID:
- The #id selector styles the element with the specified id.

Syntax:
#id {
css declarations;
}

Example:
<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
font-size: 25px;
color: blue;
}
</style>
</head>
<body>
<p id="firstname"> Skywin IT Academy</p>
</body>
</html>

CSS Comments:
- Comments are used to explain the code, and may help when you edit the source
code at a later date.
- Comments are ignored by browsers.
- A CSS comment is placed inside the <style> element, and starts with /* and ends
with */

Syntax:
/* This is CSS Comment Text */

CSS Padding:
- An element's padding is the space between its content and its border.
- Negative values are not allowed.
- This property can have from one to four values.
● If the padding property has four values:
padding: 10px 5px 15px 20px;
- top padding is 10px
- right padding is 5px
- bottom padding is 15px
- left padding is 20px
● If the padding property has three values:
padding: 10px 5px 15px;
- top padding is 10px
- right and left padding are 5px
- bottom padding is 15px
● If the padding property has two values:
padding: 10px 5px;
- top and bottom padding are 10px
- right and left padding are 5px
● If the padding property has one value:
padding: 10px;
- all four paddings are 10px
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
Syntax:
Padding: length;
- length - specifies a padding in px, pt, cm, etc.
- % - specifies a padding in % of the width of the containing element.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
p{
padding: 70px;
}
</style>
</head>
<body>
<p> This element has a padding of 70px.</p>
</body>
</html>

CSS Margins:
- Margins are used to create space around elements, outside of any defined
borders.
- Negative values are allowed.
- This property can have from one to four values.
● If the margin has four values:
margin: 10px 5px 15px 20px;
- top margin is 10px
- right margin is 5px
- bottom margin is 15px
- left margin is 20px
● If the margin property has three values:
margin: 10px 5px 15px;
- top margin is 10px
- right and left margin are 5px
- bottom margin is 15px
● If the margin property has two values:
margin: 10px 5px;
- top and bottom margin are 10px
- right and left margin are 5px
● If the margin property has one value:
margin: 10px;
- all four margin are 10px
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

Syntax:
margin: length | auto;
- length - specifies a padding in px, pt, cm, etc.
- % - specifies a padding in % of the width of the containing element.
- Auto - The browser calculates a margin

Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
p{
margin: 30px;
}
</style>
</head>
<body>
<p>
This element has a margin of 30px.
</p>
</body>
</html>
CSS Text:
- The CSS text properties allow you to change the appearance of text.
- It is possible to change the color of text, increase or decrease the space between
characters in a text, align a text, decorate a text and more.
- Text properties:
1. Color Property
2. Text-align Property
3. Text-decoration Property
4. Text-transform Property
5. Word-spacing Property
6. Letter-spacing Property

1. Color:
- The color property specifies the color of text.

Syntax:
Color: color name;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
h1 {
color: #555555;
}
</style>
</head>
<body>
<h1>Skywin IT Academy</h1>
<p>We provide IT training to students in various
technologies by experts who have real-time industry
knowledge so that candidates can start their career
and be in agree with the industry.</p>
</body>
</html>

Output:

2. Text-align:
- The text-align property specifies the horizontal alignment of text in an
element.
-
Syntax:
text-align: left | center |right | justify ;

3. Text-decoration:
- Text-decoration property takes underline, overline, line-through
values to decorate the text in different ways.

Syntax:
text-decoration: none | overline | line-through |underline;

Value Description Example

none It will not give any decoration to


the text. It is just like a normal text.

overline It will give a line on top of the text


with a 1px size.

line-through It will give the line from the middle


of the text with 1px size.

underline It will give a line at the bottom of


the text with a 1px size.

4. Text-transform:
- The text-transform property controls the capitalization of text.

Syntax:
transform: uppercase | lowercase | capitalize | none;

Value Description Example

uppercase Transforms all characters to SKYWIN IT ACADEMY


uppercase.

lowercase Transforms all characters to skywin it academy


lowercase.

capitalize Transforms the first character in Skywin It Academy


each word to uppercase.

none Produces no capitalization effect at Normal Text


all.

5. Word-spacing:
- The word-spacing property increases or decreases the white space
between words.

Syntax:
Word-spacing: normal | length;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.normal {
word-spacing: normal;
}

.length {
word-spacing: 5px;
}
</style>
</head>
<body>
<p class="normal"> Skywin IT Academy (normal) </p>
<p class="length"> Skywin IT Academy </p>
</body>
</html>

Output:

6. Letter-spacing:
- The letter-spacing property increases or decreases the space
between characters in a text.

Syntax:
Letter-spacing: normal | length;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.normal {
letter-spacing: normal;
}

.length {
letter-spacing: 5px;
}
</style>
</head>
<body>
<p class="normal"> Skywin IT Academy (normal) </p>
<p class="length"> Skywin IT Academy </p>
</body>
</html>

Output:

CSS Fonts:
- The CSS font properties allow you to change the font family, boldness, size & the
style of a text.
- Fonts properties:
1. Font-family Property
2. Font-style Property
3. Font-weight Property
4. Font-size Property
5. Font-variant Property

1. Font-family:
- The font-family property specifies the font for an element.
- There are 2 types of font families which you can use

● Specific Font-Family – This is a specific type of font like Arial,


Verdana, Tahoma, and Calibri.
● Generic Font-Family – This is a General Font and almost all
browsers support this generic font family. Example: serif,
Sans-serif etc.

Syntax:
font-family: family-name|generic-family;

2. Font-style:
- The font-style property specifies the font style for a text.
- This property has three values:

● normal - The text is shown normally.


● italic - The text is shown in italics.
● oblique - The text is "leaning" (oblique is very similar to italic,
but less supported).
Syntax:
font-style: normal | italic | oblique;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1> The Font-Style Property. </h1>
<p class="normal"> This is a normal Style. </p>
<p class="italic"> This is an italic Style. </p>
<p class="oblique"> This is an oblique Style. </p>
</body>
</html>

Output:

3. Font-weight:
- The font-weight property sets how thick or thin characters in text
should be displayed.

Syntax:
font-weight: normal | bold | bolder | lighter | number;

Value Description
normal Defines normal characters. This is default, It is equal to
the number value 400.

bold Defines thick characters, it is equal to the number value


700.

bolder Defines thicker characters.

lighter Defines lighter characters.

100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ultra Bold

initial This sets the font-weight to the initial (default) value.

inherit This sets the font-weight equal to the value inherited


from its parent element.

4. Font-size:
- The font-size property sets the size of the text.
- To allow users to resize the text (in the browser menu), many
developers use em instead of pixels.
Syntax:
font-size: (value)px;

5. Font-variant:
- The font-variant property is used to convert all lowercase letters into
uppercase letters. But the converted upper letters appear too small
font-size than the original uppercase letters.
Syntax:
font-variant: normal|small-caps;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small-caps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>The Font-variant Property.</h1>
<p class="normal"> This is a normal Style. </p>
<p class="small-caps"> This is a Small-caps Style. </p>
</body>
</html>

Output:

CSS Backgrounds:
- The CSS background properties are used to add background effects for elements.
- Background properties:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
6. background-size

1. Background-color:
- The background-color property sets the background color of an element.

Syntax:
background-color: color | transparent;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: Orange; } OR
body { background-color: #ff9900; } OR
body { background-color: rgb(255,130,255; } OR
</style>
</head>
<body>
<h1> The background-color Property. </h1>
<p> The background color can be specified with a color name. </p>
</body>
</html>

Output:

2. Background-image:
- The background-image property sets one or more background images for
an element.
- By default, a background-image is placed at the top-left corner of an
element, and repeated both vertically and horizontally.

Syntax:
background-image: URL | none;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-image: url(“nature.jpg”); }
</style>
</head>
<body>
<h1> The background-image Property </h1>
<p> Hello World! </p>
</body>
</html>

Output:

3. Background-repeat Property:
- The background-repeat property sets if/how a background image will be
repeated.
- By default, a background-image is repeated both vertically and horizontally.

Syntax:
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
Value Description

repeat The background image is repeated both vertically and


horizontally

repeat-x The background image is repeated only horizontally

repeat-y The background image is repeated only vertically

no-repeat The background-image is not repeated. The image will only


be shown once

Output:

4. Background-attachment:
- The background-attachment property sets whether a background image
scrolls with the rest of the page, or is fixed.

Syntax:
background-attachment: scroll | fixed;

Value Description

scroll The background image will scroll with the page. This is
the default.

fixed The background image will not scroll with the page.
5. Background-position:
- The background-position property sets the starting position of a
background image.

Syntax:
background-position: value;

Value Description

left top
left center
left bottom
right top
right center If you only specify one keyword, the other value will be
right bottom "center"
center top
center center
center
bottom

x% y% The first value is the horizontal position and the second


value is the vertical. The top left corner is 0% 0%.

xpos ypos The first value xpos is the horizontal position and the
second value ypos is the vertical. The top left corner is 0 0.

Output:
6. Background-size:
- The background-size CSS property is used to set the size of a background
image of an element.

Syntax:
background-size: cover | contain;

Value Description

cover This value is used to resize the background image to cover the
entire container.

contain Without stretching or cropping, it resizes the background


image to ensure the image is completely visible.
CSS Borders:

- The CSS border properties allow you to specify the style, width, and color of an
element's border.
- Border properties:
● Border Style
● Border-width Property
● Border-color Property
● Shorthand border Property
● Border Sides Property
● Rounded border Property

Border Style:
- The border-style property specifies what kind of border to display.
- The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
- Note: None of the OTHER CSS border properties will have ANY effect unless
the border-style property is set!

● dotted - Defines a dotted border


● dashed - Defines a dashed border
● solid - Defines a solid border
● double - Defines a double border
● groove - Defines a 3D grooved border. The effect depends on the
border-color value
● ridge - Defines a 3D ridged border. The effect depends on the
border-color value
● inset - Defines a 3D inset border. The effect depends on the
border-color value
● outset - Defines a 3D outset border. The effect depends on the
border-color value
● none - Defines no border
● hidden - Defines a hidden border

Output:
Border-width:
- The border-width property specifies the width of the four borders.
- The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of
the three predefined values: thin, medium, or thick
- The border-width property can have from one to four values (for the top border,
right border, bottom border, and the left border)
Output:

CSS box-shadow:
- The box-shadow property in CSS is used to give a shadow-like effect to the frames
of an element.
- The multiple effects can be applied to the element’s frame which is separated by
the comma.
- The box-shadow can be described using X and Y offsets relative to the element,
blur and spread radius, and color.
- Default Value : Its default value is none.

Syntax:
box-shadow: h-offset v-offset blur spread color|none|inset|initial|inherit;

Value Description

none Default value. No shadow is displayed

h-offset Required. The horizontal offset of the shadow. A positive


value puts the shadow on the right side of the box, a
negative value puts the shadow on the left side of the box

v-offset Required. The vertical offset of the shadow. A positive


value puts the shadow below the box, a negative value
puts the shadow above the box

blur Optional. The blur radius. The higher the number, the
more blurred the shadow will be

spread Optional. The spread radius. A positive value increases the


size of the shadow, a negative value decreases the size of
the shadow

inset Optional. Changes the shadow from an outer shadow


(outset) to an inner shadow

initial Set this property to its default value.

inherit Inherits this property from its parent element.


Example:
<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
width: 300px;
border: 1px solid;
padding: 10px;
margin-bottom: 50px;
box-shadow: 10px 10px black;
}
.example2 {
width: 300px;
border: 1px solid;
padding: 10px;
margin-bottom: 50px;
box-shadow: 10px 10px 8px green;
}
.example3 {
width: 300px;
border: 1px solid;
padding: 10px;
margin-bottom: 50px;
box-shadow: 10px 10px 8px 10px red;
}
</style>
</head>
<body>
<div class="example1"> Skywin IT Academy</div>
<div class="example2"> Skywin IT Academy</div>
<div class="example3"> Skywin IT Academy</div>
</body>
</html>

Output:
CSS text-shadow:
- The text-shadow property in CSS is used to add shadows to the text.
- This property accepts a list of shadows that are to be applied to the text,
separated by the comma.
- Default Value : Its default value is none.

Syntax:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Value Description

h-shadow Required. The position of the horizontal shadow. Negative


values are allowed

v-shadow Required. The position of the vertical shadow. Negative


values are allowed

blur-radius Optional. The blur radius. Default value is 0


color Optional. The color of the shadow.

none Default value. No shadow

initial Set this property to its default value.

inherit Inherits this property from its parent element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
text-shadow: 5px 5px red;
}
.example2 {
text-shadow: 5px 5px 10px red;
}
</style>
</head>
<body>
<h1 class="example1"> Skywin IT Academy</h1>
<h1 class="example2"> Skywin IT Academy</h1>
</body>
</html>

Output:
CSS Opacity:
- The CSS opacity property is used to specify the transparency of an element.

Syntax:
opacity: number|initial|inherit;

Value Description

number Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully
opaque)

initial Set this property to its default value.

inherit Inherits this property from its parent element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
padding: 10px;
margin-bottom: 50px;
background: rgb(76, 175, 80);
}

.first {
opacity: 0.6;
}
.second {
opacity: 0.3;
}
.third {
opacity: 0.1;
}

.example1 {
background: rgba(76, 175, 80, 0.6);
}
.example2 {
background: rgba(76, 175, 80, 0.3);
}
.example3 {
background: rgba(76, 175, 80, 0.1);
}
</style>
</head>
<body>
<h2>Transparent Boxes</h2>
<div><p> Skywin IT Academy </p></div>
<div class="first"><p> Skywin IT Academy </p></div>
<div class="second"><p> Skywin IT Academy </p></div>
<div class="third"><p> Skywin IT Academy </p></div>

<h2>Using RGBA color values:</h2>


<div><p> Skywin IT Academy </p></div>
<div class="example1"><p> Skywin IT Academy </p></div>
<div class="example2"><p> Skywin IT Academy </p></div>
<div class="example3"><p> Skywin IT Academy </p></div>
</body>
</html>

Output:
CSS Box Sizing:
- The CSS box-sizing property is used to specify how to calculate the total height
and width of an element.
- It controls the size of an element with a specified height and width.
- It allows you to include the padding and border within the total height and width
of the element.
- Without CSS box-sizing:
By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
- It means if we create a box of some specific height and width and then add
padding and border to it, it will look wider than the actual width.

Syntax:
box-sizing: content-box|border-box;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid red;
padding: 30px;
margin-bottom: 50px;
}
.div2 {
width: 300px;
height: 100px;
border: 1px solid red;
padding: 30px;
margin-bottom: 50px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1"> Skywin IT Academy</div>
<div class="div2"> Skywin IT Academy</div>
</body>
</html>

Output:

CSS important property:


- The !important rule in CSS is used to add more importance to a property/value
than normal.
- In fact, if you use the !important rule, it will override ALL previous styling rules for
that specific property on that element!

Syntax:
element {
property: value !important;
}

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background-color: blue;
}
.div2 {
background-color: green;
}

div {
width: 500px;
padding: 10px;
margin-bottom: 15px;
background-color: red !important;
}

</style>
</head>
<body>
<div> Skywin IT Academy</div>
<div class="div1"> Skywin IT Academy</div>
<div class="div2"> Skywin IT Academy</div>
</body>
</html>
Output:

CSS Float:
- The float property is used to change the normal flow of an element.
- It defines how an element should float and place an element on its container’s
right or left side.
- Note:The default value of the float property is none and it won’t work with the
absolutely positioned element.

Syntax:
float: none | left | right | inherit | initial;

Value Description

none It is the default value of a float property. The element must


not float.

left The element floats to the left of its container.

right The element floats to the right of its container.

Inherit Property must be inherited from its parent element.

initial Property is set to its default value.

Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
margin-top: 0;
}

img{
width: 200px;
float: none;
}

div {
width: 500px;
height: 350px;
border: 2px solid black;
padding: 10px;
}
p{
text-align: justify;
}
</style>
</head>
<body>

<div>
<h1>Float None</h1>
<img src="Skywin IT Academy logo_Small.png" alt="Skywin logo">
<p>Skywin IT Academy is a leading IT training institute in Surat. We
provide best training services and real-time learning experience to
deliver integrated learning solutions. We have been delivering quality
results over the years. In Skywin IT Academy real time exposure is
given to the candidates so that they learn the IT courses effectively
and are job ready right from day one. We have a team of industry
experts and experienced professional trainers who have exposure to
multiple projects and also they give lifetime support to students. We
offer certificate courses. Inclusive of practical explanation learning,
the long-term courses feature subjects such as advanced web design,
advanced web development, ecommerce development, full stack
development, SEO & digital marketing and advanced UI/UX design.
</p>
</div>

</body>
</html>

Output:

Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
margin-top: 0;
}

img{
width: 200px;
float: left;
margin-right: 15px;
}

div {
width: 500px;
height: 330px;
border: 2px solid black;
padding: 10px;
}
p{
text-align: justify;
}
</style>
</head>
<body>

<div>
<h1>Float Left</h1>
<img src="Skywin IT Academy logo_Small.png" alt="Skywin logo">
<p>Skywin IT Academy is a leading IT training institute in Surat. We
provide best training services and real-time learning experience to
deliver integrated learning solutions. We have been delivering quality
results over the years. In Skywin IT Academy real time exposure is
given to the candidates so that they learn the IT courses effectively
and are job ready right from day one. We have a team of industry
experts and experienced professional trainers who have exposure to
multiple projects and also they give lifetime support to students. We
offer certificate courses. Inclusive of practical explanation learning,
the long-term courses feature subjects such as advanced web design,
advanced web development, ecommerce development, full stack
development, SEO & digital marketing and advanced UI/UX design.
</p>
</div>

</body>
</html>
Output:

Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
margin-top: 0;
}

img{
width: 200px;
float: right;
margin-left: 15px;
}

div {
width: 500px;
height: 330px;
border: 2px solid black;
padding: 10px;
}
p{
text-align: justify;
}
</style>
</head>
<body>
<div>
<h1>Float Right</h1>
<img src="Skywin IT Academy logo_Small.png" alt="Skywin logo">
<p>Skywin IT Academy is a leading IT training institute in Surat. We
provide best training services and real-time learning experience to
deliver integrated learning solutions. We have been delivering quality
results over the years. In Skywin IT Academy real time exposure is
given to the candidates so that they learn the IT courses effectively
and are job ready right from day one. We have a team of industry
experts and experienced professional trainers who have exposure to
multiple projects and also they give lifetime support to students. We
offer certificate courses. Inclusive of practical explanation learning,
the long-term courses feature subjects such as advanced web design,
advanced web development, ecommerce development, full stack
development, SEO & digital marketing and advanced UI/UX design.
</p>
</div>
</body>
</html>

Output:
CSS Gradients:
- The Gradient in CSS is a special type of image that is made up of progressive
& smooth transition between two or more colors.
- CSS defines three types of gradients:
● Linear Gradients (goes down/up/left/right/diagonally)
● Radial Gradients (defined by their center)
● Conic Gradients (rotated around a center point)

Linear Gradients:
- It includes the smooth color transitions to going up, down, left, right, and
diagonally.
- The minimum two-color required to create a linear gradient. More than two
color elements can be possible in linear gradients.
- The starting point and the direction are needed for the gradient effect.

Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

The linear-gradient can be implemented in the following ways:

Top to Bottom: to bottom


Example: background-image: linear-gradient(to bottom, red, yellow);
Bottom to top: to top
Example: background-image: linear-gradient(to top, red, yellow);
Left to right: to right
Example: background-image: linear-gradient(to right, red, yellow);
Right to left: to left
Example: background-image: linear-gradient(to left, red, yellow);
Diagonal: top-left to bottom-right: to bottom right
Example: background-image: linear-gradient(to bottom right, red, yellow);
Angles: If you want more control over the direction of the gradient, you can define
an angle, instead of the predefined directions (to bottom, to top, to right, to left,
to bottom right, etc.). A value of 0deg is equivalent to "to top''. A value of 90deg is
equivalent to "to right". A value of 180deg is equivalent to "to bottom". A value
of 270deg is equivalent to "to left ''.
Example: background-image: linear-gradient(180deg, red, yellow);
Repeating Linear Gradient: CSS allows the user to implement multiple linear
gradients using a single function repeating-linear-gradient(). The image here
contains 3 colors in each transition with some percentage value.
Example: background-image: repeating-linear-gradient(red, yellow 10%, green
20%);

Radial Gradients:
- A radial gradient differs from a linear gradient. It starts at a single point and
emanates outward.
Syntax:
background-image: radial-gradient(shape, start-color, ..., last-color);

The radial-gradient can be implemented in the following ways:

Radial Gradient - Evenly Spaced Color Stops (this is default):

Example: background-image: radial-gradient(red, yellow, green);

Radial Gradient - Differently Spaced Color Stops:

Example: background-image: radial-gradient(red 5%, yellow 15%, green 60%);

Set Shape:

The shape parameter defines the shape. It can take the value circle or ellipse. The
default value is ellipse.

Example: background-image: radial-gradient(circle, red, yellow, green);


Repeating Radial Gradient:
Example: background-image: repeating-radial-gradient(circle, red 5%, yellow 10%,
green 15%);

Conic Gradients:
- A conic gradient is a gradient with color transitions rotated around a center
point.
- To create a conic gradient you must define at least two colors.
- By default, angle is 0deg and position is center.
- If no degree is specified, the colors will be spread equally around the center
point.

Syntax:
background-image: conic-gradient([from angle] [at position,] color [degree], color
[degree], ...);

The conic-gradient can be implemented in the following ways:

Degrees:
Example-1: background-image: conic-gradient(red 45deg, yellow 90deg, green
210deg);
Example-2: background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg,
yellow 180deg, green 180deg, green 270deg, blue 270deg);
Specified From Angle:
The [from angle] specifies an angle that the entire conic gradient is rotated by.
Example: background-image: conic-gradient(from 90deg, red, yellow, green);
Specified Center Position:
Example: background-image: conic-gradient(at 60% 45%, red, yellow, green);
Repeating a Conic Gradient:
Example: background-image: repeating-conic-gradient(red 10%, yellow 20%);

CSS Pseudo-elements:
- A CSS pseudo-element is used to style specified parts of an element.
- For example, it can be used to:
● Style the first letter, or line, of an element
● Insert content before, or after, the content of an element

Syntax:
selector::pseudo-element {
property: value;
}

The ::first-letter Pseudo-element:


- The ::first-letter pseudo-element is used to add a special style to the first
letter of a text.
- The following properties apply to the ::first-letter pseudo- element:
● font properties
● color properties
● background properties
● margin properties
● padding properties
● border properties
● text-decoration
● vertical-align (only if "float" is "none")
● text-transform
● line-height
● float
● clear

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
p::first-letter {
color: #ff0000;
font-size: 40px;
}
</style>
</head>
<body>

<p>Skywin IT Academy is the best IT institute in Surat. Learn to code,


web design, and digital marketing from experienced IT trainers. 100%
job placement.</p>

</body>
</html>

Output:
The ::first-line Pseudo-element:
- The ::first-line pseudo-element is used to add a special style to the first line
of a text.
- The following properties apply to the ::first-line pseudo-element:
● font properties
● color properties
● background properties
● word-spacing
● letter-spacing
● text-decoration
● vertical-align
● text-transform
● line-height
● clear

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>

<p>Skywin IT Academy is a leading IT training institute in Surat. We


provide best training services and real-time learning experience to
deliver integrated learning solutions. We have been delivering quality
results over the years. In Skywin IT Academy real time exposure is
given to the candidates so that they learn the IT courses effectively
and are job ready right from day one. We have a team of industry
experts and experienced professional trainers who have exposure to
multiple projects and also they give lifetime support to students. We
offer certificate courses. Inclusive of practical explanation learning,
the long-term courses feature subjects such as advanced web design,
advanced web development, ecommerce development, full stack
development, SEO & digital marketing and advanced UI/UX design.
The course schedule is designed to provide quality and dynamic IT
training to young IT minds in an effort to guide them in their nascent
careers and huge placement support with Top companies.</p>

</body>
</html>

Output:

Pseudo-elements and HTML Classes:


Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>

<p class="intro">Skywin IT Academy</p>


<p>Skywin IT Academy is the best IT institute in Surat. Learn to code,
web design, and digital marketing from experienced IT trainers. 100%
job placement.</p>

</body>
</html>

Output:

Multiple Pseudo-elements:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
</style>
</head>
<body>

<p>Skywin IT Academy is a leading IT training institute in Surat. We


provide best training services and real-time learning experience to
deliver integrated learning solutions. We have been delivering quality
results over the years. In Skywin IT Academy real time exposure is
given to the candidates so that they learn the IT courses effectively
and are job ready right from day one. We have a team of industry
experts and experienced professional trainers who have exposure to
multiple projects and also they give lifetime support to students. We
offer certificate courses. Inclusive of practical explanation learning,
the long-term courses feature subjects such as advanced web design,
advanced web development, ecommerce development, full stack
development, SEO & digital marketing and advanced UI/UX design.
The course schedule is designed to provide quality and dynamic IT
training to young IT minds in an effort to guide them in their nascent
careers and huge placement support with Top companies.</p>

</body>
</html>

Output:
The ::selection Pseudo-element:
- The ::selection pseudo-element matches the portion of an element that is
selected by a user.
- The following CSS properties can be applied to ::selection: color,
background.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>

<h1>Skywin</h1>
<p>Skywin IT Academy is the best IT institute in Surat. Learn to code,
web design, and digital marketing from experienced IT trainers. 100%
job placement.</p>
<h1>Skywin IT Academy</h1>

</body>
</html>

Output:

The ::marker Pseudo-element:


- The ::marker pseudo-element selects the markers of list items.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
::marker {
color: red;
font-size: 23px;
}
</style>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Output:

The ::before Pseudo-element:


- The ::before pseudo-element can be used to insert some content before the
content of an element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
h1::before {
content: url(smily.png);
/* content: “Hello ”; */
/* content: “\f015”; */
/* font-family: "Font Awesome 6 Free"; */
}
</style>
</head>
<body>

<h1>Skywin</h1>

<p>Skywin IT Academy is the best IT institute in Surat. Learn to code,


web design, and digital marketing from experienced IT trainers. 100%
job placement.</p>

<h1>Skywin IT Academy</h1>

</body>
</html>

Output:

The ::after Pseudo-element:


- The ::after pseudo-element can be used to insert some content after the
content of an element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
h1::after {
content: url(smily.png);
/* content: “ In Surat”; */
/* content: “\f015”; */
/* font-family: "Font Awesome 6 Free"; */
}
</style>
</head>
<body>

<h1>Skywin</h1>

<p>Skywin IT Academy is the best IT institute in Surat. Learn to code,


web design, and digital marketing from experienced IT trainers. 100%
job placement.</p>

<h1>Skywin IT Academy</h1>

</body>
</html>

Output:

CSS Pseudo-classes:
- A pseudo-class is used to define a special state of an element.

Syntax:
selector:pseudo-class {
property: value;
}
The :first-child Pseudo-class:
- The :first-child pseudo-class matches a specified element that is the first
child of another element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>

<div>
<p>Skywin IT Academy</p>
<p>Institute in Surat</p>
</div>

</body>
</html>

The :last-child Pseudo-class:


- The :last-child selector matches every element that is the last child of its
parent.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
p:last-child {
background: #ff0000;
}
</style>
</head>
<body>

<div>
<p>Skywin IT Academy</p>
<p>Institute in Surat</p>
<p>Best Institute in Surat</p>
<p>IT Institute</p>
</div>

</body>
</html>

The :nth-child() Pseudo-class:


- The :nth-child(n) selector matches every element that is the nth child of its
parent.
- n can be a number, a keyword (odd or even).

Example:
<!DOCTYPE html>
<html>
<head>
<style>
/* Selects the second element of div siblings */
div:nth-child(2) {
background: red;
}

/* Selects the second li element in a list */


li:nth-child(2) {
background: light green;
}

/* Selects every third element among any group of siblings */


:nth-child(3) {
background: yellow;
}
</style>
</head>
<body>

<div>
<p>Skywin IT Academy</p>
</div>

<div>
<p>Skywin IT Academy</p>
</div>

<div>
<p>Skywin IT Academy</p>
</div>

<ul>
<li>Skywin IT Academy</li>
<li>Institute in Surat</li>
<li>Best Institute in Surat</li>
<li>IT Institute</li>
<li>IT Institute in Surat</li>
</ul>

</body>
</html>

Anchor Pseudo-classes:
- Links can be displayed in different ways
- Note:
● a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective! a:active MUST come after
a:hover in the CSS definition in order to be effective!
● Pseudo-class names are not case-sensitive.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */


a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}
</style>
</head>
<body>

<h2>Skywin IT Academy</h2>

<p><a href="https://www.skywinitacademy.com/"
target="_blank">Skywin</a></p>
<p>Skywin IT Academy is a leading IT training institute in Surat.</p>

<p>We provide best training services and real-time learning


experience to deliver integrated learning solutions. We have been
delivering quality results over the years.</p>
</body>
</html>

CSS :focus Selector:


- The :focus selector is used to select the element that has focus.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: yellow;
}
</style>
</head>
<body>

<h1>Skywin IT Academy</h1>

<p>Skywin IT Academy is a leading IT training institute in Surat.</p>

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

</body>
</html>

CSS Transitions:
- CSS transitions allow you to change property values smoothly, over a given
duration.
- Note: If the duration part is not specified, the transition will have no effect,
because the default value is 0.
- Transitions properties:
1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
5. transition

Transition-property:
- Specifies the name or names of the CSS properties to which transitions
should be applied.

Syntax:
transition-property: name of css property | all;

Transition-duration:
- Specifies the duration over which transitions should occur.
- You can specify a single duration that applies to all properties during the
transition, or multiple values to allow each property to transition over a
different period of time.

Syntax:
transition-duration: time duration(in second);

Transition-timing-function:
- The transition-timing-function property specifies the speed curve of the transition
effect.
- The transition-timing-function property can have the following values:
● ease - specifies a transition effect with a slow start, then fast, then end
slowly (this is default)
● linear - specifies a transition effect with the same speed from start to end
● ease-in - specifies a transition effect with a slow start
● ease-out - specifies a transition effect with a slow end
● ease-in-out - specifies a transition effect with a slow start and end
● cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier
function
For more information: Cubic-bezier

Syntax:
transition-timing-function: linear |ease| ease-in | ease-out | ease-in-out |
cubic-bezier;

Transition-delay:
- Defines how long to wait between the time a property is changed and the
transition actually begins.

Syntax:
transition-delay: time duration(in second);

Transition:
- The transition shorthand CSS syntax is written as follows:

Syntax:
transition: property duration timing-function delay;

Example:
transition: all 2s ease .4s;

CSS 2D Transforms:
- CSS transforms allow you to move, rotate, scale, and skew elements.
- Note: -ms-transform: scale(2.5,2); / IE 9 /
-webkit-transform: scale(2.5,2); / Safari /
transform: scale(2.5,2); / Standard syntax /
- 2D Transforms Methods:
1. translate()
2. rotate()
3. scale()
4. skew()

Translate() Method:
- The translate() method moves an element from its current position
(according to the parameters given for the X-axis and the Y-axis).

Syntax:
transform: translate(Value(px), Value(px));
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-div {
background-color: burlywood;
width: 500px;
height: 500px;
margin: 50px auto;
}
.child-div {
background-color: coral;
width: 150px;
height: 150px;
transition-duration: .3s;
}
.child-div:hover {
transform: translate(50px, 100px);
}

</style>
</head>
<body>
<div class="main-div">
<div class="child-div"></div>
</div>
</body>
</html>

Rotate() Method:
- The rotate() method rotates an element clockwise or counter-clockwise
according to a given degree.

Syntax:
transform: rotate(Value(deg));
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-div {
background-color: burlywood;
width: 500px;
height: 500px;
margin: 50px auto;
}
.child-div {
background-color: coral;
width: 150px;
height: 150px;
transition-duration: .3s;
}
.child-div:hover {
transform: rotate(20deg);
}

</style>
</head>
<body>
<div class="main-div">
<div class="child-div"></div>
</div>
</body>
</html>

Scale() Method:
- The scale() method increases or decreases the size of an element (according
to the parameters given for the width and height).

Syntax:
transform: scale(Value, Value);
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-div {
background-color: burlywood;
width: 500px;
height: 500px;
margin: 50px auto;
}
.child-div {
background-color: coral;
width: 150px;
height: 150px;
transition-duration: .3s;
}
.child-div:hover {
transform: scale(2, 0.5);
}

</style>
</head>
<body>
<div class="main-div">
<div class="child-div"></div>
</div>
</body>
</html>

Skew() Method:
- The skew() method skews an element along the X and Y-axis by the given
angles.

Syntax:
transform: skew(Value(deg), Value(deg));
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-div {
background-color: burlywood;
width: 500px;
height: 500px;
margin: 50px auto;
}
.child-div {
background-color: coral;
width: 150px;
height: 150px;
transition-duration: .3s;
}
.child-div:hover {
transform: skew(20deg, 10deg);
}

</style>
</head>
<body>
<div class="main-div">
<div class="child-div"></div>
</div>
</body>
</html>

CSS Animations:
- An animation lets an element gradually change from one style to another.
- You can change as many CSS properties you want, as many times as you
want.
- To use CSS animation, you must first specify some keyframes for the
animation.
- Keyframes hold what styles the element will have at certain times.
- Animation Property:
● @keyframes
● animation-name
● animation-duration
● animation-delay
● animation-iteration-count
● animation-direction
● animation-timing-function
● animation

@keyframes:
- When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.

Syntax:
@keyframes animation-name {keyframes-selector {css-styles;}};

Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
.main-div {
background-color: burlywood;
width: 500px;
height: 500px;
margin: 50px auto;
animation-name: demo;
animation-duration: 1s;
}
@keyframes demo {
from {
border-radius: 0%;
}
to {
border-radius: 50%;
}
}

</style>
</head>
<body>
<div class="main-div"></div>
</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
.main-div {
background-color: burlywood;
width: 500px;
height: 500px;
margin: 50px auto;
animation-name: demo;
animation-duration: 5s;
}
@keyframes demo {
0%{
border-radius: 0%;
background-color: burlywood
}
20%{
border-radius: 10%;
background-color: coral
}
40%{
border-radius: 20%;
background-color: red
}
60%{
border-radius: 30%;
background-color: blue
}
80%{
border-radius: 40%;
background-color: green
}
100%{
border-radius: 50%;
background-color: orange
}
}

</style>
</head>
<body>
<div class="main-div"></div>
</body>
</html>

Animation-name:
- To get an animation to work, you must bind the animation to an element.

Syntax:
animation-name: name;

Animation-duration:
- The animation-duration property defines how long an animation should
take to complete.
- If the animation-duration property is not specified, no animation will occur,
because the default value is 0s (0 seconds).

Syntax:
animation-duration: time duration(in second);
Animation-delay:
- The animation-delay property specifies a delay for the start of an animation.

Syntax:
animation-delay: time duration(in second);

Animation-iteration-count:
- The animation-iteration-count property specifies the number of times an
animation should run.

Syntax:
animation-iteration-count: count;

Animation-direction:
- The animation-direction property specifies whether an animation should be
played forwards, backwards or in alternate cycles.
- The animation-direction property can have the following values:
● normal - The animation is played as normal (forwards). This is default
● reverse - The animation is played in reverse direction (backwards)
● alternate - The animation is played forwards first, then backwards
● alternate-reverse - The animation is played backwards first, then
forwards

Syntax:
animation-direction: normal | reverse | alternate | alternate-reverse;

Animation-timing-function:
- The animation-timing-function property specifies the speed curve of the
animation.
- The animation-timing-function property can have the following values:
● ease - Specifies an animation with a slow start, then fast, then end
slowly (this is default)
● linear - Specifies an animation with the same speed from start to end
● ease-in - Specifies an animation with a slow start
● ease-out - Specifies an animation with a slow end
● ease-in-out - Specifies an animation with a slow start and end
● cubic-bezier(n,n,n,n) - Lets you define your own values in a
cubic-bezier function
For more information: Cubic-bezier
Syntax:
animation-timing-function: linear |ease| ease-in | ease-out | ease-in-out
| cubic-bezier;

Animation:
- The animation property is a shorthand property for the animation-name,
animation-duration, animation-timing-function, animation-delay,
animation-iteration-count and animation-direction properties.

Syntax:
animation: animation-name | Animation-duration |
animation-timing-function | animation-delay | Animation-iteration-count |
animation-direction;

CSS position:
- The position CSS property sets how an element is positioned in a document.
- The top, right, bottom, and left properties determine the final location of
positioned elements.
- There are five different types of position property available in CSS:
● Static
● Fixed
● Sticky
● Relative
● Absolute
Static:
- This is a by default position for HTML elements.
- An element with position: static; is not positioned in any special way;
it is always positioned according to the normal flow of the page.
- It is not affected by the top, bottom, left and right properties.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
.static { width: 500px;
position: static;
border: 3px solid #cc0000; }
</style>
</head>
<body>
<div class="static">
Skywin IT Academy
</div>
</body>
</html>

Output:

Fixed:
- An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled.
- The top, right, bottom, and left properties are used to position the
element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
.fixed { width: 500px;
position: fixed;
bottom: 0px;
right: 0px;
border: 3px solid #cc0000; }
</style>
</head>
<body>
<h2>Skywin</h2>

<p>Skywin IT Academy is the best IT institute in Surat. Learn to code, web


design, and digital marketing from experienced IT trainers. 100% job
placement.</p>
<div class="fixed">
Skywin IT Academy
</div>
</body>
</html>

Output:
Sticky:
- An element with position: sticky; is positioned based on the user's
scroll position.
- Note: Specify at least one of top, right, bottom or left for sticky
positioning to work.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
.sticky { width: 500px;
position: sticky;
top: 0px;
padding: 5px;
background-color: #ffcccc;
border: 3px solid #cc0000; }
</style>
</head>
<body>
<h2>Skywin</h2>
<div class="sticky">
Skywin IT Academy
</div>
<p>Skywin IT Academy is the best IT institute in Surat. Learn to code,
web design, and digital marketing from experienced IT trainers. 100%
job placement.</p>
<p>Skywin IT Academy is the best IT institute in Surat. Learn to code,
web design, and digital marketing from experienced IT trainers. 100%
job placement.</p>
<p>Skywin IT Academy is the best IT institute in Surat. Learn to code,
web design, and digital marketing from experienced IT trainers. 100%
job placement.</p>
<p>Skywin IT Academy is the best IT institute in Surat. Learn to code,
web design, and digital marketing from experienced IT trainers. 100%
job placement.</p>....
</body>
</html>

Output:

Relative:
- An element with position: relative; is positioned relative to its normal
position.
- Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted away from
its normal position.
- Other content will not be adjusted to fit into any gap left by the
element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
.relative { width: 500px;
position: relative;
left: 50px;
border: 3px solid #cc0000; }
</style>
</head>
<body>
<div class="relative">
Skywin IT Academy
</div>
</body>
</html>

Output:

Absolute:
- An element with position: absolute; is used to position an element
relative to the first parent element that has a position other than
static.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #b3f0ff; }
.relative { width: 400px;
height: 200px;
position: relative;
border: 3px solid #cc0000; }
.absolute { width: 200px;
height: 100px;
position: absolute;
top: 80px;
right: 0px;
border: 3px solid #cc0000; }
</style>
</head>
<body>
<h2>Skywin</h2>

<p>Skywin IT Academy is the best IT institute in Surat. Learn to code,


web design, and digital marketing from experienced IT trainers. 100%
job placement.</p>
<div class="relative">
Skywin IT Academy
<div class="absolute">
In Surat
</div>
</div>
</body>
</html>

Output:
CSS Z-index:
- The z-index property specifies the stack order of an element.
- An element with greater stack order is always in front of an element with a
lower stack order.
- Note: z-index only works on positioned elements (position: absolute,
position: relative, position: fixed, or position: sticky) and flex items
(elements that are direct children of display:flex elements).

Syntax:
z-index: auto|number|initial|inherit;

● z-index: 1;
- The z-index value is relative to the other ones. The target element is
moved in front of its siblings.
● z-index: -1;
- You can use negative values. The target element is moved in behind
its siblings.

Value Description

auto Sets the stack order equal to its parents. This is default
number Sets the stack order of the element. Negative numbers are
allowed

initial Set this property to its default value.

inherit Inherits this property from its parent element.

CSS display Property:


- The display property specifies if/how an element is displayed.
- Every HTML element has a default display value depending on what type of
element it is.
- The default display value for most elements is block or inline.
- Display properties:
1. display: none;
2. display: inline;
3. display: block;
4. display: inline-block;
5. display: flex;

Syntax:
display: value;

Display: none:
- The "none" value totally removes the element from the page. It will
not take any space.
- display: none; is commonly used with JavaScript to hide and show
elements without deleting and recreating them.
- The <script> element uses display: none; as default.

Display: inline:
- The inline element takes the required width only.
- It doesn't force the line break so the flow of text doesn't break inline.
- The inline display property ignores the height and the width set by
the user.
- Inline Elements: An inline element does not start on a new line and
only takes up as much width as necessary.
Examples:
● <span>
● <a>
● <img>, etc..

Display: block:
- The CSS display block element takes as much horizontal space as they
can. Means the block element takes the full available width. They
make a line break before and after them.
- Block-level Elements: A block-level element always starts on a new
line and takes up the full width available (stretches out to the left and
right as far as it can).

Examples:
● <div>
● <h1> - <h6>
● <p>
● <form>
● <header>
● <footer>
● <section>

Display: inline-block:
- Compared to display: inline, the major difference is that display:
inline-block allows setting a width and height on the element.
- Also, with display: inline-block, the top and bottom margins/paddings
are respected, but with display: inline they are not.
- Compared to display: block, the major difference is that display:
inline-block does not add a line-break after the element, so the
element can sit next to other elements.
- Note: When using the inline-block property, the use of the
vertical-align property must be enforced.

Display: flex:
- A display of flex gives you access to the Flex layout system, which
simplifies how we design and layout our web pages.
- It is used to display the element as a block-level flex container. The
items start from the start edge of the main axis. The default
flex-direction is row.

CSS Flex Parent Element (Container):


- The flex container properties are:
● flex-direction
● flex-wrap
● flex-flow
● justify-content
● align-items
● align-content

Flex-direction Property:
- The flex-direction property defines in which direction the container wants
to stack the flex items.

Syntax:
flex-direction: column | column-reverse | row | row-reverse;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-flex {
background-color: burlywood;
display: flex;
flex-direction: row;
}
.main-flex .child-flex {
background-color: coral;
margin: 20px;
padding: 20px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="child-flex"> One </div>
<div class="child-flex"> Two</div>
<div class="child-flex"> Three </div>
</div>
</body>
</html>

Output:

Flex-wrap Property:
- it specifies whether the flex items should wrap or not, if there is not enough
room for them on one flex line.

Syntax:
flex-wrap: wrap| nowrap(this is default) | wrap-reverse;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-flex {
background-color: burlywood;
display: flex;
flex-wrap: wrap;
}
.main-flex .child-flex {
background-color: coral;
margin: 20px;
padding: 20px;
width: 500px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="child-flex"> One </div>
<div class="child-flex"> Two</div>
<div class="child-flex"> Three </div>
<div class="child-flex"> Four</div>
</div>
</body>
</html>

Output:

Flex-flow Property:
- It specifies a shorthand property for flex-direction and flex-wrap.

Syntax:
flex-flow: flex-direction flex-wrap;

Justify-content Property:
- it is used to align the flex items horizontally when the items do not use all
available space on the main-axis.

Syntax:
justify-content: center| flex-start(this is default) | flex-end |
space-around | space-between;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-flex {
background-color: burlywood;
display: flex;
justify-content: center;
}
.main-flex .child-flex {
background-color: coral;
margin: 20px;
padding: 20px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="child-flex"> One </div>
<div class="child-flex"> Two</div>
<div class="child-flex"> Three </div>
</div>
</body>
</html>

Output:

Align-items Property:
- It is used to align the flex items vertically when the items do not use all
available space on the cross-axis.

Syntax:
align-items: center| flex-start | flex-end | stretch (this is default);

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-flex {
background-color: burlywood;
display: flex;
height: 500px;
flex-wrap: wrap;
align-items: center;

}
.main-flex .child-flex {
background-color: coral;
margin: 20px;
padding: 20px;
width:500px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="child-flex"> One </div>
<div class="child-flex"> Two</div>
<div class="child-flex"> Three </div>
<div class="child-flex"> Four </div>
</div>
</body>
</html>

Output:

Align-content Property:
- It is used to modify the behavior of the flex-wrap property. it is similar to
align-items, but instead of aligning flex items, it aligns flex lines.

Syntax:
align-content: center| flex-start | flexs-end | stretch (this is default);

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-flex {
background-color: burlywood;
display: flex;
height: 500px;
flex-wrap: wrap;
align-content: center;

}
.main-flex .child-flex {
background-color: coral;
margin: 20px;
padding: 20px;
width:500px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="child-flex"> One </div>
<div class="child-flex"> Two</div>
<div class="child-flex"> Three </div>
<div class="child-flex"> Four </div>
</div>
</body>
</html>

Output:
- CSS Flex Child Element (items):
- The flex container properties are:
● order
● flex-grow
● flex-shrink
● flex-basis
● flex
● align-self

Order Property:
- The first flex item in the code does not have to appear as the first item in
the layout.
- The order value must be a number, default value is 0.

Syntax:
order: value;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-flex {
background-color: burlywood;
display: flex;
flex-direction: row;
}
.main-flex .child-flex {
background-color: coral;
margin: 20px;
padding: 20px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="child-flex" style="order:2;"> One </div>
<div class="child-flex" style="order:3;"> Two</div>
<div class="child-flex" style="order:1;"> Three </div>
</div>
</body>
</html>

Output:

Flex-grow property:
- The flex-grow property specifies how much a flex item will grow relative to
the rest of the flex items.
- The value must be a number, default value is 0.

Syntax:
flex-grow: value;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-flex {
background-color: burlywood;
display: flex;
flex-direction: row;
}
.main-flex .child-flex {
background-color: coral;
margin: 20px;
padding: 20px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="child-flex" style="flex-grow:1;"> One </div>
<div class="child-flex" style="flex-grow:3;"> Two</div>
<div class="child-flex" style="flex-grow:1;"> Three </div>
</div>
</body>
</html>

Output:

Flex-shrink property:
- It is the positive unitless number that determines the flex shrink factor. It
specifies how much the item will shrink compared to the other
flexible-items.
- Negative values are not allowed.

Syntax:
flex-shrink: value;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-flex {
background-color: burlywood;
display: flex;
flex-direction: row;
}
.main-flex .child-flex {
background-color: coral;
margin: 20px;
padding: 20px;
width: 500px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="child-flex" style="flex-shrink:3;"> One </div>
<div class="child-flex"> Two</div>
<div class="child-flex" > Three </div>
</div>
</body>
</html>

Output:

Flex-basis property:
- It is the length in relative or absolute units that defines the initial length of
the flex-item. It is used to set the length of the flex-item.
- Negative values are not allowed.

Syntax:
flex-basis: value;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-flex {
background-color: burlywood;
display: flex;
flex-direction: row;
}
.main-flex .child-flex {
background-color: coral;
margin: 20px;
padding: 20px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="child-flex"> One </div>
<div class="child-flex" style="flex-basis:300px;"> Two</div>
<div class="child-flex" > Three </div>
</div>
</body>
</html>

Output:
Flex property:
- The flex property is a shorthand property for the flex-grow, flex-shrink, and
flex-basis properties.
-
Syntax:
flex: flex-grow | flex-shrink | flex-basis;

Align-self property:
- This allows the default alignment (or the one specified by align-items) to be
overridden for individual flex items.
- The align-self property overrides the default alignment set by the
container's align-items property.

Syntax:
align-self: flex-start | center | flex-end;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main-flex {
background-color: burlywood;
display: flex;
flex-direction: row;
height: 200px;
}
.main-flex .child-flex {
background-color: coral;
margin: 20px;
padding: 20px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="main-flex">
<div class="child-flex" style="align-self:flex-start;" > One </div>
<div class="child-flex" style="align-self:center;"> Two</div>
<div class="child-flex" style="align-self:flex-end;"> Three </div>
</div>
</body>
</html>

Output:

Responsive Web Design:


- Responsive web design makes your web page look good on all devices.
- Responsive web design uses only HTML and CSS.
- Responsive web design is not a program or a JavaScript.
- Web pages can be viewed using many different devices: desktops, tablets, and
phones. Your web page should look good, and be easy to use, regardless of the
device.
- It is called responsive web design when you use CSS and HTML to resize, hide,
shrink, enlarge, or move the content to make it look good on any screen.

Syntax:
@media (max-width: media size in px) {
element {
/* Apply some styles */
}
}

Device Breakpoints:
/* Extra large devices (large laptops and desktops, 1200px) */
@media (max-width: 1399px) {
element {
/* Apply some styles */
}
}

/* large devices (laptops and desktops, 992px) */


@media (max-width: 1199px) {
element {
/* Apply some styles */
}
}

/* Medium devices (landscape tablets, 768px) */


@media (max-width: 991px) {
element {
/* Apply some styles */
}
}

/* Small devices (portrait tablets and large phones, 640px) */


@media (max-width: 767px) {
element {
/* Apply some styles */
}
}

/* Small devices (medium size phones, 480px) */


@media (max-width: 639px) {
element {
/* Apply some styles */
}
}

/* Extra small devices (small size phones, 320px) */


@media (max-width: 479px) {
element {
/* Apply some styles */
}
}

You might also like