diff --git a/WebDevelopment/01-CssBasics/index.htm b/WebDevelopment/01-CssBasics/index.htm
new file mode 100644
index 0000000..d0c4200
--- /dev/null
+++ b/WebDevelopment/01-CssBasics/index.htm
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+    <head>
+        <meta charset="utf-8">
+        <title>My website</title>
+
+        <link href="/style.css" rel="stylesheet" type="text/css" />
+
+    </head>
+
+    <body>
+
+        <div>
+
+            <div class="NavBar m0">
+                <h1 class="m0">My heading 1</h1>
+                <h2 class="m0" id="SpecialHeading">My heading 2</h2>
+                <h3 class="m0">My heading 3</h3>
+
+                <p>Paragraph inside div</p>
+                <p>Paragraph inside div</p>
+                <p>Paragraph inside div</p>
+                <p>Forth paragraph inside div</p>
+
+                <span>my span</span>
+                
+                <div>
+
+                    <div>
+                        <span>my embedded span</span>                    
+                    </div>
+                </div>
+            </div>
+
+            <p>This is right after the nav bar</p>
+            <p>This is right after the nav bar</p>
+            <p>This is right after the nav bar</p>
+
+            <span>my span</span>
+
+        </div>
+    
+        <p>My text is in here :)</p>
+
+        <p>This is a <strong>strong</strong> sentence with some <em>emphasis</em> included</em></p>
+
+        <p>This is a link to <a href="http://www.google.co.uk">Google</a> go on, click it</p>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/WebDevelopment/01-CssBasics/style.css b/WebDevelopment/01-CssBasics/style.css
new file mode 100644
index 0000000..542b3f7
--- /dev/null
+++ b/WebDevelopment/01-CssBasics/style.css
@@ -0,0 +1,84 @@
+html
+{
+    background: #111;
+    color: #fff;
+}
+
+h1
+{
+    color: blue;
+    display: inline-block;
+    border: 1px solid green;
+}
+
+h1, h2, h3
+{
+    color: red;
+}
+
+h1
+{
+    font-size: 14px;
+}
+
+strong
+{
+    font-weight: normal;
+    font-style: italic;
+}
+
+em
+{
+    font-style: normal;
+}
+
+#SpecialHeading
+{
+    background: pink;
+}
+
+.NavBar
+{
+    padding: 50px;
+    border: 1px solid green;
+}
+
+span
+{
+    color: brown;
+}
+
+.NavBar span
+{
+    color: green;
+}
+
+.NavBar > span
+{
+    color: blue;
+}
+
+.NavBar ~ p
+{
+    background: white;
+}
+
+.NavBar + p
+{
+    background: blue;
+}
+
+.m0
+{
+    margin: 0;
+}
+
+a
+{
+    color: green;
+}
+
+a:hover
+{
+    color: white;    
+}
\ No newline at end of file
