Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
9 views

Web Tech Unit 2 CSS

This document provides an introduction to CSS (Cascading Style Sheets), detailing its purpose, advantages, and disadvantages in web design. It explains CSS syntax, selectors, and the different methods of incorporating CSS into HTML, including inline, internal, and external styles. Additionally, it covers various CSS properties, particularly focusing on font properties and their applications.

Uploaded by

angelsonu2026
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Web Tech Unit 2 CSS

This document provides an introduction to CSS (Cascading Style Sheets), detailing its purpose, advantages, and disadvantages in web design. It explains CSS syntax, selectors, and the different methods of incorporating CSS into HTML, including inline, internal, and external styles. Additionally, it covers various CSS properties, particularly focusing on font properties and their applications.

Uploaded by

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

Ashwini M Lecturer, Dept.

Computer Science,GFGC Gundlupet Web Technologies

Unit 2
INTRODUCTION TO CSS
CSS (Cascading Style Sheets) is the code that styles web content, including the design,
layout and variations in display for different devices and screen sizes. It provides an
additional feature to HTML. It is generally used with HTML to change the style of
webpages and user interfaces. It describes how HTML elements are to be displayed on
screen, paper, or in other media.

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.

Why CSS?
 CSS saves time: You can write CSS once and reuse the same sheet in
multiple HTML pages.
 Easy Maintenance: To make a global change simply change the style, and
all elements in all the webpages will be updated automatically.
 Search Engines: CSS is considered a clean coding technique, which means
search engines won’t have to struggle to “read” its content.
 Superior styles to HTML: CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison
to HTML attributes.
 Offline Browsing: CSS can store web applications locally with the help of
an offline cache. Using this we can view offline websites.

CSS Versions Release Year

CSS Syntax
CSS comprises style rules that are interpreted by the browser and then applied to
the corresponding elements in your document. A style rule set consists of a
selector and declaration block.

1 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

Syntax:
<style>
Selector{Declaration}
</style>
Example:

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: 11px;
Each declaration contains a property name and value, separated by a colon.
Property: It 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; ..........;}

Advantages of CSS
 CSS is compatible with all the devices.
 With the help of CSS, website maintenance is easy and faster.
 CSS support consistent and spontaneous changes.
 CSS make the website faster and enhances search engine capabilities to
crawl the web pages
 It holds a special feature that is the ability to re-position.

Disadvantages of CSS:
 In CSS, there is a cross browsers issue if you design anything and check on
chrome it looks perfect but that does not mean it will look the same in the
other browsers. Then you have to add the script for that browser also.
2 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

 There is a lack of security in CSS.


 CSS is vulnerable; it is exposed to possibly being attacked.
 CSS has a fragmentation issue.

CSS Comments
CSS comments are generally written to explain the code. It is very helpful for the users
who reads the code so that they can easily understand the code. Comments are ignored
by browsers.
Comments are single or multiple lines statement and written within /*. */ .
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
/* This is a single-line comment
*/ text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p> Welcome to Web Technologies Lab</p>
</body>
</html>

Output:
Welcome to Web Technologies Lab

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.

3 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

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


CSS Element Selector, also called as Tag selector, has defined as a selector to selects all the
HTML elements by specified names on a web page.
Syntax:
Element selector
{
CSS Declarations;
}
Here, the element is the tag selector, and after the selector, there comes a CSS declaration
where curly brackets are used. Within this context, the property refers to the value
assigned to the targeted element.
Example:
You can select all p elements on a page like
this: p {
text-align: center;
color: red;
}

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.

4 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

Example:
#para1
{
text align: center;
color: blue;

}
This CSS code can match the element with the id ‘para1’ like in the following sentence.
<p id="para1">Hello Javatpoint.com</p>

3. CSS Class Selector

The CSS Class selector is declared by using a dot followed by the name of the class. The
coder defines this class name, as with the ID selector. The class selector searches for
every element having an attribute value with the same name as the class name without
the dot.
Note: A class name should not be started with a number.

Example:

.center {
text-align:
center; color:
} blue;
This CSS code can match the element with the class ‘center’, like in the following sentence.

<h1 class="center">This heading is blue and center-aligned.</h1>

<p class="center">This paragraph is blue and center-aligned.</p>

This style also applies to all the other HTML elements having an attribute value for the
class as ‘center.’ An element with the same class attribute value helps us reuse the styles
and avoids unnecessary repetition.

5 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

 We can add more than one class to the attribute by separating each class with space.
<p class="square bold shape"></p>
Here square, bold, and shape are three different types of classes.

 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.

p.center {
text-align: center;
color: blue;
}
This CSS code can match the p element with the class ‘center’, where all appear in the
program like in the following sentence.

<h1 class="center">This heading is blue and center-aligned.</h1>

<p class="center">This paragraph is blue and center-aligned.</p>


Here style applies to only the tag p and all other HTML elements not affected by the style.

4. CSS Universal Selectors


We declare a universal selector with the help of an asterisk (wildcard character) at the
beginning of the curly brace. It selects all the elements on the pages. You can use the
Universal Selector in combination with other selectors.
Example:
*{
color: green;
font-size:
20px;
}
These two lines of code surrounded by the curly braces will affect all the elements
present on the HTML page.

5. CSS Grouping Selectors


The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style
definitions).

6 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

It will be better to group the selectors, to minimize the code. To group


selectors, separate each selector with a comma. In the example below we have
grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color:red;
}

Levels of Style Sheets


There are three ways to include CSS in any HTML code:

 Inline CSS
 Internal or Embedded CSS
 External CSS
1. Inline CSS
Inline CSS contains the CSS property in the body section attached with element is
known as inline CSS. Inline CSS is used to style a specific HTML element. Add a style
attribute to each HTML tag without using the selectors. Managing a website may
difficult if we use only inline CSS. However, Inline CSS in HTML is useful in some
situations. We have not access the CSS files or to apply styles to element.

In the following example, we have used the inline CSS in <p> and <h1> tag.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body style="background-color:white;">
<h1 style="color:Red;padding:20px;">CSS Tutorials</h1>
<p style="color:blue;">It will be useful here.</p>
</body>
</html>

Pros of inline CSS


o We can create CSS rules on the HTML page.
o We cannot create and upload a separate document in inline CSS.

Cons of inline CSS


7 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

o Inline CSS, adding CSS rules to HTML elements is time-consuming and messes
up the HTML structure.

o It styles multiple elements at the same time which can affect the page size
and download time of the page.
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.

2. Internal or Embedded CSS:

The Internal CSS has <style> tag in the <head> section of the HTML document. This
CSS style is an effective way to style single pages.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: black;
}
h1 {
color: red;
padding:
50px;
}
</style>
</head>
<body>

8 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

<h1>CSS types</h1>
<p>Cascading Style sheet types: inline, external and internal</p>
</body>
</html>

Pros of Internal CSS


o Internal CSS cannot upload multiple files when we add the code with the
HTML page.

Cons of Internal CSS


o Adding code in the HTML document will reduce the page size and loading
time of the webpage.

o Using the CSS style for multiple web pages is time-consuming because
we require placing the style on each web page.
1. External CSS
External CSS contains separate CSS file which contains only style property with
the help of tag attributes. CSS property written in a separate file with .css
extension and should be linked to the HTML document using link tag.

To use the external CSS, follow the steps, given below:


1. Create a new .css file with text editor, and add Cascading Style Sheet rules too.
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;
}

9 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

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: 20px.

2. Add a reference to the external .css file right after <title> tag in the <head>
section of HTML sheet:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Pros of External CSS
o Our files have a cleaner structure and smaller in size.
o We use the same .css file for multiple web pages in external CSS.

Cons of External CSS


o The pages cannot be delivered correctly before the external CSS is loaded.
o In External CSS, uploading many CSS files can increase the download time of
a website.

Property Value Forms


There are 60 different properties in 7 categories
 Fonts
 Lists
 Alignment of text
 Margins
 Colors
 Backgrounds
 Borders

1. Font Properties
CSS Font property is used to control the look of texts. By the use of CSS font
property you can change the text size, color, style and more.
These are some important font attributes:
 CSS Font color: This property is used to change the color of the text.
(standalone attribute)
 CSS Font family: This property is used to change the face of the font.
 CSS Font style: This property is used to make the font bold, italic or oblique.
 CSS Font size: This property is used to increase or decrease the size of the font.
 CSS Font variant: This property creates a small-caps effect.
 CSS Font weight: This property is used to increase or decrease the boldness
10 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

and lightness of the font.

 CSS Font Color


CSS font color is a standalone attribute in CSS. It is used to change the color of the text.
There are three different formats to define a color
o By a color name
o By hexadecimal value
o By RGB
In the below example, we have defined all these
formats. h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }

 CSS Font Family


CSS font family can be divided in two types:
o Generic family: It is the name of the generic family that includes five
categories, which are "serif", "sans-serif", "cursive", "fantasy", and
"monospace". It should be placed at last in the list of the font family names.
o Font family: It specifies the font family name like Arial, New Times Roman etc.

Serif: Serif fonts include small lines at the end of characters. Example of serif: Times
new roman, Georgia etc.
Sans-serif: A sans-serif font doesn't include the small lines at the end of characters.
Example of Sans-serif: Arial, Verdana etc.
Cursive: It is mainly used for writing the invitation letter, informal messages, etc. It is
like a handwritten text which is written by a pen or a brush. The font-family that it
includes is Insolente, Corsiva, Flanella, Belluccia, Zapfino, and many more.
monospace: It is for instructions, mailing address, typewritten text, etc. It includes the
font- family that is Monaco, SimSun, Courier, Consolas, Inconsolata, and many more.
fantasy: It makes the text expressive, decorative, and impactful. It includes the font-
family that is Impact, Copperplate, Cracked, Critter, and many more.

Example:
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }

 CSS Font Style

11 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

CSS Font style property defines what type of font you want to display. It may be
italic, oblique, or normal.
Example:
h2 { font-style: italic; }
h3 { font-style: oblique;
} h4 { font-style:
normal; }

 CSS Font Size


CSS font size property is used to change the size of the font. These are the possible
values that can be used to set the font size

Font Size Value Description

xx-small used to display the extremely small text size.

x-small used to display the extra small text size.

small used to display small text size.

medium used to display medium text size.

large used to display large text size.

x-large used to display extra large text size.

xx-large used to display extremely large text size.

smaller used to display comparatively smaller text


size.
larger used to display comparatively larger text
size.
size in pixels or % used to set value in percentage or in pixels.

Example:
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
12 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

<p style="font-size:smaller;"> This font size is smaller. </p>


<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>

 CSS Font Variant


CSS font variant property specifies how to set font variant of an element. It
may be normal and small-caps.
Example:

p { font-variant: small-caps; }
h3 { font-variant: normal; }

 CSS Font Weight


CSS font weight property defines the weight of the font. It is used to
increase or decrease how bold or light a font appears.The possible values of
font weight may be normal, bold, bolder, lighter or number (100, 200 upto
900).
Example:
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>

Shorthand Property
We can use the font property to set all the font properties at once.
For example:
<html>
<head>
<title> Font properties</title>
</head>

13 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

<body>
<p style = "font: italic small-caps bold 15px Georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>

2. List Properties
CSS list is very flexible and easy to manage and, therefore, can be used to arrange a huge
variety of contents. By default, the style of the list is borderless.

The two types of lists:


 Unordered Lists: The contents or the items are marked with bullets (bullets are small
black circles), by default.
 Ordered Lists: Items or the contents are marked with numbers or alphabets.

CSS list properties allow us to:

o Set the distance between the text and the marker in the list.
o Specify an image for the marker instead of using the number or bullet point.
o Control the marker appearance and shape.
o Place the marker outside or inside the box that contains the list items.
o Set the background colors to list items and lists.

The CSS properties to style the lists are given as follows:

 The list-style-type Property


The list-style-type property allows you to control the shape or style of bullet point
(also known as a marker) in the case of unordered lists and the style of numbering
characters in ordered lists.
Syntax:

list-style-type:value;

Example:
<html>
<head>
</head>
<body>
14 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

<ul style = "list-style-type:circle;">


<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ol>
</body>
</html>
It will produce the following result

 List-style-image Property
This is a special type of property. Using the list-style image property, the images are set
to be used as the list marker. The list-style-image allows you to specify an image so that
you can use your own bullet style. The syntax is similar to the background-image
property with the letters url starting the value of the property followed by the URL in
15 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

brackets. If it does not find the given image then default bullets are used. The default
value of this property is set to ‘none’.

Syntax:
list-style-image: url;

Example
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>CS</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>CS</li>
<li>Physics</li>
</ol>
</body>
</html>
 The list-style-position Property

To set the position of the marker relative to the item of the list, the property called
list- style-position is used. The list-style-position property indicates whether the
marker should appear inside or outside of the box containing the bullet points.
“Outside” is its default value. It can have one of the two values
Sl.No. Value & Description
1 Inside
If the text goes onto a second line, the text will wrap underneath the marker. It
will
also appear indented to where the text would have started if the list had a
value of outside.
2 Outside
If the text goes onto a second line, the text will be aligned with the start of the
first line (to the right of the bullet).

Example:
16 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ol>
</body>
</html>
 The list-style Property or Shorthand Properties
The list-style allows you to specify all the list properties into a single
expression. These properties can appear in any order.

Example:
<html>
<head>
</head>

<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ul>

<ol style = "list-style: outside upper-alpha;">


<li>Maths</li>
<li>CS</li>
<li>Physics</li>
</ol>
</body>
</html>
17 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

CSS Table
We can apply style on HTML tables for better look and feel. There are some CSS properties
that are widely used in designing table using CSS:
o border
o border-collapse
o padding
o width
o height
o text-align
o color
o background-color

 CSS Table Border


These are the lines distinguishing each cell of the table. By default, there is a spacing
between the borders of two cells of 2px. We apply the table border to the <td> and <th>
elements only, as those are the ones that form the cells.
Example:
<!DOCTYPE>
<html>
<head>
<style>
table, th, td
{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>

18 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

Output:

 CSS Table Border Collapse


We can merge the borders of two adjacent cells, i.e., remove the gap between the
adjacent borders completely. This is something most commonly done, and for this, we
need the border- collapse property. We apply this property to the <table> element. This
property has two values
: separate and collapse. separate is set by default.
Example CSS code:
<style>
table, th, td {
border: 1px solid black;
border-collapse:
collapse;
}
</style>
Output:

 CSS Table Padding


The padding property modifies the space between the cell content and the cell border.
Example CSS code:
<style>
table, th, td {
border: 1px solid black;
border-collapse:
collapse;
}
th, td {
padding: 10px;
19 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

}
</style>

Output:

CSS Table Height and Width


The height and width property allows us to change the height and width of the entire table, as well
as individual rows and columns. We can change the height and width of HTML elements
like <table>, <th>, <tr>, and <td> (i.e. all elements that have height and width properties).

Example CSS Code:


<style>
table, th, td {
border: 1px solid black;
border-collapse:
collapse;
}
th, td {
padding: 10px;
}
th {
height: 80px;
}
td {
height: 50px;
}
table{
width:50%
}
</style>
Output:

20 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

• CSS Table Text-align


As we can see in the above output, the content, apart from the header cells, are all left-aligned.
Using the text-align property, we can change the alignment to center or right. We apply this
property to the <td> element.

Example CSS Code:

<style>
table, th, td
{
border: 1px solid black;
border-collapse:
collapse;
}
td{
text-align: right;
}
</style>

Output:

CSS Table Color


This property is used to adjust the font color of the table content (We can do it to the entire table
by applying it to the <tbody> tag, or we can add a separate class or id and apply color to a specific
cell).
CSS code:
tbody{
color: white;
}

CSS Table Background-color


We can style even and odd table cells for better look and feel. In this code, we are
displaying different background colors on even and odd cells.

CSS code:
<style>
table, th, td
21 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

{
border: 1px solid black;
border-collapse:
collapse;
}
th, td {
padding: 10px;
}
tbody{
color: white;
}
tbody tr:nth-child(odd) {
background: #202932;
}
tbody tr:nth-child(even) {
background: #2c3844;
}
</style>

Output:

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

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

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

Example CSS code:


<style>
22 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

h2,p{
background-color: #b0d4de;
}
</style>
The element h2 and p contents are displayed with given background color

 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.

Example CSS code:


<style>
body {
background-image:
url("paper1.gif"); margin-
left:100px;
}
</style>

Note: The background image should be chosen according to text color. The bad
combination of text and background image may be a cause of poor designed and not
readable webpage.

 CSS background-repeat
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.

Example CSS code:

background-repeat: repeat-

x;
<style>
body {
background-image:

23 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

url("gradient_bg.png"); background-
repeat: repeat-x;
}
</style>

background-repeat: repeat-y;
<style>
body {
background-image:
url("gradient_bg.png"); background-
repeat: repeat-y;
}
</style>

 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.

Example CSS code:


<style>
body {
background: white
url('bbb.gif'); background-
repeat: no-repeat;
background-attachment:
fixed;
}
</style>

 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.
We can set the positions as center, top, bottom, left and right.
Example CSS code:
<style>
24 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

body {
background: white url('good-
morning.jpg'); background-repeat: no-
repeat;
background-attachment:
fixed; background-position:
center;
}
</style>

CSS Cursor
It is used to define the type of mouse cursor when the mouse pointer is on the element. It
allows us to specify the cursor type, which will be displayed to the user. When a user
hovers on the link, then by default, the cursor transforms into the hand from a pointer.
Let's understand the property values of the cursor.

Values Usage
alias It is used to display the indication of the cursor of something that
is to
be created.
auto It is the default property in which the browser sets the cursor.
all-scroll It indicates the scrolling.
col-resize Using it, the cursor will represent that the column can be
horizontally
resized.
cell The cursor will represent that a cell or the collection of cells is
selected.
context-menu It indicates the availability of the context menu.
default It indicates an arrow, which is the default cursor.
copy It is used to indicate that something is copied.
crosshair In it, the cursor changes to the crosshair or the plus sign.
e-resize It represents the east direction and indicates that the edge of the
box is
to be shifted towards right.
ew-resize It represents the east/west direction and indicates a bidirectional
resize
cursor.
n-resize It represents the north direction that indicates that the edge of the
box is
to be shifted to up.
ne-resize It represents the north/east direction and indicates that the edge
of the
box is to be shifted towards up and right.
25 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

move It indicates that something is to be shifted.


help It is in the form of a question mark or ballon, which represents that
help
is available.
None It is used to indicate that no cursor is rendered for the element.
No-drop It is used to represent that the dragged item cannot be dropped
here.
s-resize It indicates an edge box is to be moved down. It indicates the
south
direction.
Row-resize It is used to indicate that the row can be vertically resized.
Se-resize It represents the south/east direction, which indicates that an
edge box
is to be moved down and right.
Sw-resize It represents south/west direction and indicates that an edge of
the box
is to be shifted towards down and left.
Wait It represents an hourglass.
<url> It indicates the source of the cursor image file.
w-resize It indicates the west direction and represents that the edge of the
box is
to be shifted left.
Zoom-in It is used to indicate that something can be zoomed in.
Zoom-out It is used to indicate that something can be zoomed out.

The illustration of using the above values of cursor property is given below
<html>
<head>
</head>
<style>
body{
background-color: lightblue;
color:green;
text-align:
center; font-
size: 20px;
}
</style>
<body>
<p>Move your mouse over the below words for the cursor change.</p>
<div style = "cursor:alias">alias Value</div>
<div style = "cursor:auto">auto Value</div>
<div style = "cursor:all-scroll">all-scroll value</div>
26 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

<div style = "cursor:col-resize">col-resize value</div>


<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default value</div>
<div style = "cursor:copy">copy value</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ew-resize">ew-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
<div style = "cursor:progress">Progress</div>
<div style = "cursor:no-drop">no-drop</div>
<div style = "cursor:not-allowed">not-allowed</div>
<div style = "cursor:vertical-text">vertical-text</div>
<div style = "cursor:zoom-in">Zoom-in</div>
<div style = "cursor:zoom-out">Zoom-out</div>
</body>
</html>

CSS Box Modeling


CSS Box Model is a Fundamental concept in CSS that governs how elements are
structured and positioned on a webpage. It is used to create the design and layout of web
pages.
The box model in CSS is a container that contains various
properties, including borders, margins, padding, and the content itself. These
properties collectively determine the dimensions and spacing of an element.

27 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

Properties of the CSS Box Model


These are the following properties in the CSS box model.
Content The content area contains the real content of the element, such as text, an image,
or a video player. It is the area where the content gets displayed on the webpage. Its
dimensions can be modified using properties like width and height.
Padding The padding area is the space around the content area and within the element's
border. It creates extra space inside the element's border and uses the same background as

the element itself. The dimensions of the padding is determined by the padding-
top, padding-right, padding-bottom, padding-left, and shorthand padding properties.
Border The border area is the space around the padding area and within the margin. It
includes the element's borders and wraps the content and any padding. Its size and style
can be controlled using border and related properties. For example, it can be set to dotted,
dashed, solid, double, none, or hidden. It can also have rounded corners using the border-
radius property.
Margin The margin area is the transparent space outside the element's border and doesn't
have any background color. The margin wraps the content, padding, and border and
mostly used to separate the element from other HTML elements on the web page. The
size of the margin area is specified using the margin-top, margin-right, margin-bottom,
margin-left, and shorthand margin properties.

Padding Vs Margin
One can get easily confused between padding and margin as they both give the effect of
adding space. The key differences between padding and margin are listed below.
Padding Margin
Padding is the inner space of an element Margin is the outer space of an element i.e. the
i.e. the space inside the element’s space outside the element’s border.
border.
28 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

The styling of an element, such as the The styling of an element, such as the background
background color, affects the padding. color, does not affect the margin.
It can have negative values that draws the
It does not allow negative values. element
closer to its neighbors than it would be by default.

Takeaway:
 Padding provides space within the element, whereas margin provides space
outside the element.

29 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

Example to explain the CSS box model

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main
{
font-size:30px;
font-
weight:bold;
} Text-
.gfg align:center;
{

margin-left:50px;
border:50px solid
Purple; width:300px;
height:200px;
} text-align:center;
.gfg1 padding:50px;
{
font-size:40px;
font-
weight:bold;
color:black;
margin-
} top:60px;
.gfg2 background-color:purple;
{

font-size:20px;
} font-
weight:bold;
background-color:white;

30 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

</style>
</head>
<body>
<div class = "main">CSS Box-Model Property</div>
<div class = "gfg">
<div class = "gfg1">JavaTpoint</div>
<div class = "gfg2">A best portal for learn Technologies</div>
</div>
</body>
</html>
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.
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.
Syntax:
display:value;
There are following CSS display values which are commonly used.

1. display: inline;
2. display: inline-block;
3. display: block;
4. display: none;

 CSS 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 in inline example.
The inline elements are:
o <span>

31 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

o <a>
o <em>
o <b> etc.

 CSS display inline-block


The CSS display inline-block element is very similar to inline element but the difference is
that you are able to set the width and height

 CSS display block


The CSS display block element takes as much as horizontal space as they can. Means the
block element takes the full available width. They make a line break before and after them.

The following example shows the different behavior of display: inline, display:
inline- block and display: block:

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color:
yellow;
}
span.b {
display: inline-
block; width:
100px; height:
100px; padding:
5px;
border: 1px solid blue;
background-color:
yellow;
}
span.c {
display:
block; width:
100px;
height:
100px;

32 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

padding: 5px;
border: 1px solid blue;
background-color:
yellow;
}
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display: inline</h2>
<div> <span class="a">HI</span> <span class="a">HELLO</span> </div>
<h2>display: inline-block</h2>
<div> <span class="b">HI</span> <span class="b">HELLO</span> </div>
<h2>display: block</h2>
<div> <span class="c">HI</span> <span class="c">HELLO</span> </div>
</body>
</html>
Output:

 CSS display none


The "none" value totally removes the element from the page. It will not take any space.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
33 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

h1.hidden {
display:
none;
}
</style>
</head>
<body>
<h1>This heading is visible.</h1>
<h1 class="hidden">This is not visible.</h1>
<p>You can see that the hidden heading does not contain any space.</p>
</body>
</html>

Output:

This heading is visible.

You can see that the hidden heading does not contain any space.
CSS Positioning
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.
Let's have a look at following CSS positioning:
1. CSS Static Positioning
2. CSS Fixed Positioning
3. CSS Relative Positioning
4. CSS Absolute Positioning

1. CSS Static Positioning


This is a by default position for HTML elements. It always positions an element
according to the normal flow of the page. It is not affected by the top, bottom, left and
right properties.

2. CSS Fixed Positioning


The fixed positioning property helps to put the text fixed on the browser. This fixed
test is positioned relative to the browser window, and doesn't move even we scroll
the window.

Example:
34 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {
position:
fixed; top:
50px; right:
5px; color:
blue;
}
</style>
</head>
<body>
<p>Some text...</p><p>Some text...</p><p>Some text...</p><p>........</p><p> .. </p
><p>........</p><p>........</p><p>........</p><p> ......... </p>
<p>........ </p><p>........</p><p>........</p><p>........</p><p>......... </p>
<p>........</p><p>........</p><p>Some text...</p><p>Some text...</p><p>Some text. </p>
<p class="pos_fixed">This is the fix positioned text.</p>
</body>
</html>
Output:

3. CSS Relative Positioning


The relative positioning property is used to set the element relative to its normal position.
Relative positioning changes the position of the HTML element relative to where it
normally appears. So "left:20" adds 20 pixels to the element's LEFT position.
You can use two values top and left along with the position property to move an HTML
element anywhere in the HTML document.
 Move Left - Use a negative value for left.
 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.
35 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

NOTE − You can use bottom or right values as well in the same way as top and left.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {
position: relative;
left: -30px;
}
h2.pos_right {
position: relative;
left: 30px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is positioned left according to its normal position</h2>
<h2 class="pos_right">This heading is positioned right according to its normal position</h2>
<p>The style "left:-30px" subtracts 30 pixels from the element's original left position.</p>
<p>The style "left:30px" adds 30 pixels to the element's original left position.</p>
</body>
</html>

Output:

4. CSS Absolute Positioning

The absolute positioning is used to position an element relative to the first parent element
that has a position other than static. If no such element is found, the containing block is
HTML.
With the absolute positioning, you can place an element anywhere on a page.
36 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

You can use two values top and left along with the position property to move an HTML
element anywhere in the HTML document.
 Move Left - Use a negative value for left.
 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
position:
absolute; left:
150px;
top: 250px;
}
</style>
</head>
<body>
<h2>This heading has an absolute position</h2>
<p> The heading below is placed 150px from the left and 250px from the top of the page.</p>
</body>
</html>

Output:

CSS Float
The CSS float property is a positioning property. It is used to push an element to the left or
right, allowing other element to wrap around it. It is generally used with images and
37 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

layouts.

To understand its purpose and origin, let's take a look to its print display. In the print
display, image is set into the page such that text wraps around it as needed.

Its web layout is also just similar to print layout.

How it works
Elements are floated only horizontally. So it is possible only to float elements left or right,
not up or down.
1. A floated element may be moved as far to the left or the right as possible. Simply, it
means that a floated element can display at extreme left or extreme right.

2. The elements after the floating element will flow around it.

3. The elements before the floating element will not be affected.


4. If the image floated to the right, the texts flow around it, to the left and if the image
floated to the left, the text flows around it, to the right.

CSS Float Properties


Property Description
clear The clear property is used to avoid elements after the floating elements which
flow
around it.

38 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

float It specifies whether the box should float or not.

CSS Float Property Values


Value Description
none It specifies that the element is not floated, and will be displayed just where it
occurs
in the text. this is a default value.
left It is used to float the element to the left.
right It is used to float the element to the right.
initial It sets the property to its initial value.
inherit It is used to inherit this property from its parent element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<img src="good-morning.jpg" alt="Good Morning
Friends"/> This is some text. This is some text. This is
some text.
This is some text. This is some text. This is some
text. This is some text. This is some text. This is
some text. This is some text. This is some text. This
is some text. This is some text. This is some text.
This is some text. This is some text. This is some
text. This is some text. This is some text. This is
some text. This is some text. This is some text. This
is some text. This is some text. This is some text.
This is some text. This is some text. This is some
text. This is some text. This is some text. This is
some text. This is some text. This is some text. This
is some text. This is some text. This is some text.
This is some text. This is some text. This is some
text.
</p>
39 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

</body>
</html>

Output:

CSS Gradients
Gradients are the combination of two or more colors (where one color fades into another) and
display the smooth transition between the nearest points of colors on our website. With CSS
Gradients, we can control the direction and the changes that must occur in the colors.
The Three Types of CSS Gradients are:
Linear Gradient
Radial Gradient
Conic Gradient

 CSS Linear Gradient


Linear Gradient is the most common type of gradient. We can set the gradient axis from top to
bottom, left to right, diagonally, or at any angle we want. The transition between two or more
colors occurs along a linear direction in a linear gradient.
Syntax:
background: linear-gradient (direction, color-stop1, color-stop2 .... );

The first parameter is the direction that is the direction we want to give to the gradient, i.e., to the
right, to the bottom right, etc. The other parameters are colors separated by a comma.
The default direction for linear gradient is top to bottom.

o CSS Linear Gradient: (Top to Bottom)


Top to Bottom Linear Gradient is the default linear gradient.
40 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

Example CSS code:


<style>
#gradient {
background: linear-gradient(red,green);
height: 200px;
width: 320px;
color: white;
}
</style>
o CSS Linear Gradient: (Left to Right)
The following example shows the linear gradient that starts from left and goes to
right. It starts red from left side and transitioning to green.
Example CSS code:
<style>
#gradient {
background: linear-gradient(to
right,red,green); height: 200px;
width: 320px;
}
</style>
o CSS Linear Gradient: (Diagonal)
If you specify both the horizontal and vertical starting positions, you can make a
linear gradient diagonal.
Example CSS code:
<style>
#gradient {
background: linear-gradient(to bottom
right,red,green); height: 200px;
width: 320px;
}
</style>

Example program for linear gradient:


<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
background :linear-gradient(to
right,red,green); height: 200px;

41 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

width:
320px; color:
white;
}
</style>
</head>
<body>
<div id="gradient">Linear gradient for 2 colors</div>
</body>
</html>
</body>
</html>

Output:

 CSS Radial Gradient


Radial Gradient starts from the center. We don't have to specify the angle in radial gradient as we
did in linear gradient. Instead, we have to specify the position and ending shape like circle, ellipse,
etc. By default, if we don't mention the shape radial-gradient() function sets the circle or ellipse
according to the box size.
Syntax
background: radial-gradient(shape size at position, start-color, ..., last-color);
Example program for radial gradient:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: radial-gradient(blue, green, red);
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
42 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

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

Output:

 CSS Conic Gradient


To set the shape of the cone, we have to rotate the shape from the center. To do that, we will use
the conic-gradient() function. It is slightly different from radial-gradient because the transition
between colors is placed around the circle, while in radial, it emerges from the circle. When we
view it from above, the shape looks like a cone.
Syntax:
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

Example program for conic gradient:


<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
height: 220px;
width: 220px;
background-color: black; /* For browsers that do not support
gradients */ background-image: conic-gradient(white, pink, red,
yellow, black);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>

Output:

43 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

CSS shadows
CSS supported to add shadow to text or elements. Shadow property has divided as follows
 Text shadow
 Box Shadow

 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.
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.
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.
Example:

<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
44 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>

<body>
<h1>Tutorialspoint.com</h1>
<h2>Tutorialspoint.com</h2>
<h3>Tutorialspoint.com</h3>
<h4>Tutorialspoint.com</h4>
<h5>Tutorialspoint.com</h5>
<h6>Tutorialspoint.com</h6>
<p>Tutorialspoint.com</p>
</body>
</html>
Output:

 Box-shadow CSS
It is used to add shadow-like effects around the frame of an element.
Syntax:
box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none;

values:
45 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

h-offset: It horizontally sets the shadow position. Its positive value will set the shadow to
the right side of the box. Its negative value is used to set the shadow on the left side of the
box.
v- offset: Unlike the h-offset, it is used to set the shadow position vertically. The positive
value in it sets the shadow below the box, and the negative value sets the shadow above of
the box. blur: As its name implies, it is used to blur the box-shadow. This attribute is
optional.
spread: It sets the shadow size. The spread size depends upon the spread value.
color: As its name implies, this attribute is used to set the color of the shadow. It is an
optional attribute.
inset: Normally, the shadow generates outside of the box, but by using inset, the shadow
can be created within the box.
initial: It is used to set the property of the box-shadow to its default value.
inherit: it is inherited from its parent.
none: It is the default value that does not include any shadow property.

Example:
<html>
<head>
<style>
div {
width: 300px;
height:
100px;
padding:
15px;
background-color: red;
box-shadow: 10px
10px;
}
</style>
</head>

<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>

Output:
46 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

CSS Transforms
CSS3 supports transform property. This transform property facilitates to translate, rotate,
scale, and skews elements according to the values set.Transformation is an effect that is
used to change shape, size and position.
Syntax:
No Transforms: transform: none;
One Transform: transform: transform-function;
Multiple Transforms: transform: transform-function transform-function
transform- function;
Transform Functions
 Rotate
 Scale
 Skew
 Translate
 Matrix

There are two type of transformation i.e. 2D and 3D transformation supported in CSS3.
1. CSS 2D Transforms
The CSS 2D transforms are used to re-change the structure of the element as translate,
rotate, scale and skew and move HTML elements. It transforms the element without
affecting other elements on the page; in other words, it does not cause other elements on
the page to shift and instead gets overlapped over them. The transformation is applied to
the element's center (i.e., the point specified by the transform-origin property) by default.
Syntax:
html-element {
transform: value;
}

Following is a list of 2D transforms values


47 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

 translate()
The CSS translate() method is used to move an element from its current position according
to the given parameters i.e. X-axis and Y-axis.:
o translate(x,y): It is used to transform the element along X-axis and Y-axis.
o translateX(n): It is used to transform the element along X-axis.
o translateY(n): It is used to transform the element along Y-axis.
Syntax:
transform: translate(X, Y);
transform: translateX(n);
transform: translateY(n);

Example:
transform: translateX(50px, 50px);

If the element is located with 0 pixels on the left and top, then using above code it
will move 50 pixels to the right of its starting position, and move the
element vertically 50 pixels down as below

rotate(): The CSS rotate() method is used to rotate an element clockwise or anti-clockwise
according to the given degree. if the value of the angle is positive, the item will turn clockwise,
and with a negative value, it will rotate anti-clockwise.
Syntax:
transform:
rotate(angle);
transform:
rotateX(angle);
transform:
rotateY(angle);

Example:
transform: rotate(90deg);
48 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

The above code will rotate an element in 90 degrees in the clockwise direction.

scale(): It is used to increase or decrease the size of an element according to the given width
and height. scale() takes two arguments, one for horizontal size change and the other for
vertical size change. If scale() just has one value, it will modify the element in both directions
equally depending on that value.
o scale(x,y): It is used to change the width and height of an element.
o scaleX(n): It is used to change the width of an element.
o scaleY(n): It is used to change the height of an element.
Syntax:
transform: scale(X, Y);

transform: scaleX(n);

transform: scaleY(n);

Example:
transform: scale(0.5, 2)

This code decreases the element's horizontal size by half while increasing its vertical size
by two times.

 skew(): The skew() method tilts an element along the x-axis and/or y-axis as per a given
angle.
o skewX(): It specifies the skew transforms along with X-axis.
o skewY():It specifies the skew transforms along with Y-axis.
49 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

Syntax:
transform: skew(X-angle, Y-
angle); transform: skewX(angle);
transform: skewY(angle);

Example:
transform: skewY(30deg)

This code will shift down the points to the right of the default position.

matrix(): It combines all the 2D transform methods into one. The matrix() method takes six
parameters containing mathematic functions. The parameters are as follows:
Syntax:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Example:
transform: matrix(2, -0.3, 0, 2, 100, 0);

This code will double the size of the element along both the axis as the value of scaleX
and scaleY are 2. It will also skew the element along the Y-axis only since the value
of skewx is 0 and move the element 100px to the right horizontally.

Example program for matrix() to illustrate all the above methods


<!DOCTYPE html>
<html>
<head>
<style>
50 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

div {
width: 300px;
height: 100px;
background-color:
lightpink; border: 1px solid
black;
}
div#myDiv1 {

transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */


}
div#myDiv2 {

transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */


}
</style>
</head>

<body>
<p>The matrix() method combines all the 2D transform methods into one.</p>
<div>
This is a normal div element.
</div>
<div id="myDiv1">
Using the matrix() method.
</div>
<div id="myDiv2">
Another use of the matrix() method.
</div>
</body>
</html>
Output:

2. CSS 3D Transforms
CSS provides a set of properties that allow you to transform and adjust the elements in the
51 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

three- dimensional space. The properties that let you transform the elements include 3D
translations, rotations, scaling, perspective adjustments, etc.
The following table lists all the various properties that are used to transform the elements
in the three-dimensional space:

Function Description
matrix3D(n,n,n,n,n,n,n,n,n,n) It specifies a 3D transformation, using a 4x4 matrix of
16
values.
translate3D(x,y,z) It specifies a 3D translation.
translateX(x) It specifies 3D translation, using only the value for the X-
axis.
translateY(y) It specifies 3D translation, using only the value for the Y-
axis.
translateZ(z) It specifies 3D translation, using only the value for the Z-
axis.
scale3D(x,y,z) It specifies 3D scale transformation
scaleX(x) It specifies 3D scale transformation by giving a value for
the
X-axis.
scaley(y) It specifies 3D scale transformation by giving a value for
the
Y-axis.
scaleZ(z) It specifies 3D scale transformation by giving a value for
the
Z-axis.
rotate3D(X,Y,Z,angle) It specifies 3D rotation along with X-axis, Y-axis and Z-axis.
rotateX(angle) It specifies 3D rotation along with X-axis.
rotateY(angle) It specifies 3D rotation along with Y-axis.
rotateZ(angle) It specifies 3D rotation along with Z-axis.
perspective(n) It specifies a perspective view for a 3D transformed
element.

52 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

CSS Transitions
CSS Transitions is one of the significant aspects of Animations in CSS which allows us to make
some amazing interactive features.
The CSS transitions are effects that are added to change the element gradually from one
style to another, without using flash or JavaScript.
We 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.

Here, transition property includes 4 properties which are transition-property, transition-


duration, transition-timing-function, and transition-delay.

Syntax:
transition: [property] [duration] [timing function] [delay];

The four CSS Transition Properties:


Suppose, we throw a ball from one place to another. During the whole process(transition) the ball
will change its State.
Similarly happens with CSS properties. Transitions come into play when the CSS properties
change from one state to another.
To apply CSS transitions to our element, we have to apply certain properties to it. It contains a
combination of four properties mentioned below:
1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay

1. transition-property
transition-property is used to select the property of an element on which the transition is to be
applied.

Syntax:
transition-property: <property_name>|<property_name>, ...<property_name>] | none | all

| Here, <property_name> refers to the CSS Property

53 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

Example:
<style>
div {
width: 100px;
height: 100px;
background: Blue;
transition-property: width;
}
div:hover {
width:
200px;
}
</style>
Here the box expands while hovering over it. It's because we have added a transition-
property width which changes the width of the box to 200 px while hovering over it.

2. transition-duration
To apply a smooth transition effect, we use transition-duration.Transition duration
defines the time duration an element takes to transition over two states.

Syntax:
transition-duration: time|initial|inherit;
time: In seconds(s) or milliseconds(ms)
initial: Sets this property to its default value.
inherit: Inherits this property from its parent element.

Example CSS Code:


div {
width: 100px;
height: 100px;
background:
blue;
transition-property:
width; transition-
duration: 1s;
}
Here, the transition appears to be more smooth because we have added transition-

54 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

duration: 1s; due to which the transition takes 1s to complete the transition.

Note: Default value of transition-duration is 0s.


3. transition-timing-function
It describes how the transition speed will vary over the time duration.

Syntax:
transition-timing-function:linear|ease|ease-in|ease-out|steps(int,start|end)|cubic-bezier(n,n,n,n)
|initial|inherit;

Here, the default value is ease where the transition starts and ends slowly while accelerating in
the middle. cubic-bezier() is a function used to defines a Cubic Bezier curve for a smoother
transition.

Example CSS Code:


div {
width: 100px;
height: 100px;
background:
blue;
transition-property:
width; transition-
duration: 2s;
transition-timing-function: linear;
}

4. transition-delay
The transition-delay property is used to specify the time delay before the transition start.

Syntax:
transition-delay:time ;

Here, time is mentioned in seconds or milliseconds.

Example CSS Code:


div {
width: 100px;
height: 100px;
background:
blue;
55 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

transition-property:
width; transition-
duration: 2s;
transition-timing-function:
linear; transition-delay: 1s;
}
Notice there is aShorthand
The transition transition-delay of 1s when the transition begins.
Property
CSS transition Shorthand Property allows developers to write all 4 properties in a single statement
instead of writing them separately.

Syntax:
transition: [property] [duration] [timing function] [delay];
Example CSS code:
div {
transition: width 2s linear 1s;
}

Let's take an example. Here, the transition effects on width, height and transformation.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:15px;
width: 150px;
height: 100px;
background:
violet;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height:
200px;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div><b>JavaTpoint.com</b><p> (Move your cursor on me to see the effect)</p></div>
</body>
</html>
56 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

Output:

Animations in CSS
CSS Animation is a step-by-step process of moving or changing the position and appearance of
the objects on a webpage. Earlier in any website, animations were done using JavaScript,
which makes the process tedious and harder to understand. But later, CSS comes with many
pre-defined attributes(CSS Properties) that just make the animation part easier and faster
with fewer complexities(like creating objects in JavaScript, writing many DOM
manipulations, etc.).
An animation makes an element change gradually from one style to another. You can add as
many as properties you want to add. You can also specify the changes in percentage.0%
specify the start of the animation and 100% specify its completion.

CSS3 @keyframes Rule


The animation is created in the @keyframe rule. It is used to control the intermediate
steps in a CSS animation sequence.

How CSS animation works


When the animation is created in the @keyframe rule, it must be bound with selector;
otherwise the animation will have no effect.
The animation could be bound to the selector by specifying at least these two properties:

o The name of the animation


o The duration of the animation

CSS animation properties


Property Description
@keyframes It is used to specify the animation.
animation This is a shorthand property, used for setting all the
properties,
except the animation-play-state and the animation-fill-
mode property.

57 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

animation-delay It specifies when the animation will start.


animation-direction It specifies if or not the animation should play in reserve
on alternate cycle.

animation-duration It specifies the time duration taken by the animation to


complete one cycle.

animation-fill-mode it specifies the static style of the element. (when the


animation is not playing)

animation-iteration- It specifies the number of times the animation should be


count played.
animation-play-state It specifies if the animation is running or paused.
animation-name It specifies the name of @keyframes animation.
animation-timing- It specifies the speed curve of the animation.
function

CSS animation example: Moving Rectangle


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myfirst 5s;
}
/* Standard syntax */
@keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:300px; top:0px;}
50% {background:blue; left:300px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

58 University of Mysore
Ashwini M Lecturer, Dept.Computer Science,GFGC Gundlupet Web Technologies

</style>
</head>
<body>
<p><b>Note:</b> The Internet Explorer 9 and its earlier versions don't support this example.</p>
<div></div>
</body>
</html>

59 University of Mysore

You might also like