width height margin padding

README.md

@@ -7,19 +7,30 @@ Basic concepts of stylesheet
 - External : Recommended approach
 
 # CSS Colors
-Option 1 : color name
-Option 2 : hex code (#RRGGBB) range 00 to ff
-Option 3 : RGB range of decimal no. 0 to 255
+- Option 1 : color name
+- Option 2 : hex code (#RRGGBB) range 00 to ff
+- Option 3 : RGB range of decimal no. 0 to 255
 
 # CSS Selectors
-type-1 : element selector
-type-2 : id selector
-type-3 : class selector
-type-4 : element group selector
-type-5 : descendant selector using 
+- type-1 : element selector
+- type-2 : id selector
+- type-3 : class selector
+- type-4 : element group selector
+- type-5 : descendant selector using 
     > (direct child) , 
     ~ (general sibling),
     + (Adjacent sibling)
-type-6 : pseudo class
-type-7 : attribute selector
-type-8 : universal selector
+- type-6 : pseudo class
+- type-7 : attribute selector
+- type-8 : universal selector
+
+# CSS width & height
+- Option 1: height & width property
+- Option 2: minHeight & maxHeight , minWidth & maxWidth  
+
+# CSS margin & padding
+- Option 1: short hand only one unit
+- Option 2: top bottom
+- Option 3: top right bottom
+- Option 4: top right bottom left 
+

index.html

@@ -8,6 +8,8 @@
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <link rel='stylesheet' type='text/css' media='screen' href='color-style.css'>
     <link rel='stylesheet' type='text/css' media='screen' href='selector-style.css'>
+    <link rel='stylesheet' type='text/css' media='screen' href='width-height.css'>
+    <link rel='stylesheet' type='text/css' media='screen' href='margin-padding.css'>
     <script src='main.js'></script>
     <style>
         h2 {
@@ -22,7 +24,10 @@ <h1 style="color: blueviolet;">Welcome to css</h1>
     <!--internal style-->
     <h2>Lets Start</h2>
     <!--external style-->
-    <div class="subheader">Please like & subscribe</div>
+    <div class="subheader-1">Please like & subscribe</div>
+    <div class="subheader-2">Please like & subscribe</div>
+    <div class="subheader-3">Please like & subscribe</div>
+    <div class="subheader-4">Please like & subscribe</div>
 
     <span>Selector</span>
     <div>

margin-padding.css

@@ -0,0 +1,43 @@
+/* option 1 */
+.subheader-1 {
+    margin: 10px;
+    padding: 10px;
+    background-color: aquamarine;
+}
+
+/* option 2 */
+.subheader-2 {
+    margin: 10px 20px;
+    padding: 10px 20px;
+    background-color: aquamarine;
+}
+
+/* option 3 */
+.subheader-3 {
+    margin: 10px 20px 30px;
+    padding: 10px 20px 30px;
+    background-color: aquamarine;
+}
+
+/* option 4 */
+.subheader-4 {
+    margin: 10px 20px 30px 40px;
+    padding: 10px 20px 30px 40px;
+    background-color: aquamarine;
+}   
+
+/* option 5 */
+.subheader-5 {
+    margin: 10px auto;
+    padding: 10px auto;
+    background-color: aquamarine;
+}
+
+/* option 6 */
+.subheader-6 {
+    margin-top: auto;
+    margin-right: auto;
+    margin-bottom: auto;
+    margin-left: auto;
+    background-color: aquamarine;
+}

width-height.css

@@ -0,0 +1,24 @@
+/* option 1 */
+.parent {
+    background-color: blueviolet;
+    width: 400px;
+    height: 400px;
+}
+
+/* option 2 */
+.parent {
+    background-color: blueviolet;
+    width: 400px;
+    height: 400px;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+/* option 3 */
+.parent {
+    background-color: blueviolet;
+    width: 400px;
+    height: 400px;
+    min-width: 100%;
+    min-height: 100%;
+}