From 86e077118bbf2d3361cd76dc55dac266ec6befdc Mon Sep 17 00:00:00 2001
From: rjbasitali <rjbasitali@gmail.com>
Date: Wed, 1 Jun 2022 19:55:20 +0500
Subject: [PATCH] first commit

---
 .../1. getting_started.md                     |  18 ++
 .../2. diving_into_basics.md                  | 249 ++++++++++++++++++
 2 files changed, 267 insertions(+)
 create mode 100644 css - the complete guide/1. getting_started.md
 create mode 100644 css - the complete guide/2. diving_into_basics.md
diff --git a/css - the complete guide/1. getting_started.md b/css - the complete guide/1. getting_started.md
new file mode 100644
index 0000000..8494510
--- /dev/null
+++ b/css - the complete guide/1. getting_started.md	
@@ -0,0 +1,18 @@
+# Getting Started
+
+## What is CSS?
+CSS stands for *Cascading Style Sheets*, and is used to style HTML elements.
+
+Use the `<style>` tag to style HTML elements.
+
+## History
+
+Current version of CSS3 which is still under development. There won't be a version 4, as the features in CSS is now being developed as modules.
+
+## Prerequisites
+
+Basic HTML knowledge.
+
+## Tools
+
+Visual Studio Code as IDE, and Google Chrome as browser with chrome developer tools.
\ No newline at end of file
diff --git a/css - the complete guide/2. diving_into_basics.md b/css - the complete guide/2. diving_into_basics.md
new file mode 100644
index 0000000..a11779a
--- /dev/null
+++ b/css - the complete guide/2. diving_into_basics.md	
@@ -0,0 +1,249 @@
+# Diving Into The Basics Of CSS
+
+
+## HTML file skeletion
+
+HTML file skeleton that we will use as starting point.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>uHost</title>
+</head>
+
+<body>
+    <main>
+        <section>
+            <h1>Get the freedom you deserve.</h1>
+        </section>
+    </main>
+</body>
+
+</html>
+```
+
+
+## Adding CSS using **inline styling**
+
+Use the `style` attribute inside an HTML tag by applying a **CSS declaration**, A declaration is simply means *WHAT* you want to style, and *HOW* you want to style it. What part of the declaration is defined by *properties*, lets say we want to change the background color of an element, we'll use the `background` property for that. And how is defined by a value, lets say we want to change the background color to `red`.
+
+```html
+<section style="background: red;">
+    <h1>Get the freedom you deserve.</h1>
+</section>
+```
+
+Or we can use a hexadecimal value for the color, like `#ff1b68`.
+
+Inline styling is where we use the `style` attribute directly on the HTML element which we want to style, and we would write all styles separated by semicolons on the same line if there are multiple, this way of styling is not recommended because of code readibility and maintainence issues.
+
+
+## `<style>` tag and CSS files
+
+A better alternative to inline styles is using the `<style>` tag. Inside the `<style>` we define **css rules**, to define a css rule we need to first tell the browser on which element do we need to apply the css style, for that we use **css selectors**.
+
+For example, to style the `<sectino>` element, we can declare a css selector:
+
+```html
+<style>
+    section {
+        background: #ff1b68;
+    }
+</style>
+```
+
+And the browser will apply the style to all the `section`s on your HTML page.
+
+There's another way of using styles, and that is using an external style sheet. For that we can create a new `*.css` file in the project, and in that file we can define css rules, without using the `<style>` tag because we are not in the HTML file anymore.
+
+So now we have two fies, `index.html` and `main.css`. And now we would need to explicitly include the `main.css` into our `index.html` file. To do that we use the `<link>` element:
+
+```html
+<head>
+    ...
+    <link> rel="stylesheet" href="main.css">
+</head>
+```
+
+And our `main.css` file:
+
+```css
+section {
+   background: #ff1b68;
+}
+```
+
+## Applying additional styles and importing Google Fonts
+
+We look how to change different things rather than just the background color, and also how we can apply different styles to different sections, rather than having a single `section` style for all sections.
+
+Also, we will change the color and font of our `h1` tag. We will start by adding a `h1` selector to our `main.css`:
+
+```css
+h1 {
+  color: white;
+  font-family: sans-serif;
+}
+```
+
+To include a font which is not necessarily on the machine, we can use **Google Fonts**, and for that we can go to the [link](https://fonts.google.com/) and look for the instructions to include the font we want.
+
+Lets say we want to include the font called `Anton`, search for it, and copy the `link` tag and paste it **BEFORE** your `main.css` stylesheet import inside the `index.html` file:
+
+```html
+<head>
+    ...
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@700&family=Ubuntu:wght@300;400&display=swap" rel="stylesheet">
+    <link> rel="stylesheet" href="main.css">
+</head>
+```
+
+And then inside your `main.css`, change the `font-family` attribute to:
+
+```css
+h1 {
+  color: white;
+  font-family: 'Anton', sans-serif;
+}
+```
+
+
+## Theory Time - Selectors
+
+We have the following selectors:
+### Elements
+For example, following selector is applied to all the `h1` elements:
+```css
+h1 {
+}
+```
+
+### Classes
+For example, following selector is applied to all the elements with a `blog-post` class, the name of class is followed by `.`:
+```css
+.blog-post {
+}
+```
+
+### Universal
+For example, following selector is applied to all the elements on the page:
+```css
+* {
+}
+```
+
+### IDs
+For example, following selector is applied to the element with ID `main-title`, the ID is followed by `#`:
+```css
+#main-title {
+}
+```
+
+### Attributes
+For example, following selector is applied to all the elements with attribute `disabled`, it uses `[]`:
+```css
+[disabled] {
+}
+```
+
+For class names, preferred naming convention is kebab case, where words are separated by dashes `-`, and also CSS is **case insensitive**, so this naming convention helps avoid issues like class name `mainTitle` and `maintitle` overriding each other. 
+
+You can also set multiple class names to an HTML element separated by spaces, e.g `class="one tow"`.
+
+IDs are not only used for styling, they are also used by the browser to jump to an element if you append `#` followed by the ID of the element to the URL of the page.
+
+
+## Understanding the Cascading Style & Specificity
+
+Inline-style has the highest priority (or specificity), second comes the class selectors followed element selectors.
+
+**Cascading** in CSS (Cascading Style Sheets) simply means multiple styles or rules can be applied to the same element, these rules can conflict and to resolve those conflicts CSS uses the concept of **Specificity**.
+
+The specificity of the elements is as follows:
+`Inline Styles`   **>**   `#ID selectors`   **>**   `.class, :pseudo-class and [attribute] selectors`    **>**   `<Tag> and ::pseudo-element selectors`
+
+Also, conflicts with same specifity are resolved using order of declaration.
+
+
+## Understanding Inheritance
+
+An element also inherits some styles from its parent element. A parent element can be direct or indirect parent in the chain of elements. Inheritance has a very low specificity.
+
+```css
+body {
+    font-family: 'Montserrat', sans-serif;
+}
+```
+
+
+## Adding Combinators
+
+A combinator allows us to combine multiple selectors to be more precise about what we want to select. Combinators have higher specificity, because generally the more specific rules have the higher specificity.
+
+
+## Theory Time - Combinators
+
+There are four types of combinators:
+1. Adjacent Sibling
+2. General Sibling
+3. Child 
+4. Descendant
+
+### Adjacent Sibling
+
+It uses the `+` sign, for example the following rule assigns the style to all the `<p>` elements directly followed by an `<h2>` element, such that `<p>` is a direct sibling to `<h2>`:
+
+```css
+h2 + p {
+    ...
+}
+```
+
+### General Sibling
+
+It uses the `~` sign, for example the following rule assigns the style to all the `<p>` elements on the same level as `<h2>` element, `<p>` doesn't need to be direct sibling to `<h2>`:
+
+```css
+h2 ~ p {
+    ...
+}
+```
+
+### Child
+
+It uses the `>` sign, for example the following rule assigns the style to all the `<p>` elements that are direct child of `<div>` element, `<p>` needs to be direct child to `<div>`, indirect `<p>` childs won't be assigned the following rule:
+
+```css
+div > p {
+    ...
+}
+```
+
+### Descendant
+
+It uses the a blank space, for example the following rule assigns the style to all the `<p>` elements that are descendant of `<div>` element, `<p>` doesn't need to be direct child to `<div>`:
+
+```css
+div p {
+    ...
+}
+```
+
+
+## Summarizing Selectors, Properties & Values
+
+A reference [link]() for all the css properties.
+
+### Value Types
+
+Values are tightly coupled to a specific property!
+
+Pre-defined Options | Colors | Length, Sizes & Numbers | Functions |
+--- | --- | --- | --- |
+`display: block;` | `background: red;` | `height: 100px` | `background: url(...);` |
+`overflow: auto;` | `color: #fa923f;` | `width: 20%;` | `transform: scale(...);` |
+
