CSS-01 workshop

coursebook/session-03/README.md

@@ -0,0 +1,21 @@
+# <span style="color: #34495e">Session 3: CSS-01</span>
+
+## Menu
+
+- [Learning Outcomes](./learning-outcomes.md)
+- [Research](./research-topics.md)
+- [Resources](./resources.md)
+
+---
+
+## Schedule
+
+- 11:00 - 11: 40 | [CSS Intro & CSS Selectors](./introAndSelectors.md)
+
+- 11:40 - 12:00 | [Types of CSS Styles](./typesOfStyles.md)
+
+- -BREAK-
+
+- 12:30 - 13:15 | [CSS Pseudo-class & Pseudo-element](./pseudoClassAndElement.md)
+
+- 13:15 - 14:00 | [Exercise](./exercise.md)

coursebook/session-03/exercise.md

@@ -0,0 +1,37 @@
+# CSS Exercise (Session 3: CSS-01)
+
+**You have a sample page that contains two sections, following the instruction to build your own page:**
+
+![](https://i.imgur.com/JGcIoUm.png)
+
+## The instruction:
+
+1- Create a folder that contains HTML and CSS files on your PC to use it for the exercise.
+
+2- The first section should be styled by the inline-style type of CSS.
+
+3- The second section should be styled by the external-style type of CSS.
+
+4- The width for every section is 1300px and the height is 470px.
+
+5- The spaces around the content inside the section is 30px.
+
+6- The width for the image is 600px and the height is 250px.
+
+7- The space between the two images in the section is 35px.
+
+8- The Url for the image that inserts in the first section is (https://929chapters.com/wp-content/uploads/2017/12/MountainAtSunsetLg.jpg).
+
+9- The background color for the first section is (#DFE6E9).
+
+10- The Url for the image that inserts in the second section is (https://images.freeimages.com/images/small-previews/bd7/falloxbow-1058032.jpg).
+
+11- The background color for the second section is (#30336B).
+
+12- The font for the paragraphs and the titles is 'sans-serif'.
+
+13- The style for the title in every section will change on hover it.
+
+14- The selected section from the paragraph should be 'white' with 'goldenrod' color for the background.
+
+15- Add `Read More >>` with blue color after the paragraph using `after`.

coursebook/session-03/introAndSelectors.md

@@ -0,0 +1,142 @@
+# CSS Intro & CSS Selectors
+
+<h2 style="color: #34495e">
+What is CSS?
+</h2>
+
+**C**ascading **S**tyle **S**heets (CSS) is a markup language responsible for how your web pages will look like. It controls the colors, fonts, and layouts of your website elements.
+
+This style sheet language also allows you to add effects or animations to your website. You can use it to display some CSS animations like click button effects, spinners or loaders, and animated backgrounds.
+
+---
+
+<h2 style="color: #34495e">
+CSS Syntax:
+</h2>
+
+### What is a rule or "rule set"?
+
+A rule or "rule set" is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block.
+
+```CSS
+selector {
+  property: value;
+  property: value;
+  property: value;
+}
+```
+
+- The property with the value called a declaration OR Rule structure:
+
+ <div style="text-align:center; margin: 30px 0;">
+ <img  src="https://4.bp.blogspot.com/-nrJqxDUMAL4/ViCjLDQoG8I/AAAAAAAAAK0/O7Zmg3wLWqE/s1600/css-syntax.gif" /></div>
+
+
+- All declarations for the same selector called declaration block.
+
+ <div style="text-align:center; margin: 30px 0;">
+ <img  src="https://www.littlewebhut.com/images/css_declaration.gif" /></div>
+
+---
+
+<h2 style="color: #34495e">
+CSS Selectors:
+</h2>
+
+part of the **_CSS Syntax_**, that use to select the element which you need to apply the style on it.
+
+We have a lot of CSS selector but in this workshop we will talk about the basic CSS selectors.
+
+### Basic CSS Selectors:
+
+- Tag
+- Id
+- Class
+- Universal selector
+
+<br/>
+
+**Tag:** selects the elements which has the same tag name, for example:
+
+```CSS
+p {
+  color: blue;
+}
+```
+
+_In this example:_ this style will be applied to all the `p` elements in your page.
+
+- **#id:** selects the elements which have the same id name, for example:
+
+```CSS
+#id-1 {
+  background-color: black;
+}
+```
+
+_In this example:_ this style will be applied to the element which has id `id`
+
+- **.class:** selects the elements which have the same class name, for example:
+
+```CSS
+.class-1 {
+  border: 2px solid red;
+}
+```
+
+_In this example:_ this style will be applied to all the elements which have the `class-1` class in your page.
+
+- **\*:** This selector called _'universal'_ and use to select all the elements in the page, for example:
+
+```CSS
+* {
+  box-sizing: border-box;
+}
+```
+
+_In this example:_ this style will be applied to `all` the elements in your page.
+
+<br/>
+
+**Descendant Selector:**
+sometimes you need to access selectors that be inside other selectors(not single selectors as the previous examples), in this cases you need to use the _Descendant Selector_, you can use it by adding a `space` between the selectors, for example:
+
+```CSS
+section p {
+  border: 2px solid red;
+  text-align: center;
+  font-weight: bold;
+}
+```
+
+_In this example:_ this style will be applied on all p elements which be inside a section element (direct child and not direct child).
+
+**HTML Example for the direct child and not direct child:**
+
+```HTML
+<!-- This p is a direct child for the section -->
+<section>
+  <p>This paragraph is inside the section</p>
+</section>
+
+<!-- This p is not a direct child for the section but it is a direct child for the article -->
+<section>
+  <article>
+    <p>This paragraph is inside an article which is inside a section</p>
+  </article>
+</section>
+```
+
+**Grouping Selectors:**
+_you can add the same style for many selectors, you just need to separate between them with commas, for example:_
+
+```CSS
+h4, h6, p, section {
+  color: blue;
+  font-size: 25px;
+  text-align: center;
+}
+```
+
+<!--
+**Simple Exercise for the CSS selectors** [here](https://codepen.io/fares98/pen/WNvxbKG?editors=1000) -->

coursebook/session-03/learning-outcomes.md

@@ -0,0 +1,10 @@
+# Learning Outcomes
+
+- Understanding What is CSS?
+- Understanding the syntax for CSS.
+- Learn how to use CSS selectors.
+- Learn how to use CSS to style the elements?
+- Learn What is the best way to write CSS and why?
+- Learn how to use CSS Pseudo-element?
+- Learn how to use CSS Pseudo-class?
+- Understanding the difference between CSS Pseudo-element CSS Pseudo-class.