Scribd
Upload
9 views

Class 29

The document discusses CSS topics across multiple classes, including CSS selectors, colors, backgrounds, borders, padding, margin, width and height, fonts, links, lists, tables, positions, overflow, floating, combinators, pseudo-classes, opacity, navigation bars, image galleries, sprites, attribute selectors, forms, gradients, box shadow effects, transforms, transitions, animations, tooltips, pagination, box-sizing, flexbox, buttons and media queries.

Uploaded by

abhinay.acewebacademy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

Class 29

The document discusses CSS topics across multiple classes, including CSS selectors, colors, backgrounds, borders, padding, margin, width and height, fonts, links, lists, tables, positions, overflow, floating, combinators, pseudo-classes, opacity, navigation bars, image galleries, sprites, attribute selectors, forms, gradients, box shadow effects, transforms, transitions, animations, tooltips, pagination, box-sizing, flexbox, buttons and media queries.

Uploaded by

abhinay.acewebacademy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Css

Class 29:
1)What is css?

2)Why we are using css?.

3) How to link css stylesheet to html page?.

4)How many types of style sheets in css?.

5)How many types of Selectors in css?.

Class 30:
Colors:
1)How many ways to apply color to text?

Example:
create below example using different colors and color type.
Backgrounds:
1)How apply background color to a division?

2)How to apply background-image to a division?

3)How to apply both color and background-image to a division?

4)what are the background properties in css?

Example:1

Example:2
Create below example using all background properties
Example:3

Borders & outlines,Margin&Padding:


1) How do margin, border and padding fit together in the box
model?
2) What is difference between padding and margin?
3) What is difference between border and outline?
4) How many ways to apply border,padding,margin,outline?

Example:

Create below example using all Box-model Properties?

Border&Outline Example
Padding and margin Example:

Width & Height:


1)what is min-width and max-width?

2)what is difference between width and max-width?

Example:
Class 31:
Fonts &Icons:
Example: using css all font properties and font-awesome convert
below image to html.

Class 32:
CSS Links:
Example:
CSS Lists:
Example: using all css list properties and list types to display output in
different ways.

CSS tables:
Example1:

Example2:
CSS Positions:
1) What is position relative in CSS?

2) What is position relative in CSS?

3) What is difference between relative and absolute position in CSS?

4)What is top,left,right,bottom in CSS positions?

Example:

CSS Overflow:
Example:Convert the below image to html
Class 33:
Css Floating:
Example:

Css Combinatory:
1).what are the CSS Combinators?
2).why we are using CSS Combinators?
Css Pseudo-classes & pseudo-elements:
Example:Using of Pseudo-classes & pseudo-elements convert below
image to html. Text on hover color will be change.

Class 34:
Css Opacity/Transparency:
Example:
Css Navigation Bar/Dropdowns:
Example:

Css Image Gallery:


Example:Covert below image to html
Class 35:
Css Image Sprites:
Example: using below numbers take is as a Image Sprite and convert
in to html.
Css Attribute Selectors & Css Forms:
Example:convert below image into html using Css Attribute Selectors
& Css Forms
Class 36:
Css Border Images:
Example:using all border properties convert below image to html.

Css Gradients:
1).How many types of Gradients?

2).Why we sre using Gradients?

3).what are the Linear Gradients Properties?.

4).what are the Radial Gradients Properties?.

Example1:
Example2:

Example3:

Example4:
Css box shadow Effects:
Examples:

Class 37:
Css 2D Transforms & 3D Transforms:
Examples:Convert below image to html
Css Transitions:
Examples:On hover apply text-color,Background,Border using Css
Transitions.

Css Animations & Key frames:


Example:Convert below image Css Animations & Key frames
To html.Move the clouds (left to right & right to left)and sun(Bottom to
Top) https://images.thoughtbot.com/blog+animations/animation-
direction.gif)
Class 38:
Css Tooltip:
Example:

Css Pagination:
Example:
Css BoxSizing:
1).What is CSS box sizing?

2).What is the difference between Without the CSS box-sizing Property


and With the CSS box-sizing Property?
Css Flex box:
Examples:Using display flex property convert below image to html

Css Buttons:
Examples:
Class 39:
CSS Media queries:
Example: Covert below image to html using Media queries it shows all
the devices user friendly.

You might also like