docs: basic box model

praisetompane · praisetompane · commit 493b57b008f6 · 2025-04-18T10:49:21.000+02:00
diff --git a/4_experiments/.DS_Store b/4_experiments/.DS_Store
diff --git a/4_experiments/1_core_language/2_imported.html b/4_experiments/1_core_language/2_imported.html
@@ -4,6 +4,7 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--The import is actually performed in css/my_style.css. This is CSS's composition mechanism-->
     <link rel="stylesheet" type="text/css" href="css/my_style.css">
     <title>Imported CSS</title>
 </head>
diff --git a/4_experiments/1_core_language/3_inline.html b/4_experiments/1_core_language/3_inline.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="css/my_style.css">
-    <title>Imported CSS</title>
+    <title>Inline CSS</title>
 </head>
 
 <body>
diff --git a/4_experiments/1_core_language/4_box_model.html b/4_experiments/1_core_language/4_box_model.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Box Model</title>
+    <style>
+        h1 {
+            width: 200;
+            height: 100;
+            padding: 50px;
+            border: 15px solid green;
+            margin: 20px;
+        }
+
+        div {
+            width: 200;
+            height: 100;
+            padding: 50px;
+            border: 15px solid green;
+            margin: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Hello I am a H1 with the CSS box model properties explicitly set </h1>
+    <div>Hello I am a Div with the CSS box model properties explicitly set </div>
+</body>
+
+</html>
