Scribd
Upload
11 views6 pages

Internet Material Bca 1 - Unit 3 (CSS)

The document provides an overview of Cascading Style Sheets (CSS), including its definition, advantages, and types such as inline, internal, and external styles. It explains the use of class and ID selectors, as well as various CSS properties related to fonts, text, and layout. Additionally, it highlights the importance of CSS in web design for maintaining consistency and improving load times across multiple web pages.

Uploaded by

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

Internet Material Bca 1 - Unit 3 (CSS)

The document provides an overview of Cascading Style Sheets (CSS), including its definition, advantages, and types such as inline, internal, and external styles. It explains the use of class and ID selectors, as well as various CSS properties related to fonts, text, and layout. Additionally, it highlights the importance of CSS in web design for maintaining consistency and improving load times across multiple web pages.

Uploaded by

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

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W.

College

UNIT-3
Q.1 WHAT IS CSS? EXPLAIN TYPES OF CSS (3 OR 5 M) (MIMP)  Easy maintenance − To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
CSS  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.
CASCADING STYLE SHEET C – CASCADING - DESIGN LANGUAGE  Multiple Device Compatibility − Style sheets allow content to be optimized for more
S – STYLE - HANDLES THE LOOK AND FEEL PART OF than one type of device.
 INTRODUCTION TO CSS & TYPES OF CSS S – SHEET THE WEBPAGE
 CLASS & ID SELECTOR  Global web standards − Now HTML attributes are being deprecated and it is being
- CSS SAVE TIME
 CSS FONT PROPERTY MAINTAINS BY - PAGES LOAD FASTER recommended to use CSS.
 CSS TEXT PROPERTY W – WORLD - EASY
 CSS BACKGROUND PROPERTY W – WIDE - GLOBAL WEB STANDARD
 CSS MARGIN PROPERTY - MULTIPLE DEVICE COMPATIBILITY
TYPES OF CSS
W – WEB
 CSS LIST PROPERTY C – CONSORTIUM CSS TYPE
 INTRODUCTION TO CSS 3
 CSS 3 BORDER PROPERTY
 CSS 3 GRADIENT PROPERTY
 CSS 3 DROP SHADOW PROPERTY DETAILS
INLINE INTERNAL EXTERNAL
 CSS 3 2D & 3D TRANSFORM PROPERTY CSS INTORDUCTION
 CSS 3 TRANSITION PROPERTY
 CSS 3 BOX SIZING PROPERTY  CSS stands for Cascading Style Sheets
 CSS 3 POSITION PROPERTY  Styles define how to display HTML elements - UNIQUE STYLE FOR - UNIQUE STYLE FOR SINGLE - STYLE SHEET FOR ENTIRE
 CSS 3 MEDIA QUERY SINGLE ELEMENT PAGE WEBSITE
 Styles are normally stored in Style Sheets
 CSS FLEXBOX PROPERTIES - AFFECT ONLY ONE - AFFECT ONLY ONE PAGE - EXTENSION OF FILE IS .CSS
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
ELEMENT - SPECIFIED IN <HEAD> - LINK .CSS FILE WITH .HTML
media FILE
- STYLE ATTRIBUTE IS USED. SECTION
 CSS saves a lot of work. It can control the layout of multiple web pages all at once o <H1 STYLE = - USE <STYLE> TAG - USING <LINK> TAG
 External style sheets are stored in CSS files “COLOR:RED”>HI o <STYLE>
 CSS Solved a Big Problem </H1> H1{ COLOR:RED; }
o HTML was NEVER intended to contain tags for formatting a web page! </STYLE>
o HTML was created to describe the content of a web page, like:
 <h1>This is a heading</h1> 
 <p>This is a paragraph.</p>  WORKING OF HTML, CSS & JAVASCRIP
When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers.
 To solve this problem, the World Wide Web Consortium (W3C) created CSS.
 CSS removed the style formatting from the HTML page!

Advantages of CSS
 CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML
pages.
 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So less code means faster download times.

Prepared By – APKubavat Networking & Internet Environment 1 Prepared By – APKubavat Networking & Internet Environment 2 Prepared By – APKubavat Networking & Internet Environment 3
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

How to Insert a Style Sheet o To use inline styles you use the style attribute in the relevant tag. The style attribute p.center {text-align: center}
 When a browser reads a style sheet, it will format the document according to it. There are can contain any CSS property.
three ways of inserting a style sheet: o The example shows how to change the color and the left margin of a paragraph: o You have to use the class attribute in your HTML document:
1. External Style Sheet <p style="color: sienna; margin-left: 20px"> <p class="right">
2. Internal Style Sheet This is a paragraph</p> This paragraph will be right-aligned.
3. Inline Style </p>
1 WORD QUESTION - ANSWER <p class="center">
1. External Style Sheet SR. QUESTION ANSWER This paragraph will be center-aligned.
o An external style sheet is ideal when the style is applied to many pages. NO </p>
o With an external style sheet, you can change the look of an entire Web site by 1 FULL FORM OF CSS CASCADING STYLE SHEET o To apply more than one class per given element, the syntax is:
changing one file. 2 CSS WAS MANAGED BY W3C <p class="center bold">
o Each page must link to the style sheet using the <link> tag. 3 FULLFORM OF W3C WORLD WIDE WEB CONSORTIUM This is a paragraph.
o The <link> tag goes inside the head section: 4 CSS IS USED TO HANDLES THE LOOK AND FEEL PART OF </p>
<head> THE WEBPAGE o You can also omit the tag name in the selector to define a style that will be used by all HTML
<link rel="stylesheet" type="text/css" href="mystyle.css" /> 5 HOW MANY TYPES OF CSS ARE THERE? 3 elements that have a certain class. In the example below, all HTML elements with
</head> 6 LIST OUT TYPES OF CSS. 1. INLINE class="center" will be center-aligned:
o The browser will read the style definitions from the file mystyle.css, and format the 2. INTERNAL .center {text-align: center}
document according to it. 3. EXTERNAL
o An external style sheet can be written in any text editor. The file should not contain 7 INLINE CSS IS USED TO GIVE UNIQUE STYLE FOR SINGLE ELEMENT o In the code below both the h1 element and the p element have class="center". This means
any html tags. Your style sheet should be saved with a .css extension. 8 INTERNAL CSS IS USED TO GIVE UNIQUE STYLE FOR SINGLE PAGE that both elements will follow the rules in the ".center" selector:
o An example of a style sheet file is shown below: 9 WHAT IS THE USE OF EXTERNAL STYLE SHEET? STYLE SHEET FOR ENTIRE WEBSITE
Hr {color: sienna} 10 GIVE THE EXTENSION OF EXTERNAL STYLE SHEET. .CSS <h1 class="center">
p {margin-left: 20px} This heading will be center-aligned
body {background-image: url("images/back40.gif")} Q.2 EXPLAIN CLASS SELECTOR AND ID SELECTOR (3 M) (MIMP) </h1>
<p class="center">
2. Internal Style Sheet SELECTORS This paragraph will also be center-aligned.
o An internal style sheet should be used when a single document has a unique style. </p>
You define internal styles in the head section by using the <style> tag, like this:
<head> The id Selector
ID CLASS
<style type="text/css"> o The id selector uses the id attribute of an HTML element to select a specific element.
hr {color: sienna} o The id of an element is unique within a page, so the id selector is used to select one unique
p {margin-left: 20px} - USED TO STYLE ELEMENT WITH - USED TO STYLE ELEMENT WITH element!
body {background-image: url("images/back40.gif")} SPECIFIED ID SPECIFIED CLASS o You can also define styles for HTML elements with the id selector. The id selector is defined
</style> - USE # SIGN - USE .(DOT) SIGN as a #.
</head> - APPLY STYLING IN ONE ELEMENT - APPLY STYLING IN MULTIPLE ELEMENT o The style rule below will match the element that has an id attribute with a value of "green":
o The browser will now read the style definitions, and format the document according #green {color: green}
to it. o The style rule below will match the p element that has an id with a value of "para1":
DETAIL p#para1{
3. Inline Style Sheet
Class Selector text-align: center;
o An inline style loses many of the advantages of style sheets by mixing content with o With the class selector you can define different styles for the same type of HTML element. color: red}
presentation. Use this method sparingly, such as when a style is to be applied to a o Say that you would like to have two types of paragraphs in your document: one right-aligned
single occurrence of an element. paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
p.right {text-align: right}

Prepared By – APKubavat Networking & Internet Environment 4 Prepared By – APKubavat Networking & Internet Environment 5 Prepared By – APKubavat Networking & Internet Environment 6
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

Value Description large


1 WORD QUESTION - ANSWER family-name A prioritized list of font family names and/or generic family names for an x-large
SR. QUESTION ANSWER generic-family element. xx-large
NO
Example smaller Sets the font-size to a smaller size than the parent element
1 WHAT IS THE USE OF CLASS SELECTOR? APPLY STYLING IN MULTIPLE ELEMENT
body{font-family: courier, serif} larger Sets the font-size to a larger size than the parent element
2 WHAT IS THE USE OF ID SELECTOR? APPLY STYLING IN ONE ELEMENT
3 WHICH SIGN IS USED TO DECLARE CLASS SELECTOR? .(DOT)
p{font-family: arial, "lucida console", sans-serif } length Sets the font-size to a fixed size
<p style="font-family: arial, 'lucida console', sans-serif"> % Sets the font-size to a % of the parent element
4 WHICH SIGN IS USED TO DECLARE ID SELECTOR? #
5 HOW MANY TYPES OF SELECTORS ARE THERE? 2
2. font-style Property Example
o The font-style property sets the style of a font. body{ font-size: x-large}
Q.3 EXPLAIN FONT PROPERTY OF CSS (3 OR 5 M)
p{ font-size: 10px}
Value Description
FONT PROPERTY Normal Default. The browser displays a normal font 5. font-variant property
Italic The browser displays an italic font o The font-variant property is used to display text in a small-caps font, which means
oblique The browser displays an oblique font that all the lower case letters are converted to uppercase letters, but all the letters in the small-
font-style font-varient font-weight font-size font-family caps font have a smaller font-size compared to the rest of the text.
Example
Body { font-style: italic }
Value Description
TEXT IN ITALIC CHANGE TEXT SET THICKNESS HEIGHT OF THE DEFINE THE FONT
THAT APPLY 3. font-weight Property Normal Default. The browser displays a normal font
OR OBLIQUE TO SMALLCAPS OF THE FONT FONT
o The font-weight property sets how thick or thin characters in text should be small-caps The browser displays a small-caps font
VALUES: VALUES: VALUES: VALUES: VALUES: displayed.
normal Normal Normal xx-small sans-serif Example
Italic Small-caps Bold x-small serif Value Description P{font-variant: small-caps}
oblique Bolder small monospace Normal Default. Defines normal characters
Lighter medium Bold Defines thick characters 1 WORD QUESTION - ANSWER
cursive
100 TO 900 large SR. QUESTION ANSWER
x-large fantasy Bolder Defines thicker characters
NO
xx-large caption Lighter Defines lighter characters
1 FONT PROPERTIES ARE USED TO WORK WITH FONTS
smaller "string" 100 to Defines from thin to thick characters. 400 is the same as normal, and 700 is the same 2 FONT-STYLE PROPERTY SET FONT IN ITALIC & OBLIQUE
larger 900 as bold 3 FONT-VARIENT PROPERTY SET FONT IN SMALL-CAPS
percentage
4 FONT-WEIGHT PROPERTY SET THICKNESS OF THE FONT
DETAIL Example 5 FONT-SIZE PROPERTY SET SIZE OF THE FONT
o The CSS font properties allow you to change the font family, boldness, size, and the style of p{ font-weight: bold} 6 FONT-FAMILY PROPERTY DEFINE FONT THAT APPLY ON TEXT
a text. 7 GIVE EXAMPLE OF FONT-FAMILY. font-family: arial
1. font-family Property 4. font-size Property 8 GIVE EXAMPLE OF FONT-STYLE. font-style: italic
o The font-size property sets the size of a font. 9 GIVE EXAMPLE OF FONT-SIZE. font-size: x-large
o The font-family property is a prioritized list of font family names and/or generic family 10 GIVE EXAMPLE OF FONT-VARIANT. font-variant: small-caps
names for an element. Value Description
o The browser will use the first value it recognizes. xx-small Sets the size of the font to different sizes, from xx-small to xx-large.
o Separate each value with a comma, and always offer a generic-family name as the last x-small
alternative. small Default value: medium
medium

Prepared By – APKubavat Networking & Internet Environment 7 Prepared By – APKubavat Networking & Internet Environment 8 Prepared By – APKubavat Networking & Internet Environment 9
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

Q.4 EXPLAIN TEXT PROPERTY OF CSS (3 OR 5 M) 2. text-align Property EXAMPLE


o The text-align property aligns the text in an element.
<!DOCTYPE html>
TEXT PROPERTY
<html>
Examples
<body>
P{ text-align: center}
<p style="text-decoration: underline;">Text is underline decorate</p>
color text-align text-decoration text-transformation letter-spacing <p style="text-decoration: overline;">Text is overline decorate</p>
& Value Description <p style="text-decoration: blink;">Text is blink decorate</p>
word-spacing Left Aligns the text to the left. <p style="text-decoration: line-through">Text is line delete decorate</p>
SET TEXT ALIGNMENT DECORATE THE TRANSFORM Default value: Browser dependent <p style="text-decoration: none;">Text is nothing any decorate value</p>
COLOR OF TEXT TEXT THE TEXT right Aligns the text to the right
SPACE BETWEEN
</body>
VALUES: VALUES: VALUES: VALUES: LETTERS AND center Centers the text </html>
Name: Orange left Underline Capitalize WORDS justify
HexaCode:#FFA right Overline Lowercase
RGB: rgb center Blink uppercase VALUES GIVE IN 6. text-transformation
PIXELS
3. word-spacing Property
(255, 165, 0) None
Line-through o The word-spacing property increases or decreases the white space between words. CSS text-transformation property use to text transform.
CSS text-transformation possible value capitalize, lowercase and uppercase in a text.
USED TO GIVE TEXT SHADOW text-shadow Examples
CSS text-transformation property value capitalize, it means first letter capital for all word.
EFFECT P{word-spacing: 30px}
p{ word-spacing: -0.5px}
VALUES: Example
text-shadow: 2px 2px 5px red; <!DOCTYPE html>
2PX – HORIZONTAL Value Description
<html>
2PX – VERTICAL normal Default. Defines normal space between words <body>
5PX – BLUR EFFECT length Defines a fixed space between words
RED – COLOR OF SHADOW <p style="text-transform: capitalize">This text transform to capital.</p>
<p style="text-transform: lowercase">This text transform to lowercase.</p>
4. letter-spacing Property <p style="text-transform: uppercase">This text transform to uppercase.</p>
DETAIL o The letter-spacing property increases or decreases the white space between characters. </body>
o The CSS text properties allow you to control the appearance of text. </html>
o It is possible to change the color of a text, increase or decrease the space between Examples
characters in a text, align a text, decorate a text, indent the first line in a text, and more. P{ letter-spacing: 12px} 7. text-shadow
p{letter-spacing: -0.5px}
1. color Property CSS text-shadow property is use to decorate text and apply shadow effect style.
o The color property sets the color of a text. Value Description Example
Examples normal Default. Defines normal space between characters <!DOCTYPE html>
Body { color: rgb(255,255,0)} length Defines a fixed space between characters <html>
<body>
Value Description 5. TEXT DECORATION <p style="text-shadow: 4px 4px 8px
color The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number Text decoration is used to add or remove decorations from the text. orange;">This text is represent text shadow effect.</p>
(#ff0000). Text decoration can be underline, overline, line-through or none. </body>
Syntax: </html>
Default value: Browser dependent body{
text-decoration:decoration type;}

Prepared By – APKubavat Networking & Internet Environment 10 Prepared By – APKubavat Networking & Internet Environment 11 Prepared By – APKubavat Networking & Internet Environment 12
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

1 WORD QUESTION - ANSWER 1. background-attachment  Property Values


SR. QUESTION ANSWER  The background-attachment CSS property defines whether the background image scrolls
NO with the document, or remains fixed to the viewing area.
1 TEXT PROPERTIES ARE USED TO DECORATE TEXT Value Description
 Syntax
2 COLOR PROPERTY IS USED TO SET COLOR OF THE TEXT
The syntax of the property is given with: Color Specifies the background color. Look at CSS Color Values for the list of possible color
3 TEXT-ALIGN PROPERTY IS USED FOR ALIGNMENT OF THE TEXT
background-attachment: scroll | fixed | initial | inherit values.
4 TEXT-DECORATION PROPERRTY IS USED TO DECORATE THE TEXT
UNDERLINE,OVERLINE,BLINK  Example
transparent Sets the background-color to transparent i.e. content and background of the element
5 TEXT-TRANSFORMATION PROPERTY IS USED TO TRANSFORM TEXT IN TO UPPERCASE, body {
behind the element with transparent background will be visible through. This is default.
LOWERCASE background-image: url("images/recycle.jpg");
6 LETTER-SPACING PROPERTY IS USED TO GIVE SPACE BETWEEN LETTERS background-attachment: fixed; initial Sets this property to its default value.
7 LETTER-SPACING PROPERTY IS USED TO GIVE SPACE BETWEEN WORDS }
8 TEXT-SHADOW PROPERTY IS USED TO GIVE SHADOW EFFECT ON TEXT  Property Values 3. background-image
9 GIVE EXAMPLE OF TEXT-ALIGN text-align: center
10 GIVE EXAMPLE OF TEXT-DECORATION. font-variant: small-caps; Value Description
 The background-image CSS property sets the background image for an element. It is often
11 GIVE EXAMPLE OF TEXT-TRANSFORMATION. text-transform: capitalize;
Scroll The default value. The background image is fixed with regard to the element itself and scroll more convenient to use the shorthand background property.
12 GIVE EXAMPLE OF TEXT-SHADOW text-shadow: 4px 4px 8px orange;
within the viewport along with its containing element.  Syntax
background-image: url | none | initial | inherit
Q.5 EXPLAIN BACKGROUND PROPERTY OF CSS (3 OR 5 M)(WITH EXAMPLE)(IMP) Fixed The background image is fixed with regard to the viewport and doesn't move with the  Example
element. body {
BACKGROUND PROPERTY Local The background image stays fixed with regard to the element's contents: if the element has a background-image: url("images/pattern.jpg");
scrolling mechanism, the background scrolls with the element's contents. }
 Property Values
background- background- background- background- background- Initial Sets this property to its default value.
attachment color image position repeat
Inherit If specified, the associated element takes the computed value of its parent Value Description
element background-attachment property.
SPECIFIES
url The location of the image resource to be used as a background image.
BACKGROUND BACKGROUND BACKGROUND SET INITIAL
IMAGE SCROLL COLOR FOR AN IMAGE FOR AN POSITION OF WHETHER IMAGE 2. background-color none The default value. If specified, no background image will be displayed.
IS REPEAT OR NOT
OR FIX ELEMENT ELEMENT AN ELEMENT  The background-color CSS property sets the background color of an element. You can set
color of the background either through a color value or the keyword transparent. initial Sets this property to its default value.
VALUES:
VALUES: VALUES: VALUES: VALUES:  The background of an element is the total size of the element, including padding and
repeat
scroll color URL percentage 4. background-position
repeat-x border (but not the margin).
fixed transparent none length
 Syntax  The background-position CSS property sets the initial position (i.e. origin) of the
initial left repeat-y
center background-color: color | transparent | initial | inherit element's background-image.
no-repeat  It is often more convenient to use the shorthand background property.
right  Example
percentage body {  Syntax
background-color: yellow;} background-position: [ percentage | length | left | center | right ] values | initial | inherit
h1 {  E
DETAIL
background-color: rgb(255,0,0);} xample
o The CSS background properties allow you to control the background color of an element,
p{ p{
set an image as the background, repeat a background image vertically or horizontally, and
background-color: #00ff00;} background-image: url("images/smiley.png");
position an image on a page.
background-position: 50% center;}

Prepared By – APKubavat Networking & Internet Environment 13 Prepared By – APKubavat Networking & Internet Environment 14 Prepared By – APKubavat Networking & Internet Environment 15
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

 Property Values 1 WORD QUESTION - ANSWER DETAIL


SR. QUESTION ANSWER
Value Description NO
1. MARGIN PROPERTY
1 WHAT IS THE USE OF BACKGROUND PROPERTIES? TO SET THE BACKGROUND OF WEBPAGE OR
bottom Equivalent to 100% for the vertical position. ELEMENTS  The margin CSS property sets the margin on all four sides of the element. It is a
2 BACKGROUND-ATTACHMENT PROPERTY IS USED FOR BACKGROUND IMAGE SCROLL OR FIX shorthand property for margin-top, margin-right, margin-bottom, and margin-
center Equivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the 3 BACKGROUND-COLOR PROPERTY IS USED TO SET BACKGROUND COLOR FOR AN ELEMENT left property.
vertical position if it is. 4 BACKGROUND-IMAGE PROPERTY IS USED TO SET BACKGROUND IMAGE FOR AN ELEMENT  Syntax
5 BACKGROUND-POSITION PROPERTY IS USED TO SET INITIAL POSITION OF AN ELEMENT margin: [ length | percentage | auto ]| initial | inherit
left Equivalent to 0% for the horizontal position. 6 BACKGROUND-REPETE PROPERTY IS USED TO SPECIFIES WHETHER IMAGE IS REPEAT OR
NOT  Example
right Equivalent to 100% for the horizontal position. h1 {
7 GIVE EXAMPLE OF BACKGROUND-ATTACHMENT background-attachment: fixed;
top Equivalent to 0% for the vertical position. 8 GIVE EXAMPLE OF BACKGROUND-COLOR. background-color: #00ff00; margin-left: 25px;
9 GIVE EXAMPLE OF BACKGROUND-IMAGE. background-image: }
length Actual pixel lengths. For example, with a value pair of '10px 20px', the upper left corner of url("images/pattern.jpg"); p{
the image is placed 10px to the right and 20px below the upper left corner of the 10 GIVE EXAMPLE OF BACKGROUND-POSITION background-position: 50% center;
margin: 50px 100px;
11 GIVE EXAMPLE OF BACKGROUND-REPETE background-repeat: repeat-x;
element's box. }
percentage A percent of the element size. For example, with a value pair of '0% 0%', the upper left Q.6 EXPLAIN MARGIN AND PADDING PROPERTIES OF CSS (2 OR 3 M)(5 M WITH EXAMPLE)(IMP)  This shorthand notation can take one, two, three, or four whitespace separated values.
corner of the image is aligned with the upper left corner of the element's box. o If one value is set, this margin applies to all 4 sides.
o If two values are set, the first value applies to top and bottom, the second value
initial Sets this property to its default value. 2 PROPERTIES FOR
applies to the right and left side.
SPACING
o Three values apply to the top, horizontal (i.e. right and left) and bottom side.
5. background-repeat o Four values apply to the top, right, bottom, left side in that order.
 The background-repeat CSS property specifies whether the background-image is MARGIN PADDING
repeated or tiled after it has been sized and positioned, and how.  Property Values
 It is often more convenient to use the shorthand background property. Value Description
OUTER SPACE OF AN ELEMENT INNER SPACE OF AN ELEMENT
 Syntax
background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit PROPERTIES: margin-top PROPERTIES: padding-top margin-top Sets the top margin of the element.
margin-right padding-right
margin-right Sets the right margin of the element.
 Example margin-bottom padding-bottom
body { margin-left padding-left margin-bottom Sets the bottom margin of the element.
background-image: url("images/gradient.png");
margin-left Sets the left margin of the element.
background-repeat: repeat-x;}
 Property Values initial Sets this property to its default value.
Value Description inherit If specified, the associated element takes the computed value of its parent
element margin property.
repeat The default value. The background image will be repeated both vertically and horizontally.
repeat-x The background image will be repeated horizontally only. 2. PADDING PROPERTY
repeat-y The background image will be repeated vertically only.  The padding CSS property sets the padding on all four sides of the element. It is a
shorthand property for padding-top, padding-right, padding-bottom, and padding-
no-repeat The background image will not be repeated. left property.
 Syntax
initial Sets this property to its default value.
padding: [ length | percentage] 1 to 4 values | initial | inherit

Prepared By – APKubavat Networking & Internet Environment 16 Prepared By – APKubavat Networking & Internet Environment 17 Prepared By – APKubavat Networking & Internet Environment 18
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

Q.7 EXPLAIN LIST PROPERTIES OF CSS (2 OR 3 M)  Syntax


 Example
p.one { LIST PROPERTY list-style: [ list-style-type list-style-position list-style-image ] | initial | inherit
padding-right: 20px;  Example
} ul { list-style: circle inside; }
p.two { ol { list-style: upper-latin outside;}
list-style list-style-image list-style-position list-style-type
padding: 35px 15px;
}  Property Values
 This shorthand notation can take one, two, three, or four whitespace separated values. DEFINE DISPLAY IMAGE USE AS A POSITION OF THE TYPE OF MARKER Value Description
o If one value is set, this padding applies to all 4 sides. STYLE FOR LIST LIST ITEM MARKER LIST ITEM MARKER FOR THE LIST ITEM list-style-type Specifies the marker style for a list-item.
o If two values are set, the first value applies to top and bottom, the second value list-style-position Specifies the position of the list-item marker.
applies to the right and left side. VALUES: VALUES: VALUES: VALUES: list-style-image Specifies the image to be used as a list-item marker.
o Three values apply to the top, horizontal (i.e. right and left) and bottom side. list-style-type url inside disc Initial Sets this property to its default value.
o Four values apply to the top, right, bottom, left side in that order. list-style-image none outside circle Inherit If specified, the associated element takes the computed value of its parent
list-style-position oblique square element list-style property.
 Property Values decimal
Value Description lower-roman 2. LIST-STYLE-IMAGE
upper-roman  The list-style-image CSS property specifies an image to be used as a list-item marker.
padding-top Sets the padding to the top side of an element. lower-alpha  Syntax
upper-alpha
padding-right Sets the padding to the right side of an element. list-style-image: url | none | initial | inherit
none
padding-bottom Sets the padding to the bottom side of an element.  Example
DETAIL
padding-left Sets the padding to the left side of an element. ul { list-style-image: url("images/arrow.png");}
Types of HTML Lists
 There are three different types of list in HTML:
initial Sets this property to its default value.  Property Values
o Unordered lists — A list of items, where every list items are marked with bullets.
Value Description
inherit If specified, the associated element takes the computed value of its parent o Ordered lists — A list of items, where each list items are marked with numbers.
url The location of image to be used as a list-item marker.
element padding property. o Definition list — A list of items, with a description of each item.
Styling Lists with CSS none No marker image will be displayed. Instead, the list-style-type property will control what
 CSS provides the several properties for styling and formatting the most commonly used type of list marker will be rendered – if any. This is default.
1 WORD QUESTION - ANSWER
unordered and ordered lists. oblique Selects a font that is labeled oblique in the user agent's font database.
SR. QUESTION ANSWER
NO  These CSS list properties typically allow you to: initial Sets this property to its default value.
1 WHAT IS THE USE OF MARGIN PROPERTIES? OUTER SPACE OF AN ELEMENT o Control the shape or appearance of the marker.
2 WHAT IS THE USE OF PADDING PROPERTIES? INNER SPACE OF AN ELEMENT o Specify an image for the marker rather than a bullet point or number. 3. LIST-STYLE-POSITION
3 MARGIN-TOP PROPERTY IS USED TO SET TOP MARGIN OF AN ELEMENT o Set the distance between a marker and the text in the list.  The list-style-position CSS property specifies the position of list-item marker with respect to
4 MARGIN-RIGHT PROPERTY IS USED TO SET RIGHT MARGIN OF ANELEMENT o Specify whether the marker would appear inside or outside of the box containing the list item's principal block box.
5 MARGIN-LEFT PROPERTY IS USED TO LEFT MARGIN OF AN ELEMENT the list items.  Syntax
6 MARGIN-BOTTOM PROPERTY IS USED TO BOTTOM MARGIN OF AN ELEMENT
list-style-position: inside | outside | initial | inherit
7 PADDING-TOP PROPERTY IS USED TO SET PADDING TO THE TOP OF AN ELEMENT
1. LIST-STYLE
8 PADDING -RIGHT PROPERTY IS USED TO SET PADDING TO THE RIGHT OF AN ELEMENT  Example
 The list-style CSS property defines the display style for list items.
9 PADDING -LEFT PROPERTY IS USED TO PADDING TO THE LEFT OF AN ELEMENT ol { list-style-position: inside;}
 It is a shorthand property for setting the individual list properties i.e. list-style-type, list-style-
10 PADDING -BOTTOM PROPERTY IS USED TO PADDING TO THE BOTTOM OF AN ul { list-style-position: outside;}
ELEMENT position, and list-style-image in a single declaration.

Prepared By – APKubavat Networking & Internet Environment 19 Prepared By – APKubavat Networking & Internet Environment 20 Prepared By – APKubavat Networking & Internet Environment 21
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

Q.8 WRITE A NOTE ON CSS 3 (3 M) Q.9 EXPLAIN CSS 3 BORDER PROPERTY. (3 M)



Property Values
Value Description o Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language.CSS3 is a latest standard of css BORDER PROPERTY
Inside The list marker is placed as the first inline box in the principal block box, before the
element's content. earlier versions(CSS2).The main difference between css2 and css3 is follows PROPERTY LIST
Outside The list marker is placed outside the principal block box. This is default.
Initial Sets this property to its default value.  Media Queries
USED TO SET BORDER OF AN border- border-
 Namespaces border-
ELEMETNS bottom bottom-left-
 Selectors Level 3 bottom-color
4. LIST-STYLE-IMAGE SHORTHAND PROPERTY FOR radius
 Color
 The list-style-type CSS property specifies the type of marker for the list-items. ALL BORDER PROPERTIES border-
 Syntax border : values border-color border-image
 CSS3 modules bottom-style
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower- border-image- border-image-
border-left
alpha | upper-alpha | none | initial | inherit o CSS3 is collaboration of CSS2 specifications and new specifications, we can called this repeat source
collaboration is module. Some of the modules are shown below border-right border-style border-top
 Example border-width
ol { list-style-type: decimal-leading-zero;}  Selectors
 Box Model DETAIL
 Property Values  Backgrounds  The border property sets the width, style, and color for all four sides of an element's border.
Value Description  Image Values and Replaced Content  It is a shorthand property for setting the individual border properties i.e. border-width, border-
Disc The marker is a filled circle.  Text Effects style, and border-color in a single declaration.
Circle The marker is a hollow circle.  2D Transformations
 Syntax
Square The marker is a filled square.  3D Transformations
Decimal The marker is a –Decimal number  Animations border: [ border-width border-style border-color ] | initial | inherit
Beginning with 1.  Multiple Column Layout
 Example
lower-roman The marker is – Lowercase roman numerals E.g. i, ii, iii, iv, v, ...  User Interface
h1 {
upper-roman The marker is –Uppercase roman numerals E.g. I, II, III, IV, V, ...
1 WORD QUESTION - ANSWER
border: 5px solid #ff0000;
lower-alpha The marker is –Uppercase Latin letters E.g. a, b, c, ... z
SR. QUESTION ANSWER }
upper-alpha The marker is –Uppercase Latin letters E.g. A, B, C, ... Z
NO p{
None Specifies no marker.
1 WHAT IS CSS3? NEW VERSION OF CSS color: #00ff00;
Initial Sets this property to its default value. border: 5px solid;
2 CSS 3 PROVIDE MEDIA QUERY
NAME SPACE }
1 WORD QUESTION - ANSWER
SELECTOR LEVEL 3  Property Values
SR. QUESTION ANSWER
COLORS
NO
3 LIST OUT MODULES AVAILABLE IN CSS3. SELECTORS Value Description
1 WHAT IS THE USE OF LIST PROPERTIES? USED TO STYLE LIST(OL , UL , DL)
BOX MODEL border- Sets the width of the border of an element.
2 LIST-STYLE-IMAGE PROPERTY IS USED TO SET IMAGE AS A LIST ITEM MARKER
BACKGROUND width
3 LIST-STYLE-TYPE PROPERTY IS USED TO SET TYPE OF MARKER FOR THE LIST ITEM
TEXT EFFECT
4 LIST-STYLE-POSITION PROPERTY IS USED TO SET POSITION OF THE LIST ITEM MARKER border-style Sets the line style of the border of an element.
2D & 3D
5 GIVE THE EXAMPLE OF LIST-STYLE-IMAGE. list-style-image: url("images/arrow.png"); ANIMATION
border-color Sets the color of the border of an element.
6 GIVE THE EXAMPLE OF LIST-STYLE- TYPE. list-style-type: decimal-leading-zero; initial Sets this property to its default value.
7 GIVE THE EXAMPLE OF LIST-STYLE- POSITION. list-style-position: inside; inherit If specified, the associated element takes the computed value of its parent
element border property.

Prepared By – APKubavat Networking & Internet Environment 22 Prepared By – APKubavat Networking & Internet Environment 23 Prepared By – APKubavat Networking & Internet Environment 24
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

 Gradients are available in two styles: linear and radial.


OTHER PROPERTIES border-top-width Sets the width of the top border of an element.
Property Description border-width Sets the width of the border on all the four sides of an element.  Creating CSS3 Linear Gradients
Sets the width, style, and color for all four sides of an element's o To create a linear gradient you must define at least two color stops.
border o However to create more complex gradient effects you can define more color stops.
border. 1 WORD QUESTION - ANSWER
border-bottom Sets the width, style, and color of the bottom border of an element. SR. QUESTION ANSWER o Color stops are the colors you want to render smooth transitions among.
NO o You can also set a starting point and a direction (or an angle) along which the gradient
border-bottom-color Sets the color of the bottom border of an element.
1 WHAT IS THE USE OF BORDER PROPERTIES? USED TO SET ELEMENT BORDER effect is applied.
border-bottom-left-radius Defines the shape of the bottom-left border corner of an element. 2 GIVE EXAMPLE OF SHORTHAND BORDER PROPERTY. Border : [ border-width border-style border-color ] o The basic syntax of creating the linear gradients using the keywords can be given with:
border-bottom-right-radius Defines the shape of the bottom-right border corner of an element. linear-gradient(direction, color-stop1, color-stop2, ...)
border-bottom-style Sets the style of the bottom border of an element. NOTE: ALL ABOVE PROPERTIES ARE CONSIDER AS 1 MARK QUESTIONS o Linear Gradient - Top to Bottom
border-bottom-width Sets the width of the bottom border of an element.  The following example will create a linear gradient from top to bottom. This is
Q.10 EXPLAIN CSS 3 GRADIENT PROPERTY. (3 M) (IMP) default.
border-color Sets the color of the border on all the four sides of an element.
.gradient {
border-image Specifies how an image is to be used in place of the border styles. GRADIENT /* Fallback for browsers that don't support gradients */
Specifies the amount by which the border image area extends background: red;
border-image-outset
beyond the border box. /* For Safari 5.1 to 6.0 */
Specifies whether the image-border should be repeated, rounded background: -webkit-linear-gradient(red, yellow);
border-image-repeat LINEAR RADIAL
or stretched. /* For Internet Explorer 10 */
border-image-slice Specifies the inward offsets of the image-border. background: -ms-linear-gradient(red, yellow);
/* Standard syntax */
border-image-source Specifies the location of the image to be used as a border.
DISPLAY SMOOTH TRANSITION DISPLAY SMOOTH TRANSITION background: linear-gradient(red, yellow);
border-image-width Specifies the width of the image-border. }
BETWEEN 2 OR MORE COLORS BETWEEN 2 OR MORE COLORS
border-left Sets the width, style, and color of the left border of an element. o Linear Gradient - Left to Right
border-left-color Sets the color of the left border of an element. GOES DEFINE BY THEIR CENTER  The following example will create a linear gradient from left to right.
border-left-style Sets the style of the left border of an element. DOWN .gradient {
border-left-width Sets the width of the left border of an element. UP SYNTAX: /* Fallback for browsers that don't support gradients */
LEFT background-image: radial- background: red;
border-radius Defines the shape of the border corners of an element. /* For Safari 5.1 to 6.0 */
RIGHT gradient(shape size at position,
border-right Sets the width, style, and color of the right border of an element. background: -webkit-linear-gradient(left, red, yellow);
DIAGONALLY start-color, ..., last-color);
border-right-color Sets the color of the right border of an element. /* For Internet Explorer 10 */
border-right-style Sets the style of the right border of an element. SYNTAX: background: -ms-linear-gradient(left, red, yellow);
border-right-width Sets the width of the right border of an element. background-image: linear- /* Standard syntax */
gradient(direction, color- background: linear-gradient(to right, red, yellow);
border-style Sets the style of the border on all the four sides of an element.
stop1, color-stop2, ...); }
border-top Sets the width, style, and color of the top border of an element. o Linear Gradient - Diagonal
border-top-color Sets the color of the top border of an element.  You can also create a gradient along the diagonal direction.
DETAIL  The following example will create a linear gradient from the bottom left corner to
border-top-left-radius Defines the shape of the top-left border corner of an element.
 The CSS3 gradient feature provides a flexible solution to generate smooth transitions between the top right corner of the element's box.
border-top-right-radius Defines the shape of the top-right border corner of an element. two or more colors. .gradient {
border-top-style Sets the style of the top border of an element.  Earlier, to achieve such effect we had to use the images. /* Fallback for browsers that don't support gradients */
 Using CSS3 gradients you can reduce the download time and saves the bandwidth usages. background: red;
 The elements with gradients can be scaled up or down to any extent without losing the quality, /* For Safari 5.1 to 6.0 */
also the output will render much faster because it is generated by the browser.

Prepared By – APKubavat Networking & Internet Environment 25 Prepared By – APKubavat Networking & Internet Environment 26 Prepared By – APKubavat Networking & Internet Environment 27
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

background: -webkit-linear-gradient(bottom left, red, yellow); 1 WORD QUESTION - ANSWER blur-radius — Sets the blur radius. The larger the value, the bigger the
/* For Internet Explorer 10 */ SR. QUESTION ANSWER
blur and more the shadow's edge will be blurred. Negative values are not
background: -ms-linear-gradient(bottom left, red, yellow); NO
1 WHAT IS THE USE OF GRADIENT PROPERTIES? TRANSITIONS BETWEEN TWO OR MORE COLORS allowed.
/* Standard syntax */
background: linear-gradient(to top right, red, yellow); 2 LIST OUT GRADIENT PROPERTIES IN CSS3. 1. LINIAR GRADIENT color — Sets the color of the shadow. If the color value is omitted or not
2. RADIAL GRADIENT specified, it takes the value of the color property.
}
3. WHAT IS THE USE OF LINEAR GRADIENT? TWO OR MORE COLORS WITH LINEAR LINE
 EXAMPLE
4. WHAT IS THE USE OF RADIAL GRADIENT? TWO OR MORE COLORS DEFINED BY THEIR CENTER
 Creating CSS3 Radial Gradients 5. GIVE THE EXAMPLE OF LINEAR GRADIENT. background: linear-gradient(to top right, red, yellow); <!DOCTYPE html>
o In a radial gradient color emerge from a single point and smoothly spread outward in a 6. GIVE THE EXAMPLE OF RADIAL GRADIENT. background: radial-gradient(circle, red, yellow, lime) <html >
circular or elliptical shape rather than fading from one color to another in a single <head>
direction as with linear gradients. Q.11 EXPLAIN CSS 3 DROP SHADOW PROPERTY. (3 M) <style>
.box{
o The basic syntax of creating a radial gradient can be given with:
DROP SHADOW width: 200px;
radial-gradient(shape size at position, color-stop1, color-stop2, ...); height: 150px;
o The arguments of the radial-gradient() function has the following meaning: background: #112BCC;
 position — Specifies the starting point of the gradient, which can be box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
- USED TO GIVE DROP - VALUES }
specified in units (px, em, or percentages) or keyword (left, bottom, etc).
SHADOW EFFETCS TO THE o offset-x </style>
 shape — Specifies the shape of the gradient's ending shape. It can be
ELEMENT o offset-y </head>
circle or ellipse. o blur-radius
- TEXT SHADOW PROPERTY <body>
 size — Specifies the size of the gradient's ending shape. The default o color
IS USED TO GIVE SHADOW <div class="box"></div>
is farthest-side. </body>
EFFECT TO THE TEXT
o Example </html>
.gradient { OUTPUT
/* Fallback for browsers that don't support gradients */
DETAIL
background: red;
 The CSS3 gives you ability to add drop shadow effects to the elements like you do in Photoshop
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(red, yellow, lime); without using any images.
/* For Internet Explorer 10 */  Prior to CSS3, sliced images are used for creating the shadows around the elements that was
background: -ms-radial-gradient(red, yellow, lime); quite annoying.
/* Standard syntax */  CSS3 box-shadow Property
background: radial-gradient(red, yellow, lime); o The box-shadow property can be used to add shadow to the element's boxes.
}
o You can even apply more than one shadow effects using a comma-separated list of
o Setting the Shape of Radial Gradients 1 WORD QUESTION - ANSWER
.gradient { shadows.
SR. QUESTION ANSWER
/* Fallback for browsers that don't support gradients */ o The basic syntax of creating a box shadow can be given with: NO
background: red; box-shadow: offset-x offset-y blur-radius color; 1 WHAT IS THE USE OF BOX SHADOW PROPERTY? DROP SHGADOW EFFECT TO THE ELEMENTS
/* For Safari 5.1 to 6.0 */ o The components of the box-shadow property have the following meaning: 2 WHAT IS OFFSET-X AND OFFSET-Y VALUES? HORIZONTAL & VERTICAL OFSETS OF SHADOW
background: -webkit-radial-gradient(circle, red, yellow, lime); offset-x — Sets the horizontal offset of the shadow. 3. WHAT IS BLUR-RADIUS VALUE? SHADOW’S EDGE WILL BE BLURRED
/* For Internet Explorer 10 */ 4. WHAT IS COLOR VALUE? COLOR OF THE SHADOW
offset-y — Sets the vertical offset of the shadow.
background: -ms-radial-gradient(circle, red, yellow, lime); 5. GIVE THE EXAMPLE OF BOX SHADOW. background: linear-gradient(to top right, red, yellow);
/* Standard syntax */
background: radial-gradient(circle, red, yellow, lime);}

Prepared By – APKubavat Networking & Internet Environment 28 Prepared By – APKubavat Networking & Internet Environment 29 Prepared By – APKubavat Networking & Internet Environment 30
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

Q.12 EXPLAIN CSS 3 2D & 3D TRANSFORM PROPERTY. (3 OR 5M) (MIMP) b. The rotate() Function The function skew(-40deg, 15deg) skews the element -40 degree horizontally
i. The rotate() function rotates the element around its origin (as specified by along the x-axis, and 15 degree vertically along the y-axis.
TRANSFORM the transform-origin property) by the specified angle. This can be written
as rotate(a). 2D Transform Functions
Example
Function Description
img {
2D 3D -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */ translate(tx,ty) Moves the element by the given amount along the X and Y-axis.
-moz-transform: rotate(30deg); /* Firefox */
-ms-transform: rotate(30deg); /* IE 9 */ translateX(tx) Moves the the element by the given amount along the X-axis.
- PERFORM BASIC - PERFORM BASIC transform: rotate(30deg); /* Standard syntax */ translateY(ty) Moves the the element by the given amount along the Y-axis.
TRANSFORM ON AN TRANSFORM ON AN }
rotate(a) Rotates the element by the specified angle around the origin of the element, as
ELEMENTS IN A 2D SPACE ELEMENTS IN A 3D SPACE
The function rotate(30deg) rotates the image in clockwise direction about its defined by the transform-origin property.
origin by the angle 30 degrees. You can use negative values to rotate the
- FUNCTIONS : - FUNCTIONS : scale(sx,sy) Scale the width and height of the element up or down by the given amount. The
element counter-clockwise.
o TRANSLATE() o TRANSLATE3D() function scale(1,1) has no effect.
o ROTATE() o ROTATE3D() c. The scale() Function scaleX(sx) Scale the width of the element up or down by the given amount.
o SCALE() o SCALE3D() i. The scale() function increases or decreases the size of the element. It can be
o SKEW() scaleY(sy) Scale the height of the element up or down by the given amount.
written as scale(sx, sy). If sy isn't specified, it is assumed to be equal to sx.
Example skew(ax,ay) Skews the element by the given angle along the X and Y-axis.
img {
DETAIL -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */ skewX(ax) Skews the element by the given angle along the X-axis.
1. 2D Transformation of Elements -moz-transform: scale(1.5); /* Firefox */ skewY(ay) Skews the element by the given angle along the Y-axis.
-ms-transform: scale(1.5); /* IE 9 */
 With CSS3 2D transform feature you can perform basic transform manipulations such as transform: scale(1.5); /* Modern Browsers */
2. 3D Transformation of Elements
move, rotate, scale and skew on elements in a two-dimensional space. }
 With CSS3 3D transform feature you can perform basic transform manipulations such as
 A transformed element doesn't affect the surrounding elements, but can overlap them, just The function scale(1.5) proportionally scale the width and height of the
image 1.5 times to its original size. The function scale(1) or scale(1, 1) has no move, rotate, scale and skew on elements in a three-dimensional space.
like the absolutely positioned elements.
effect on the element.  A transformed element doesn't affect the surrounding elements, but can overlap them, just
 Using CSS Transform and Transform Functions
like the absolutely positioned elements. However, the transformed element still takes space
a. The translate() Function d. The skew() Function in the layout at its default (un-transformed) location.
i. Moves the element from its current position to a new position along the X and Y i. The skew() function skews the element along the X and Y axes by the specified  Using CSS Transform and Transform Functions
axes. This can be written as translate(tx, ty). If ty isn't specified, its value is angles. It can be written as skew(ax, ay). If ay isn't specified, its value is assumed
 The CSS3 transform property uses the transform functions to manipulate the coordinate
assumed to be zero. to be zero.
system used by an element in order to apply the transformation effect.
Example Example
a. The translate3d() Function
img { img {
-webkit-transform: translate(200px, 50px); /* Chrome, Safari,  Moves the element from its current position to a new position along the X, Y
-webkit-transform: skew(-40deg, 15deg); /* Chrome, Safari, Opera */
Opera */ -moz-transform: skew(-40deg, 15deg); /* Firefox */ and Z-axis. This can be written as translate(tx, ty, tz). Percentage values are
-moz-transform: translate(200px, 50px); /* Firefox */ -ms-transform: skew(-40deg, 15deg); /* IE 9 */ not allowed for third translation-value parameter (i.e. tz).
-ms-transform: translate(200px, 50px); /* IE 9 */ transform: skew(-40deg, 15deg); /* Modern Browsers */ Example
transform: translate(200px, 50px); /* Standard syntax */ } } .container {
width: 125px;

Prepared By – APKubavat Networking & Internet Environment 31 Prepared By – APKubavat Networking & Internet Environment 32 Prepared By – APKubavat Networking & Internet Environment 33
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

height: 125px; c. The scale3d() Function


perspective: 500px;  The scale3d() function changes the size of an element. It can be written Function Description
border: 4px solid #e5a043; as scale(sx, sy, sz). The effect of this function is not evident unless you use it
background: #fff2dd; in combination with other transform functions such as rotate and the rotateZ(a) Rotates the element by the given angle around the Z-axis.
} perspective, as shown in the example below. scale3d(sx,sy,sz) Scales the element by the given amount along the X, Y and Z-axis. The
.transformed { Example function scale3d(1,1,1) has no effect.
-webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, .container{ scaleX(sx) Scales the element along the X-axis.
Opera */ width: 125px;
transform: translate3d(25px, 25px, 50px); /* Standard syntax */ scaleY(sy) Scales the element along the Y-axis.
height: 125px;
} perspective: 300px; scaleZ(sz) Scales the element along the Z-axis.
The function translate3d(25px, 25px, 50px) moves the image 25 border: 4px solid #6486ab;
pixels along the positive X and Y-axis, and the 50 pixels along the background: #e9eef3; 1 MARK QUESTION - ANSWER
positive Z-axis. } SR. QUESTION ANSWER
NO
.transformed {
1 WHAT IS THE USE OF 2D TRANSFORM? PERFORM BASIC TRANSFORM ON AN ELEMENTS IN A
b. The rotate3d() Function -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, 2D SPACE
 The rotate3d() function rotates the element in 3D space by the specified Safari, Opera */ 2 WHAT IS THE USE OF 3D TRANSFORM? PERFORM BASIC TRANSFORM ON AN ELEMENTS IN A
angle around the [x,y,z] direction vector. This can be written as rotate(vx, vy, transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Standard syntax 3D SPACE
vz, angle). */ 3. TRANSLATE() IS USED TO MOVES THE ELEMENT BY THE GIVEN AMOUNT ALONG
Example } THE X AND Y-AXIS.
.container{ The function scale3d(1, 1, 2) scales the elements along the Z-axis and the 4. ROTATE() IS USED TO ROTATES THE ELEMENT BY THE SPECIFIED ANGLE
5. SCALE() IS USED TO SCALE THE WIDTH AND HEIGHT OF THE ELEMENT UP
width: 125px; function rotate3d(1, 0, 0, 60deg) rotates the image along the X-axis by the OR DOWN
height: 125px; angle 60 degrees. 6. SKEW() IS USED TO SKEWS THE ELEMENT BY THE GIVEN ANGLE
perspective: 300px; 7. TRANSLATE3D() IS USED TO MOVES THE ELEMENT BY THE GIVEN AMOUNT ALONG
border: 4px solid #a2b058; 3D Transform Functions THE X, Y & Z-AXIS.
8. ROTATE3D() IS USED TO ROTATES THE ELEMENT IN 3D SPACE
background: #f0f5d8;
9. SCALE3D() IS USED TO SCALES THE ELEMENT BY THE GIVEN AMOUNT ALONG
} Function Description THE X, Y AND Z-AXIS
.transformed {
translate3d(tx,ty,tz) Moves the element by the given amount along the X, Y & Z-axis.
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera Q.13 EXPLAIN CSS TRANSITION PROPERTY. (3 M)
*/ translateX(tx) Moves the element by the given amount along the X-axis.
transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */ TRANSITION
translateY(ty) Moves the element by the given amount along the Y-axis.
}
translateZ(tz) Moves the element by the given amount along the Z-axis.
The function rotate3d(0, 1, 0, 60deg) rotates the image along the Y-axis
by the angle 60 degrees. You can use negative values to rotate the rotate3d(x,y,z, a) Rotates the element in 3D space by the angle specified in the last parameter, - ANIMATE THE PROPERTY - PROPERTIES
element in opposite direction. around the [x,y,z] direction vector. FROM OLD VALUE TO NEW o transition
VALUE OF AN ELEMENT o transition-delay
rotateX(a) Rotates the element by the given angle around the X-axis.
- EX. CHANGING o transition-duration
rotateY(a) Rotates the element by the given angle around the Y-axis. BACKGROUND COLOR OF
o transition-property
BUTTON WHEN MOUSE
o transition-timing-function
HOVER

Prepared By – APKubavat Networking & Internet Environment 34 Prepared By – APKubavat Networking & Internet Environment 35 Prepared By – APKubavat Networking & Internet Environment 36
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

} DETAIL
DETAIL  The box-sizing CSS property is used to alter the default CSS box model, which is normally used
button:hover {
 Normally when the value of a CSS property changes, the rendered result is instantly updated. A by the browser to calculate the widths and heights of the elements.
background: #3cc16e;
common example is changing the background color of a button on mouse hover.
border-color: #288049;
 In a normal scenario the background color of the button is changes immediately from the old  Syntax
}
property value to the new property value when you place the cursor over the button. box-sizing: content-box | padding-box | border-box | initial | inherit
CSS3 Transition Properties
 CSS3 introduces a new transition feature that allows you to animate a property from the old
Property Description Example
value to the new value smoothly over time.
Transition A shorthand property for setting all the four individual transition .box {
 The following example will show you how to animate the background-color of an HTML button properties in a single declaration. width: 50%;
on mouse hover. transition-delay Specifies when the transition will start. padding: 15px;
Example transition-duration Specifies the number of seconds or milliseconds a transition animation float: left;
should take to complete. border: 5px solid #000;
button {
transition-property Specifies the names of the CSS properties to which a transition effect box-sizing: border-box;
background: #fd7c2a; }
should be applied.
/* For Safari 3.0+ */
transition-timing-function Specifies how the intermediate values of the CSS properties being affected
-webkit-transition-property: background; Property Values
by a transition will be calculated.
-webkit-transition-duration: 2s; Value Description
/* Standard syntax */ 1 MARK QUESTION - ANSWER The specified width and height properties include only the content of the element. It
content-box
transition-property: background; SR. QUESTION ANSWER does not include the padding, border or margin.
transition-duration: 2s; NO
The specified width and height properties include the padding size, and do not include
1 WHAT IS THE USE OF TRANSITION TRANSFORM? ANIMATE THE PROPERTY FROM OLD VALUE TO NEW padding-box
} the border or margin.
VALUE OF AN ELEMENT
button:hover { The specified width and height properties include the padding and border, but not the
2 TRANSITION-DELAY PROPERTY IS USED SPECIFIES WHEN THE TRANSITION WILL START border-box
background: #3cc16e; TO
margin.
} 3. TRANSITION-DURATION PROPERTY IS USED TO NUMBER OF SECONDS OR MILLISECONDS A initial Sets this property to its default value.
SPECIFIES TRANSITION ANIMATION SHOULD TAKE TO If specified, the associated element takes the computed value of its parent element
COMPLETE. inherit
Performing Multiple Transitions box-sizing property.
Each of the transition properties can take more than one value, separated Q.14 EXPLAIN CSS 3 BOXSIZING PROPERTY. (2 M)
1 MARK QUESTION - ANSWER
by commas, which provides an easy way to define multiple transitions at once
BOXSIZING SR. QUESTION ANSWER
with different settings. NO
Example 1 WHICH PROPERTY IS USED TO SET BORDER BOX OF BOX SIZING
button { DIV TAG?
background: #fd7c2a; - EXAMPLE 2 WHICH PROPERTY IS USED TO SET HEIGHT, WIDTH, BORDER-BOX
- USE IN BOX MODEL
PADDING AND BORDER OF BOX?
border: 3px solid #dc5801; - MOSTLY USED WITH <DIV> .box {
3. WHICH PROPERTY IS USED TO SET HEIGHT, WIDTH, PADDING-BOX
/* For Safari 3.0+ */ - PROPERTIES width: 100%;
AND PADDING OF BOX?
-webkit-transition-property: background, border; o content-box padding: 20px;
4 WHICH PROPERTY IS USED TO SET HEIGHT & CONTENT-BOX
border: 5px solid #f08080;
-webkit-transition-duration: 1s, 2s; o padding-box WIDTH OF BOX?
box-sizing: border-box;
/* Standard syntax */ o border-box }
transition-property: background, border;
transition-duration: 1s, 2s;

Prepared By – APKubavat Networking & Internet Environment 37 Prepared By – APKubavat Networking & Internet Environment 38 Prepared By – APKubavat Networking & Internet Environment 39
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

Q.15 EXPLAIN CSS 3 POSITION PROPERTY. (2 M) Example


1 MARK QUESTION - ANSWER
/* Smartphones (portrait and landscape) ----------- */
POSITION SR. QUESTION ANSWER
NO @media screen and (min-width: 320px) and (max-width: 480px){
1 WHICH PROPERTY IS USED TO SET POSITION OF AN POSITION /* styles */
ELEMENT? }
- USED TO SET POSITION OF - EXAMPLE 2 DEFAULT VALUE OF POSITION PROPERTY IS STATIC /* Smartphones (portrait) -----------*/
AN ELEMENTS . h1 { 3. WHICH PROPERTY FOLLOW ITS FIRST ANCESTOR ABSOLUTE
@media screen and (max-width: 320px){
- PROPERTIES position: absolute; ELEMENT?
o statil top: 100px; /* styles */
o relative left: 150px; Q.16 EXPLAIN CSS 3 MEDIA QUERIES. (3 OR 5 M)(MIMP) }
} /* Smartphones (landscape) ----------- */
o absolute
o fixed  Media queries allow you to customize the presentation of your web pages for a specific range of @media screen and (min-width: 321px){
devices like mobile phones, tablets, desktops, etc. without any change in markups. /* styles */
 Media queries can be used to check many things, such as: }
DETAIL /* Tablets, iPads (portrait and landscape) ----------- */
 The position CSS property specifies how an element is positioned.  width and height of the viewport @media screen and (min-width: 768px) and (max-width: 1024px){
 Tip: Elements with a position other than static are said to be positioned. Their vertical placement
 width and height of the device /* styles */
in the stacking context is determined by the z-index property.
 Syntax  orientation (is the tablet/phone in landscape or portrait mode?) }
position: static | relative | absolute | fixed | initial | inherit  resolution /* Tablets, iPads (portrait) ----------- */
@media screen and (min-width: 768px){
Example  Using media queries are a popular technique for delivering a tailored style sheet to tablets, /* styles */
h1 { iPhone, and Androids.
position: absolute; }
top: 100px; /* Tablets, iPads (landscape) ----------- */
 A media query consists of a media type and zero or more expressions that match the type and
left: 150px; @media screen and (min-width: 1024px){
} conditions of a particular media features such as device width or screen resolution.
/* styles */
 Since media query is a logical expression it can be resolve to either true or false.
}
Property Values  The result of the query will be true if the media type specified in the media query matches the
/* Desktops and laptops----------- */
Value Description type of device the document is being displayed on, as well as all expressions in the media query
@media screen and (min-width: 1224px){
The element's box is a normal box, laid out according to the normal flow. The top, right, are satisfied.
static /* styles */
bottom, left, and z-index properties are ignored for static boxes. This is default value.  When a media query is true, the related style sheet or style rules are applied to the target
The element is positioned relative to its normal position (this is called the position in normal }
relative device. Here's a simple example of the media query for standard devices.
flow). /* Large screens -----------*/
The element is positioned relative to its first ancestor element whose position value is other Syntax @media screen and (min-width: 1824px){
absolute
than static. /* styles */
 A media query consists of a media type and can contain one or more expressions, which resolve
The element is fixed with respect to the screen's viewport and doesn't move when scrolled. }
fixed to either true or false.
When printing, the element is printed on every page.
@media not|only mediatype and (expressions) { Tip: Media queries are an excellent way to create responsive layouts. Using media queries you can
initial Sets this property to its default value.
CSS-Code; customize your website differently for users browsing on devices like smart phones or tablets
If specified, the associated element takes the computed value of its parent element position
inherit } without changing the actual content of the page.
property.

Prepared By – APKubavat Networking & Internet Environment 40 Prepared By – APKubavat Networking & Internet Environment 41 Prepared By – APKubavat Networking & Internet Environment 42
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

1 MARK QUESTION - ANSWER display: flex; <head>


SR. QUESTION ANSWER background-color: DodgerBlue; <style>
NO
} .flex-container {
1 WHICH PROPERTY IS USED TO CREATE RESPONSIVE MEDIA QUERY
display: flex;
WEB DESIGN?
.flex-container > div { flex-direction: column;
2 WRITE DOWN SYNTAX OF MEDIA QUERY. @media not|only mediatype and (expressions) {
CSS-Code;
background-color: #f1f1f1; background-color: DodgerBlue;
} margin: 10px; }
3. WRITE QUERY RELATED TO SMARTPHONES @media screen and (min-width: 320px) and (max- padding: 20px;
(PORTRAIT AND LANDSCAPE) MODE width: 480px){ font-size: 30px; .flex-container > div {
/* styles */ } background-color: #f1f1f1;
}
</style> width: 100px;
</head> margin: 10px;
4. WRITE QUERY FOR TABLETS, IPADS (PORTRAIT AND @media screen and (min-width: 768px) and (max-
<body> text-align: center;
LANDSCAPE) width: 1024px){
line-height: 75px;
/* styles */
<h1>Create a Flex Container</h1> font-size: 30px;
} }
5. WRITE QUERY FOR DESKTOPS AND LAPTOPS MODE @media screen and (min-width: 1224px){ <div class="flex-container"> </style>
/* styles */ <div>1</div> </head>
} <div>2</div> <body>
6. WRITE QUERY FOR LARGE SCREENS @media screen and (min-width: 1824px){ <div>3</div>
/* styles */ </div> <h1>The flex-direction Property</h1>
}
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>
<em>flex</em>.</p>
<div class="flex-container">
CSS Flexbox Layout Module
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p> <div>1</div>
<div>2</div>
Before the Flexbox Layout module, there were four layout modes:
</body> <div>3</div>
</html> </div>
 Block, for sections in a webpage
 Inline, for text
The flex container properties are: </body>
 Table, for two-dimensional table data
</html>
 Positioned, for explicit position of an element
 flex-direction
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without  flex-wrap
using float or positioning.  flex-flow
 justify-content
The flex container properties are:  align-items
 align-content
CSS Flex Container
 flex-wrap
Parent Element (Container)
 flex-direction The flex-wrap property specifies whether the flex items should wrap or not.
The flex container becomes flexible by setting the display property to flex:
<!DOCTYPE html> The flex-direction property defines in which direction the container wants to stack the flex items. <!DOCTYPE html>
<html> <html>
<head> <!DOCTYPE html> <head>
<style> <html> <style>
.flex-container { .flex-container {
Prepared By – APKubavat Networking & Internet Environment 43 Prepared By – APKubavat Networking & Internet Environment 44 Prepared By – APKubavat Networking & Internet Environment 45
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)
Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

display: flex; <!DOCTYPE html>  justify-content


flex-wrap: wrap; <html>
background-color: DodgerBlue; <head> The justify-content property is used to align the flex items:
} <style>
.flex-container { The center value aligns the flex items at the center of the container:
.flex-container > div { display: flex;
background-color: #f1f1f1; flex-flow: row wrap; <!DOCTYPE html>
width: 100px; background-color: DodgerBlue; <html>
margin: 10px; } <head>
text-align: center; <style>
line-height: 75px; .flex-container > div { .flex-container {
font-size: 30px; background-color: #f1f1f1; display: flex;
} width: 100px; justify-content: center;
</style> margin: 10px; background-color: DodgerBlue;
</head> text-align: center; }
<body> line-height: 75px;
font-size: 30px; .flex-container > div {
<h1>The flex-wrap Property</h1> } background-color: #f1f1f1;
</style> width: 100px;
<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p> </head> margin: 10px;
<body> text-align: center;
<div class="flex-container"> <h1>The flex-flow Property</h1> line-height: 75px;
<div>1</div> font-size: 30px;
<div>2</div> <p>The flex-flow property is a shorthand property for the flex-direction and the flex-wrap }
<div>3</div> properties.</p> </style>
<div>4</div> </head>
<div>5</div> <div class="flex-container"> <body>
<div>6</div> <div>1</div>
<div>7</div> <div>2</div> <h1>The justify-content Property</h1>
<div>8</div> <div>3</div>
<div>9</div> <div>4</div> <p>The "justify-content: center;" aligns the flex items at the center of the container:</p>
<div>10</div> <div>5</div>
<div>11</div> <div>6</div> <div class="flex-container">
<div>12</div> <div>7</div> <div>1</div>
</div> <div>8</div> <div>2</div>
<div>9</div> <div>3</div>
<p>Try resizing the browser window.</p> <div>10</div> </div>
<div>11</div>
</body> <div>12</div> </body>
</html> </div> </html>

<p>Try resizing the browser window.</p>


align-items
 flex-flow </body>
</html> The align-items property is used to align the flex items.
The flex-flow property is a shorthand property for setting both the flex-direction and flex-
wrap properties. <!DOCTYPE html>
<html>
Prepared By – APKubavat Networking & Internet Environment 46 Prepared By – APKubavat Networking & Internet Environment 47 Prepared By – APKubavat Networking & Internet Environment 48
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College Shir Matrumandir B.S.W. College

<head> align-content: space-between;


<style> //align-content: space-around
.flex-container { //align-content: space-between;
display: flex; //align-items: baseline;
height: 200px; //align-content: stretch;
align-items: center; //align-content: flex-end;
background-color: DodgerBlue; //align-content: flex-start;
} overflow: scroll;
background-color: DodgerBlue;
.flex-container > div { }
background-color: #f1f1f1;
width: 100px; .flex-container > div {
margin: 10px; background-color: #f1f1f1;
text-align: center; width: 100px;
line-height: 75px; margin: 10px;
font-size: 30px; text-align: center;
} line-height: 75px;
</style> font-size: 30px;
</head> }
<body> </style>
</head>
<h1>The align-items Property</h1> <body>

<p>The "align-items: center;" aligns the flex items in the middle of the container:</p> <h1>The align-content Property</h1>

<div class="flex-container"> <p>The "align-content: space-between;" displays the flex lines with equal space between them:</p>
<div>1</div>
<div>2</div> <div class="flex-container">
<div>3</div> <div>1</div>
</div> <div>2</div>
<div>3</div>
</body> <div>4</div>
</html> <div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
 align-content <div>9</div>
<div>10</div>
The align-content property is used to align the flex lines. <div>11</div>
<div>12</div>
<!DOCTYPE html> </div>
<html>
<head> </body>
<style> </html>
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
Prepared By – APKubavat Networking & Internet Environment 49 Prepared By – APKubavat Networking & Internet Environment 50 Prepared By – APKubavat Networking & Internet Environment 51
(BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1) (BCA/BSCIT/PGDCA -1)

You might also like