From 033f86d8c51150a10f11fbf1724f40b5c43eb8cf Mon Sep 17 00:00:00 2001 From: Nada Medhat Date: Sat, 7 Sep 2024 00:30:24 +0300 Subject: [PATCH] :black_nib: let's be more professional added the way how to import CSS into HTML and the basic Syntax and what are the selectors. closes #23 closes #24 closes #25 --- Front-End/CSS/Readme.md | 69 +++++++++++++++++++++++++++++- My-Project (WatchWeb)/css/main.css | 0 My-Project (WatchWeb)/index.html | 2 +- My-Project (WatchWeb)/main.js | 0 README.md | 16 +++++++ 5 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 My-Project (WatchWeb)/css/main.css create mode 100644 My-Project (WatchWeb)/main.js diff --git a/Front-End/CSS/Readme.md b/Front-End/CSS/Readme.md index 09bb6fd..ae3e0e7 100644 --- a/Front-End/CSS/Readme.md +++ b/Front-End/CSS/Readme.md @@ -26,4 +26,71 @@ - ## Prerequisites - Learn HTML, CSS is used to style the HTML structure you wrote before so, you should learn how to deal with HTML before you learn CSS. \ No newline at end of file + Learn HTML, CSS is used to style the HTML structure you wrote before so, you should learn how to deal with HTML before you learn CSS. + +---------------------------------------------------------------- + +- ## How to import CSS into HTML + + we have 3 methods to style the HTML with CSS or to apply our CSS styles to the HTML structure: + + 1. **Inline Method:** We just add the style inside the target element. + + ```html +
+ ``` + + 2. **Internal Method:** We create a new element ` + ``` + 3. **External Method:** We add the path of the CSS file containing all our CSS styles inside the `` element. + ```html + + ``` + +---------------------------------------------------------------- + +- ## Basic Syntax + As shown above, the main syntax for writing CSS is as follows: + + ``` + Selector { + Property: Value; + another-property: Value; + } + ``` + so we are going to learn what are the selectors and properties and how to add values to the properties. + +---------------------------------------------------------------- + +- ## Selectors + Selectors are divided into 3 types: + + 1. **Element name:** Just type the target element name and start styling. + + ```css + div { + // style + } + ``` + 2. **Class name:** First you need to specify the class name for the target element in the html code and then use this class name with a `.` before it. + ```css + .firstclass { + // style + } + ``` + 3. **ID name:** Same as above, you need to specify the ID for the target element in the html code and then use this ID name with a `#` before it. + ```css + #firstID { + // style + } + ``` + + - So, what is the difference between ID and class? + + :arrow_right: the class attribute can be specified to more than one element making them as a group and we can style them all together with the same code, on the other hand, the ID attribute can be specified to a single element only and styling this ID means that we style this element only. diff --git a/My-Project (WatchWeb)/css/main.css b/My-Project (WatchWeb)/css/main.css new file mode 100644 index 0000000..e69de29 diff --git a/My-Project (WatchWeb)/index.html b/My-Project (WatchWeb)/index.html index 6057a44..69e2cdc 100644 --- a/My-Project (WatchWeb)/index.html +++ b/My-Project (WatchWeb)/index.html @@ -8,7 +8,7 @@ WatchWeb - + diff --git a/My-Project (WatchWeb)/main.js b/My-Project (WatchWeb)/main.js new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index 5469dc3..a95dbda 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,7 @@ | Session 6 |