CSS

Msc CS Shivani Pandeys

 CSS

CSS
CSS pdf or CSS 3 notes provides basic and advanced concepts of CSS technology. Our CSS
tutorial is developed for beginners and professionals. The major points of CSS are given
below:

o CSS stands for Cascading Style Sheet.

o CSS is used to design HTML tags.
o CSS is a widely used language on the web.
o HTML, CSS and JavaScript are used for web designing. It helps the web designers
to apply style on HTML tags.

CSS Example with CSS Editor

In this pdf, you will get a lot of CSS examples, you can edit and run these examples with
our online CSS editor tool.

Code:

Output:
 CSS

What is CSS
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe
the look and formatting of a document written in markup language. It provides an
additional feature to HTML. It is generally used with HTML to change the style of web
pages and user interfaces. It can also be used with any kind of XML documents including
plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for
web applications and user interfaces for many mobile applications.

What does CSS do

o You can add new looks to your old HTML documents.
o You can completely change the look of your website with only a few changes in
CSS code.

Why use CSS

These are the three major benefits of CSS:

1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and size
had to be repeated on every web page. This was a very long process. For example: If you
are developing a large website where fonts and color information are added on every
single page, it will be become a long and expensive process. CSS was created to solve this
problem. It was a W3C recommendation.

2) Saves a lot of time

 CSS
CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.

CSS Syntax
A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag like
<h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations
separated by a semicolon. For the above example, there are two declarations:

1. color: yellow;
2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.

Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.

Selector{Property1: value1; Property2: value2; ..........;}

 CSS
CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS
rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

Code:

Output:
 CSS

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element.
An id is always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Let?s take an example with the id "para1".

Code:

Output:
 CSS

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.

Let's take an example with a class "center".

Code:

Output:
 CSS

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then you
should use the element name with class selector.

Let's see an example.

Code:
 CSS
Output:

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the
pages.

Code:
 CSS

Output:

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.

Let's see the CSS code without group selector.

h1 {
 CSS
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p{
text-align: center;
color: blue;
}

As you can see, you need to define CSS properties for all the elements. It can be grouped
in following ways:

h1,h2,p {
text-align: center;
color: blue;
}

Let's see the full example of CSS group selector.

Code:
 CSS

How to add CSS

CSS is added to HTML pages to format the document according to information in the style
sheet. There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS
3. External CSS

Inline CSS
We can apply CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. This method
mitigates some advantages of style sheets so it is advised to use this method sparingly.

If you want to use inline CSS, you should use the style attribute to the relevant tag.

Syntax:

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

 CSS

Disadvantages of Inline CSS

o You cannot use quotations within inline CSS. If you use quotations the browser
will interpret this as an end of your style value.
o These styles cannot be reused anywhere else.
o These styles are tough to be edited because they are not stored at a single place.
o It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
o Inline CSS does not provide browser cache advantages.

Internal CSS
The internal style sheet is used to add a unique style for a single document. It is defined
in <head> section of the HTML page inside the <style> tag.

Example:

Code:
 CSS

Output:

External CSS
The external style sheet is generally used when you want to make changes on multiple
pages. It is ideal for this condition because it facilitates you to change the look of the entire
web site by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head
section.

Example:

<head>
 CSS
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

The external style sheet may be written in any text editor but must be saved with a .css extension.
This file should not contain HTML elements.

Let's take an example of a style sheet file named "mystyle.css".

File: mystyle.css

body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

Note: You should not use a space between the property value and the unit. For example: It should
be margin-left:20px not margin-left:20 px.

CSS Comments
CSS comments are generally written to explain your code. It is very helpful for the users
who reads your code so that they can easily understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within /*............*/ .

Code:
 CSS

Output:

CSS Background
 CSS
CSS background property is used to define the background effects on element. There are
5 CSS background properties that affects the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

1) CSS background-color
The background-color property is used to specify the background color of the element.

You can set the background color like this:

Code:
 CSS
2) CSS background-image
The background-image property is used to set an image as a background of an element.
By default the image covers the entire element. You can set the background image for a
page like this.

Code:

Output:

3) CSS background-repeat
 CSS
By default, the background-image property repeats the background image horizontally
and vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

Code:

background-repeat: repeat-y;

Code:
 CSS

Output:

4) CSS background-attachment
The background-attachment property is used to specify if the background image is fixed
or scroll with the rest of the page in browser window. If you set fixed the background
image then the image will not move during scrolling in the browser. Let?s take an example
with fixed background image.
CSS
 CSS
Output:

5) CSS background-position
The background-position property is used to define the initial position of the background
image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

1. center
2. top
3. bottom
4. left
5. right
 CSS
Code:
 CSS

CSS Colors
The color property in CSS is used to set the color of HTML elements. Typically, this
property is used to set the background color or the font color of an element.

In CSS, we use color values for specifying the color. We can also use this property for the
border-color and other decorative effects.

We can define the color of an element by using the following ways:

o RGB format.
o RGBA format.
o Hexadecimal notation.
o HSL.
o HSLA.
o Built-in color.

Let's understand the syntax and description of the above ways in detail.
 CSS
RGB Format
RGB format is the short form of 'RED GREEN and BLUE' that is used for defining the color
of an HTML element simply by specifying the values of R, G, B that are in the range of 0 to
255.

The color values in this format are specified by using the rgb() property. This property
allows three values that can either be in percentage or integer (range from 0 to 255).

This property is not supported in all browsers; that's why it is not recommended to use
it.

Syntax

color: rgb(R, G, B);

RGBA Format
It is almost similar to RGB format except that RGBA contains A (Alpha) that specifies the
element's transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 is for
fully transparent, and 1.0 is for not transparent.

Syntax

color:rgba(R, G, B, A);

Hexadecimal notation
Hexadecimal can be defined as a six-digit color representation. This notation starts with
the # symbol followed by six characters ranges from 0 to F. In hexadecimal notation, the
first two digits represent the red (RR) color value, the next two digits represent
the green (GG) color value, and the last two digits represent the blue (BB) color value.

The black color notation in hexadecimal is #000000, and the white color notation in
hexadecimal is #FFFFFF. Some of the codes in hexadecimal notation are #FF0000,
#00FF00, #0000FF, #FFFF00, and many more.

Syntax

color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

Short Hex codes

It is a short form of hexadecimal notation in which every digit is recreated to arrive at an
equivalent hexadecimal value.
 CSS
For example, #7B6 becomes #77BB66 in hexadecimal.

The black color notation in short hex is #000, and the white color notation in short hex is
#FFF. Some of the codes in short hex are #F00, #0F0, #0FF, #FF0, and many more.

HSL
It is a short form of Hue, Saturation, and Lightness. Let's understand them individually.

Hue: It can be defined as the degree on the color wheel from 0 to 360. 0 represents red,
120 represents green, 240 represents blue.

Saturation: It takes value in percentage in which 100% represents fully saturated, i.e.,
no shades of gray, 50% represent 50% gray, but the color is still visible, and 0%
represents fully unsaturated, i.e., completely gray, and the color is invisible.

Lightness: The lightness of the color can be defined as the light that we want to provide
the color in which 0% represents black (there is no light), 50% represents neither dark
nor light, and 100% represents white (full lightness).

Let's see the syntax of HSL in color property.

Syntax

1. color:hsl(H, S, L);

HSLA
It is entirely similar to HSL property, except that it contains A (alpha) that specifies the
element's transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 indicates
fully transparent, and 1.0 indicates not transparent.

Syntax

1. color:hsla(H, S, L, A);

Built-in Color
As its name implies, built-in color means the collection of previously defined colors that are
used by using a name such as red, blue, green, etc.

Syntax

1. color: color-name;

Let's see the list of built-in colors along with their decimal and hexadecimal values.
 CSS
S.no. Color name Hexadecimal Value Decimal Value or rgb() value

1. Red #FF0000 rgb(255,0,0)

2. Orange #FFA500 rgb(255,165,0)

3. Yellow #FFFF00 rgb(255,255,0)

4. Pink #FFC0CB rgb(255,192,203)

5. Green #008000 rgb(0,128,0)

6. Violet #EE82EE rgb(238,130,238)

The illustration of CSS colors, which includes the above properties, is given below.

Example
<html>
<head>
<title>CSS hsl color property</title>
<style>
h1{
text-align:center;
}
#rgb{
color:rgb(255,0,0);
}
#rgba{
color:rgba(255,0,0,0.5);
}
#hex{
color:#EE82EE;
}
#short{
color: #E8E;
}
#hsl{
color:hsl(0,50%,50%);
}
#hsla{
color:hsla(0,50%,50%,0.5);
}
 CSS
#built{
color:green;
}
</style>
</head>
<body>
<h1 id="rgb">
Hello World. This is RGB format.
</h1>
<h1 id="rgba">
Hello World. This is RGBA format.
</h1>
<h1 id="hex">
Hello World. This is Hexadecimal format.
</h1>
<h1 id="short">
Hello World. This is Short-hexadecimal format.
</h1>
<h1 id="hsl">
Hello World. This is HSL format.
</h1>
<h1 id="hsla">
Hello World. This is HSLA format.
</h1>
<h1 id="built">
Hello World. This is Built-in color format.
</h1>
</body>
</html>
 CSS
CSS - Borders

The border properties allow you to specify how the border of the box representing an
element should look. There are three properties of a border you can change −
• The border-color specifies the color of a border.
• The border-style specifies whether a border should be solid, dashed line,
double line, or one of the other possible values.
• The border-width specifies the width of a border.
Now, we will see how to use these properties with examples.

The border-color Property

The border-color property allows you to change the color of the border surrounding an
element. You can individually change the color of the bottom, left, top and right sides
of an element's border using the properties −
• border-bottom-color changes the color of bottom border.
• border-top-color changes the color of top border.
• border-left-color changes the color of left border.
• border-right-color changes the color of right border.
The following example shows the effect of all these properties –

Output:
 CSS

The border-style Property

The border-style property allows you to select one of the following styles of border −
• none − No border. (Equivalent of border-width:0;)
• solid − Border is a single solid line.
• dotted − Border is a series of dots.
• dashed − Border is a series of short lines.
• double − Border is two solid lines.
• groove − Border looks as though it is carved into the page.
• ridge − Border looks the opposite of groove.
• inset − Border makes the box look like it is embedded in the page.
• outset − Border makes the box look like it is coming out of the canvas.
• hidden − Same as none, except in terms of border-conflict resolution for table
elements.
You can individually change the style of the bottom, left, top, and right borders of an
element using the following properties −
• border-bottom-style changes the style of bottom border.
• border-top-style changes the style of top border.
• border-left-style changes the style of left border.
• border-right-style changes the style of right border.
The following example shows all these border styles –
<html>
<head>
</head>

<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>

<p style = "border-width:4px; border-style:solid;">

This is a solid border.
</p>

<p style = "border-width:4px; border-style:dashed;">

This is a dashed border.
 CSS
</p>

<p style = "border-width:4px; border-style:double;">

This is a double border.
</p>

<p style = "border-width:4px; border-style:groove;">

This is a groove border.
</p>

<p style = "border-width:4px; border-style:ridge">

This is a ridge border.
</p>

<p style = "border-width:4px; border-style:inset;">

This is a inset border.
</p>

<p style = "border-width:4px; border-style:outset;">

This is a outset border.
</p>

<p style = "border-width:4px; border-style:hidden;">

This is a hidden border.
</p>

<p style = "border-width:4px;

border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>
</html>
 CSS

The border-width Property

The border-width property allows you to set the width of an element borders. The value
of this property could be either a length in px, pt or cm or it should be set to thin,
medium or thick.
You can individually change the width of the bottom, top, left, and right borders of an
element using the following properties −
• border-bottom-width changes the width of bottom border.
• border-top-width changes the width of top border.
• border-left-width changes the width of left border.
• border-right-width changes the width of right border.
The following example shows all these border width –
 CSS

Border Properties Using Shorthand

 CSS
The border property allows you to specify color, style, and width of lines in one property
−
The following example shows how to use all the three properties into a single property.
This is the most frequently used property to set border around any element.
Example:

Output:

CSS - Margins
The margin property defines the space around an HTML element. It is possible to use
negative values to overlap content.
The values of the margin property are not inherited by the child elements. Remember
that the adjacent vertical margins (top and bottom margins) will collapse into each
other so that the distance between the blocks is not the sum of the margins, but only
the greater of the two margins or the same size as one margin if both are equal.
We have the following properties to set an element margin.
• The margin specifies a shorthand property for setting the margin properties in
one declaration.
• The margin-bottom specifies the bottom margin of an element.
• The margin-top specifies the top margin of an element.
• The margin-left specifies the left margin of an element.
• The margin-right specifies the right margin of an element.
Now, we will see how to use these properties with examples.

The Margin Property

 CSS
The margin property allows you set all of the properties for the four margins in one
declaration. Here is the syntax to set margin around a paragraph −
Here is an example −

Output:

The margin-bottom Property

 CSS
The margin-bottom property allows you set bottom margin of an element. It can have
a value in length, % or auto.
Here is an example −

Code:

Output

The margin-top Property

The margin-top property allows you set top margin of an element. It can have a value
in length, % or auto.
Here is an example –
Code:
 CSS

Output:

The margin-left Property

The margin-left property allows you set left margin of an element. It can have a value
in length, % or auto.
Here is an example –
Code:
 CSS

Output:
 CSS

The margin-right Property

The margin-right property allows you set right margin of an element. It can have a
value in length, % or auto.
Here is an example –
Code:

Output:

CSS - Paddings
The padding property allows you to specify how much space should appear between the
content of an element and its border −

The value of this attribute should be either a length, a percentage, or the word inherit.
If the value is inherit, it will have the same padding as its parent element. If a
percentage is used, the percentage is of the containing box.
The following CSS properties can be used to control lists. You can also set different
values for the padding on each side of the box using the following properties −
• The padding-bottom specifies the bottom padding of an element.
• The padding-top specifies the top padding of an element.
• The padding-left specifies the left padding of an element.
• The padding-right specifies the right padding of an element.
 CSS
• The padding serves as shorthand for the preceding properties.
Now, we will see how to use these properties with examples.

The padding-bottom Property

The padding-bottom property sets the bottom padding (space) of an element. This can
take a value in terms of length of %.
Here is an example –
Code:

Output:
 CSS
The Padding Property
The padding property sets the left, right, top and bottom padding (space) of an
element. This can take a value in terms of length of %.
Here is an example –
Code:

Output:
 CSS

CSS - Box Model

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 every HTML
element. It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define
space between elements.

Example
Demonstration of the box model:

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
 CSS
Code:

Output:
 CSS
CSS Outline
CSS outline is just like CSS border property. It facilitates you to draw an extra border
around an element to get visual attention.

It is as easy as to apply as a border.

See this example:

Code:

Output:

CSS Display
CSS display is the most important property of CSS which is used to control the layout of
the element. It specifies how the element is displayed.
 CSS
Every element has a default display value according to its nature. Every element on the
webpage is a rectangular box and the CSS property defines the behavior of that
rectangular box.

The display property specifies the display behavior (the type of rendering
box) of an element.

In HTML, the default display property value is taken from the HTML
specifications or from the browser/user default style sheet. The default value
in XML is inline, including SVG elements.

CSS Syntax
display: value;

Property Values

Value Description Play it

inline Displays an element as an inline element (like <span>). Any height and width Demo
properties will have no effect ❯

block Displays an element as a block element (like <p>). It starts on a new line, Demo
and takes up the whole width ❯

contents Makes the container disappear, making the child elements children of the
element the next level up in the DOM

flex Displays an element as a block-level flex container

grid Displays an element as a block-level grid container

 CSS

inline- Displays an element as an inline-level block container. The

block element itself is formatted as an inline element, but you
can apply height and width values

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.a {
display: contents;
border: 1px solid red;
background-color: lightgrey;
padding: 10px;
width: 200px;
}
.b {
border: 1px solid blue;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display: contents:</h2>
<div class="a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. <div class="b">HELLO WORLD!</div>
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<p>display: contents does not work in Edge, prior version 79.</p>
</body>
</html>

Output:
 CSS

CSS - overflow
Description
The overflow property determines how content which overflows its element's content
area should be handled.

Possible Values
• visible − Overflowing content should be displayed.
• hidden − Overflowing content should not be displayed.
• scroll − Overflowing content should not be displayed, but the user agent should
provide some means of accessing the hidden content (e.g., a set of scrollbars).
• auto − The behavior caused by this value is dependent on the browser.

CSS Overflow Example

Code:
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: #00ffff;
width: 100px;
height: 100px;
overflow: scroll;
}

div.hidden {
background-color: #00FF00;
width: 100px;
height: 170px;
 CSS
overflow: hidden;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element
exceeds the size of the element's box.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have
better control of the layout.
The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have
better control of the layout.
The default value is visible.</div>
</body>
</html>

Output
 CSS
CSS text-align
This CSS property is used to set the horizontal alignment of a table-cell box or the block
element. It is similar to the vertical-align property but in the horizontal direction.

Syntax
1. text-align: justify | center | right | left | initial | inherit;
Possible values

justify: It is generally used in newspapers and magazines. It stretches the element's

content in order to display the equal width of every line.

center: It centers the inline text.

right: It is used to align the text to the right.

left: It is used to align the text to the left.

Let's see an example that will demonstrate the text-align property.

Code:

<html>
<head>
</head>
<style>
h2{
color: blue;
}
</style>
<body>
<h1>Example of text-align proeprty</h1>
<h2 style = "text-align: center;">
text-align: center;
</h2>
<h2 style = "text-align: right;">
text-align: right;
</h2>
<h2 style = "text-align: left;">
text-align: left;
</h2>
<h2 style = "text-align: justify;">
text-align: justify; To see its effect, it should be applied on
large paragraph.
</h2>
</body>
</html>
 CSS
Output:

CSS Opacity
The CSS opacity property is used to specify the transparency of an element. In simple
word, you can say that it specifies the clarity of the image.

In technical terms, Opacity is defined as degree in which light is allowed to travel through
an object.

How to apply CSS opacity setting

Opacity setting is applied uniformly across the entire object and the opacity value is
defined in term of digital value less than 1. The lesser opacity value displays the greater
opacity. Opacity is not inherited.

CSS Opacity Example: transparent image

Let's see a simple css opacity example of image transparency.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
img.trans {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<p>Normal Image</p>
 CSS
<img src="C:\Users\DELL\Pictures\Saved Pictures\swan2.jpg" height="250"
width="250" alt="normal rose">
<p>Transparent Image</p>
<img class="trans" src="C:\Users\DELL\Pictures\Saved Pictures\swan2.jpg"
height="250" width="250" alt="transparent rose">
</body>
</html>

Output:

CSS Gradients
 CSS
CSS gradients let you display smooth transitions between two or more
specified 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)

CSS Linear Gradients

To create a linear gradient you must define at least two color stops. Color
stops are the colors you want to render smooth transitions among. You can
also set a starting point and a direction (or an angle) along with the gradient
effect.

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

Direction - Top to Bottom (this is default)

Code:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: blue; /* For browsers that do not support gradients */
background-image: linear-gradient(blue, green);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the
bottom:</p>
<div id="grad1"></div>
</body>
</html>
 CSS
Output:

Direction - Diagonal

You can make a gradient diagonally by specifying both the horizontal and
vertical starting positions.

The following example shows a linear gradient that starts at top left (and
goes to bottom right). It starts blue, transitioning to green:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: blue; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, blue, green);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>

<p>This linear gradient starts red at top left, transitioning to yellow (at
bottom right):</p>

<div id="grad1"></div>

</body>
</html>
 CSS

Output:

Using 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".

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

CSS Text-shadow
As its name implies, this CSS property adds shadows to the text. It accepts the comma-
separated list of shadows that applied to the text. It's default property is none. It applies
one or more than one text-shadow effect on the element's text content.

Let's see the syntax of text-shadow property.

Syntax

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

Values

h-shadow: It is the required value. It specifies the position of the horizontal shadow and
allows negative values.
 CSS
v-shadow: It is also the required value that specifies the position of the vertical shadow.
It does not allow negative values.

blur-radius: It is the blur-radius, which is an optional value. Its default value is 0.

color: It is the color of the shadow and also an optional value.

none: It is the default value, which means no shadow.

initial: It is used to set the property to its default value.

inherit: It simply inherits the property from its parent element.

Let's understand it by using some illustrations.

Code:

<!DOCTYPE html>

<html>
<head>
<title> font-weight property </title>
<style>
p.fuzzy{
text-shadow: 3px 3px 3px violet;
font-size:30px;
text-align:center;
}
p.simple{
text-shadow: 3px 3px red;
}
p.multi{
text-shadow: -3px -3px 3px blue, 3px 3px 3px red;
font-size:30px;
text-align:center;
}
.glow{
text-shadow: 0 0 .1em cyan;
background-color: black;
font-size:50px;
text-align:center;
}

</style>
</head>

<body>
<p class="fuzzy">
Fuzzy Shadow
 CSS
</p>
<p class="simple">
Simple Shadow
</p>
<p class="multi">
Multiple Shadows
</p>
<div class="glow">
Glow Effect
</div>
</body>
</html>

Output:

CSS Position
The CSS position property is used to set position for an element. it is also used to place
an element behind another and also useful for scripted animation effect.

You can position an element using the top, bottom, left and right properties. These
properties can be used only after position property is set first. A position element's
computed position property is relative, absolute, fixed or sticky.

Let's have a look at following CSS positioning:

1. CSS Static Positioning

2. CSS Fixed Positioning
 CSS
3. CSS Relative Positioning
4. CSS Absolute Positioning

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"x`>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.relative{
width: 150px;
height: 150px;
background-color: red;
position: relative;
/* left: 500px;
top: 80px; */
}
.fixed{
width: 150px;
height: 150px;
background-color: yellow;
position: fixed;
bottom: 20px;
right: 30px;
}
.absolute{
width: 150px;
height: 150px;
background-color: green;
position: absolute;
top: 200px;
right: 50px;
}
.sticky{
border: 1px solid red;
position: sticky;
top: 0;
background-color: lightcoral;
}
</style>
</head>
<body>
<h1 class="sticky">CSS Position</h1>
<p>There are 5 properties of position.</p>
<ol>
<li>Static</li>
 CSS
<li>Relative</li>
<li>Fixed</li>
<li>Absolute</li>
<li>Sticky</li>
</ol>

<h2 class="sticky">Position: Static</h2>

<p>HTML elements are positioned static by default.</p>
<p>Static positioned elements are not affected by the top, bottom, left,
and right properties.</p>

<h2>Position: Relative</h2>
<p>An element with position: relative; is positioned relative to its
normal position.</p>
<p>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.</p>
<div class="relative"></div>

<h2>Position: fixed</h2>
<p>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.</p>
<p>A fixed element does not leave a gap in the page where it would
normally have been located.</p>
<div class="fixed"></div>

<h2>Position: Absolute</h2>
<p>It is relative to the nearest position</p>
<div class="absolute"></div>

<h2>Position: sticky</h2>
<p>An element with position: sticky; is positioned based on the user's
scroll position.</p>
<p>A sticky element toggles between relative and fixed, depending on the
scroll position.</p>

</body>
</html>

Output:
 CSS

CSS - z-index
Description
The z-index sets the stacking level of an element.

Possible Values
• auto − The stack level of the element is the same as that of its parent element.
• integer − The stack level of the element is set to the given value, and it
establishes a new stacking context for any descendant elements.

Applies to
All the positioned elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.demo{
width: 700px;
height: 500px;
position: absolute;
z-index: -1;
top: 0;
 CSS
}
.demo2{
position: relative;
left: 400px;
top: 80px;
}
body{
color: yellow;
font-weight: bolder;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Z-index property</h1>
<img src="F:\Desktop\Tushar\1.jpg" class="demo">
<img src="F:\Desktop\Tushar\Capture.png" alt="" width="400px"
height="400px" class="demo2">
<p>When elements are positioned, they can overlap other elements.</p>
<p>The z-index property specifies the stack order of an element</p>
<p>Good Evening</p>

</body>
</html>

Output:
 CSS

CSS Web Fonts

The CSS @font-face Rule
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.

Your "own" fonts are defined within the CSS @font-face rule.

Different Font Formats

TrueType Fonts (TTF)

TrueType is a font standard developed in the late 1980s, by Apple and

Microsoft. TrueType is the most common font format for both the Mac OS
and Microsoft Windows operating systems.

OpenType Fonts (OTF)

 CSS
OpenType is a format for scalable computer fonts. It was built on TrueType,
and is a registered trademark of Microsoft. OpenType fonts are used
commonly today on the major computer platforms.

The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is
now a W3C Recommendation. WOFF is essentially OpenType or TrueType
with compression and additional metadata. The goal is to support font
distribution from a server to a client over a network with bandwidth
constraints.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType font that provides better compression than WOFF 1.0.

SVG Fonts/Shapes

SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1
specification define a font module that allows the creation of fonts within an
SVG document. You can also apply CSS to SVG documents, and the @font-
face rule can be applied to text in SVG documents.

Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for
use as embedded fonts on web pages.

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

* {
font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
NTechGlobalSolutions<br>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
 CSS
</div>

</body>
</html>

Output:

CSS Transition
The CSS transitions are effects that are added to change the element gradually from one
style to another, without using flash or JavaScript.

You should specify two things to create CSS transition.

o The CSS property on which you want to add an effect.

o The time duration of the effect.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: purple;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div></div>
 CSS
<p>Move the cursor over the div element above, to see the transition
effect.</p>
</body>
</html>

Output:

Media Queries
What is a Media Query?
Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain
condition is true.

Add a Breakpoint
Earlier in this tutorial we made a web page with rows and columns, and it
was responsive, but it did not look good on a small screen.

Media queries can help with that. We can add a breakpoint where certain
parts of the design will behave differently on each side of the breakpoint.

Example
When the screen (browser window) gets smaller than 768px, each column
should have a width of 100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
 CSS
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

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

/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}

Output:

Another Breakpoint
You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.

 CSS

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}

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

@media only screen and (min-width: 768px) {
.example {background: blue;}
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
.example {background: orange;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
</style>
</head>
<body>

<h2>Typical Media Query Breakpoints</h2>

 CSS
<p class="example">Resize the browser window to see how the background color
of this paragraph changes on different screen sizes.</p>

</body>
</html>

Output:

Flexbox
Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily
create layouts for complex applications and web pages. Flexbox layout gives
complete control over the direction, alignment, order, size of the boxes.

Cascading Style Sheets (CSS) is a simple design language intended to simplify the
process of making web pages presentable. CSS handles the look and feel part of a
web page.
Using CSS, you can control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images or colors
are used, layout designs, variations in display for different devices and screen sizes
as well as a variety of other effects.
To determine the position and dimensions of the boxes, in CSS, you can use one of
the layout modes available −
• The block layout − This mode is used in laying out documents.
• The inline layout − This mode is used in laying out text.
• The table layout − This mode is used in laying out tables.
• The table layout − This mode is used in positioning the elements.
 CSS
All these modes are used to align specific elements like documents, text, tables, etc.,
however, none of these provides a complete solution to lay out complex websites.
Initially this is used to be done using a combination of floated elements, positioned
elements, and table layout (often). But floats only allow to horizontally position the
boxes.

What is Flexbox?
In addition to the above-mentioned modes, CSS3 provides another layout mode
Flexible Box, commonly called as Flexbox.
Using this mode, you can easily create layouts for complex applications and web
pages. Unlike floats, Flexbox layout gives complete control over the direction,
alignment, order, size of the boxes.

Features of Flexbox
Following are the notable features of Flexbox layout −
• Direction − You can arrange the items on a web page in any direction such as
left to right, right to left, top to bottom, and bottom to top.
• Order − Using Flexbox, you can rearrange the order of the contents of a web
page.
• Wrap − In case of inconsistent space for the contents of a web page (in single
line), you can wrap them to multiple lines (both horizontally) and vertically.
• Alignment − Using Flexbox, you can align the contents of the webpage with
respect to their container.
• Resize − Using Flexbox, you can increase or decrease the size of the items in
the page to fit in available space.
To use Flexbox in your application, you need to create/define a flex container using
the display property.
Usage −
display: flex | inline-flex
This property accepts two values
• flex − Generates a block level flex container.
• inline-flex − Generates an inline flex container box.
Now, we will see how to use the display property with examples.

Code:

<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
 CSS
.box5{background:yellow;}
.box6{background:pink;}

.container{
display:flex;
}
.box{
font-size:35px;
padding:15px;
}
</style>

<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>
It will produce the following result −