├── 1_INTRODUCTION_TO_CSS ├── 1.1_INTRO │ └── css0.html ├── 1.2_WHERE_TO_ADD_CSS │ ├── css1.html │ └── css2.html └── 1.3_SELECTORS_COMBINATORS │ ├── css3.html │ ├── css4.html │ └── css5.html ├── 2_TEXT_MANIPULATION ├── css5.html └── css6.html ├── 3_BOX_MODEL ├── 1_box_model.html └── 2_boxsize_opacity.html ├── 4_Layout ├── 1_float.html ├── 2_positioning.html ├── 3_flex_layout.html ├── 4_grid_layout.html ├── 5_grid_area.html ├── 6_grid_layout_responsive.html └── responsive_grid_layout │ ├── index.html │ └── style.css ├── 5_HOW_TO ├── 1_style_link.html ├── 2_style_table.html ├── 3_style_form.html ├── 4_design_card.html ├── 5_how_to_create_icon_button.html ├── 6_how_to_create_drop_down_menu.html ├── 7_how_to_center_elements.html └── 8_how_to_style_list.html ├── 6_Others ├── background.html ├── gradient.html ├── icons_maxwidth.html ├── overflow_tooltip.html ├── restaurant.jpg └── shadow_effect.html ├── 7_RESPONSIVE_WEB_DESIGN ├── 1_media_query_part1.html ├── 2_media_query_part2.html ├── 3_responsive_nav_menu.html └── 4_responsive_design_using_gridview.html └── 8_ANIMATION ├── 1_transition.html └── 2_animation.html /1_INTRODUCTION_TO_CSS/1.1_INTRO/css0.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | what is css? 7 | 8 | 9 |

what is CSS ?: 13 | CSS Stands for Cascading Style Sheet. It allows us to design html 14 | elements 15 |
who Invented CSS?: 19 | CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the 20 | time, Lie was working with Tim Berners-Lee at CERN. 21 |
Prerequisite to learn CSS: you must have learn HTML

26 | 27 | 28 | -------------------------------------------------------------------------------- /1_INTRODUCTION_TO_CSS/1.2_WHERE_TO_ADD_CSS/css1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Inline method of adding CSS 7 | 8 | 9 | 10 |

Study With Anis

11 |

12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque modi 13 | molestiae odio ut maiores. Explicabo dolorem ab alias corporis 14 | accusantium. 15 |

16 | 17 | 18 | -------------------------------------------------------------------------------- /1_INTRODUCTION_TO_CSS/1.2_WHERE_TO_ADD_CSS/css2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Internal method of adding CSS 7 | 8 | 9 | 19 | 20 | 21 |

Study With Anis

22 | 23 |

24 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque modi 25 | molestiae odio ut maiores. Explicabo dolorem ab alias corporis 26 | accusantium. 27 |

28 | 29 |

This is paragraph number 2

30 |

This is paragraph number 3

31 |

This is paragraph number 4

32 | 33 | 34 | -------------------------------------------------------------------------------- /1_INTRODUCTION_TO_CSS/1.3_SELECTORS_COMBINATORS/css3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | class and ID selectors in css 7 | 8 | 42 | 43 | 44 |

I love Bangladesh

45 |

46 |

47 | Tempor labore amet dolores ipsum dolor et. Accusam ut sea no ipsum diam, 48 | clita dolor ipsum erat vero ipsum magna. 49 |

50 | 51 |

I am div1

52 |

53 |

I am paragraph inside div2

54 |

55 | 56 | 57 | -------------------------------------------------------------------------------- /1_INTRODUCTION_TO_CSS/1.3_SELECTORS_COMBINATORS/css4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | selectors and combinator in css 7 | 57 | 58 | 59 | 60 |

This is a h1

61 | 62 |

63 |

This is a paragraph 1

64 |

This is a paragraph 2

65 |

This is a para3

66 |

67 |

This is a paragraph 4

68 |

This is a paragraph 5

69 | 70 | 71 | -------------------------------------------------------------------------------- /1_INTRODUCTION_TO_CSS/1.3_SELECTORS_COMBINATORS/css5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pseduo - class and pseduo - element 7 | 8 | 16 | 17 | 84 | 85 | 86 |

87 | Ea dolores lorem voluptua labore sit eos, lorem ut voluptua tempor diam 88 | diam consetetur. Magna ipsum et diam dolore eirmod. Eos duo ea sadipscing 89 | eos rebum. Ut eos sea et invidunt voluptua eos. Sea invidunt nonumy clita 90 | et gubergren, invidunt invidunt dolore amet gubergren et, lorem magna et 91 | justo nonumy. 92 |

93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 |

ID	Name
101	Anis
102	Rabeya
103	Kalam
104	Hasim

122 | 123 |

124 |

this is paragraph 1

125 |

this is paragraph 2

126 |

this is paragraph 3

127 |

this is paragraph 4

128 |

this is paragraph 5

129 |

130 | 131 |

132 |

Home1
Home2
Home3
Home4
Home5

139 |

140 | 141 | 142 | -------------------------------------------------------------------------------- /2_TEXT_MANIPULATION/css5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Font in CSS 7 | 8 | 12 | 13 | 22 | 23 | 24 |

25 | Lorem rebum et erat dolore diam. Duo magna ea et eos sit sanctus voluptua. 26 | Invidunt aliquyam et ea accusam sed. 27 |

28 | 29 | 30 | -------------------------------------------------------------------------------- /2_TEXT_MANIPULATION/css6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text Style 7 | 8 | 19 | 20 | 21 |

22 |

Bangladesh

23 |

Amet invidunt vero dolore sit lorem ipsum sea sadipscing gubergren, accusam ea consetetur dolor ut dolores. Magna duo consetetur gubergren ut vero, diam voluptua vero stet vero at invidunt amet sadipscing diam. Amet sed eirmod rebum sadipscing at et dolor dolore, et eos dolor at vero stet et sit eirmod justo. Accusam erat ipsum amet ut, stet dolor lorem est et et ipsum lorem. Sed kasd ipsum nonumy sed, et nonumy eirmod et at dolor et sed takimata. Kasd dolore.

24 |

25 | 26 |

27 |

India

28 |

29 | 30 |

31 | 32 | -------------------------------------------------------------------------------- /3_BOX_MODEL/1_box_model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Margin, padding, border in css 7 | 8 | 9 | 10 | 36 | 37 | 38 |

Hello

39 | 40 | 41 | -------------------------------------------------------------------------------- /3_BOX_MODEL/2_boxsize_opacity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Box sizing and opacity 7 | 8 | 39 | 40 | 41 | 42 |

43 |

Dolor consetetur eirmod clita takimata ipsum kasd nonumy et est sit. Sed est stet consetetur erat tempor dolor takimata. Eos nonumy accusam no nonumy magna sanctus sadipscing dolor, dolor amet gubergren et gubergren clita. Takimata no consetetur stet ipsum labore lorem dolore takimata, magna at sea et sea et et eirmod invidunt kasd. At et aliquyam ipsum nonumy. Sadipscing sit elitr stet at magna gubergren, labore sed sed erat diam elitr et voluptua amet amet. Amet dolor nonumy no amet lorem, vero amet sit vero stet dolor est invidunt kasd vero, sit et rebum kasd ipsum amet accusam dolor eirmod. Rebum invidunt sit dolor ea, labore elitr ipsum accusam ipsum, eirmod nonumy sed sed et justo amet et magna tempor, eos ipsum gubergren amet amet sed ut voluptua dolore sit, labore elitr duo diam ipsum sanctus at eirmod sea no, elitr dolor dolore sadipscing ea ea et. Erat et elitr ut lorem dolores elitr nonumy, clita est nonumy justo et sit et et at sanctus, aliquyam diam elitr dolore sea duo. Diam sit eos sanctus eos ea at sit. Et eirmod sanctus et magna consetetur. Eirmod ipsum justo magna aliquyam justo sed. No kasd consetetur ea et invidunt accusam dolores.

44 |

45 | 46 |

47 | Sed dolor sed voluptua dolor consetetur consetetur et eirmod sea nonumy. Dolores dolore dolore et labore sanctus et et, invidunt invidunt est tempor ipsum sed tempor et justo labore. Lorem rebum dolor vero et elitr ipsum at takimata sea. Elitr est eos et et vero aliquyam nonumy, nonumy est eos ut est erat amet ea, duo stet ipsum sadipscing tempor amet elitr sanctus, nonumy sanctus ipsum at et justo et, erat no voluptua sit lorem justo sadipscing, diam erat sanctus dolores magna. Ut erat nonumy nonumy diam, tempor vero sit stet tempor, est justo dolores lorem sadipscing lorem. Duo magna. 48 |

49 |

50 |

Dolor gubergren et sed labore sanctus, est et accusam et et eos accusam sea, ut eos takimata eirmod nonumy consetetur.

51 | 52 | 53 | -------------------------------------------------------------------------------- /4_Layout/1_float.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Float 7 | 44 | 45 | 46 |

47 |

I am Div1

48 |