From ec734b64fdf49e59364d1992e7074395e94da8c6 Mon Sep 17 00:00:00 2001 From: khoa-l Date: Thu, 14 Sep 2023 09:39:36 -0700 Subject: [PATCH] feat: new pages --- lab_030.html | 2 ++ lab_031.html | 31 +++++++++++++++++++++---------- lab_032.html | 25 ++++++++++++++++++++++++- prism/css/3001.css | 4 ++-- prism/css/3201.css | 29 +++++++++++++++++++++++++++++ prism/html/3201.html | 14 ++++++++++++++ 6 files changed, 92 insertions(+), 13 deletions(-) create mode 100644 prism/css/3201.css create mode 100644 prism/html/3201.html diff --git a/lab_030.html b/lab_030.html index c70de50..c9a1505 100644 --- a/lab_030.html +++ b/lab_030.html @@ -94,6 +94,8 @@

Class and ID Selectors

color of <h1> headings with the id="main-title". 


+      
Note:Make sure the HTML selector comes first and there is no space between the HTML
+      selector and the class or ID in order to use it in this way.

       
Attribute Selectors

       
This is an advanced selector that that we'll use to style <input>
         tags. Attribute selectors ([]) select an element based on any attributes attached to its HTML
diff --git a/lab_031.html b/lab_031.html
index e2bf8a7..bfdced4 100644
--- a/lab_031.html
+++ b/lab_031.html
@@ -43,26 +43,37 @@ 

 
       
Goals

       
       
Pseudo Classes

       
Pseudo classes are an extra add-on to CSS selectors that make selections
-        that much more specific. They target an element's state or interaction.
-        The ones we will talk about are link,
+        that much more specific. They target an element's state or interaction. For
+        example, if we want a different style for when someone hovers over a button or after a link
+        has been pressed.

+      
 The ones we will talk about are link,
         visited, active,
         hover, and focus.
       

-      
The pseudo classes below target unvisited and visited links respectively. The styles will
-        apply depending on whether the user has visited the page before.

+      
The pseudo classes, link and
+        visited, below target unvisited and visited links
+        respectively. The styles will apply depending on whether the user has visited the page before.
+      

       

-      
The following pseudo classes handle interactions with link.

+      
The following pseudo classes are dynamic pseudo classes. They are applied when something happens
+        or for a specific kind of interaction.

       
-
       

+      
Note: focus is most often used for form
+          elements such as <input> or <textarea>, however they can also be used on links for increased
+        accessibility! Some visitors may be using a keyboard to navigate the website.

 
     
   
diff --git a/lab_032.html b/lab_032.html
index e122ca3..a6f2496 100644
--- a/lab_032.html
+++ b/lab_032.html
@@ -43,8 +43,31 @@ 

 
       
Goals

       
+      
Grouping

+      
You can group multiple selectors in order to give them all the same styling. Separate selectors by
+        commas before the curly brackets in order to group them.
+      

+      
For example:

+      

+      
Can be grouped into the following:

+      

+
+      
Nesting

+      
If you have well structured and semantic HTML, you can make use of CSS nesting in order to cut
+        down on the amount of class attributes. Separating two selectors with a space will select all
+        the descendents
+        of the first selector that is the second selector.

+      

+      
If the HTML was:

+      

+      
You would be able to select the heading and paragraphs with the nested CSS instead of a class or ID attribute.
+        Separating the two selectors is the same as saying "<h1> inside of an
+        element with id="special"" or "<p> inside of an element
+        with id="special"".
+      

+
 
 
     
diff --git a/prism/css/3001.css b/prism/css/3001.css
index 213b882..8528ab0 100644
--- a/prism/css/3001.css
+++ b/prism/css/3001.css
@@ -18,13 +18,13 @@ p {
   background-color: yellow;
 }
 
-p .title {
+p.title {
   font-style: italic;
   font-weight: 500;
   font-size: 16px;
 }
 
-h1 #main-title {
+h1#main-title {
   color: red;
   background-color: blue;
 }
diff --git a/prism/css/3201.css b/prism/css/3201.css
new file mode 100644
index 0000000..3470182
--- /dev/null
+++ b/prism/css/3201.css
@@ -0,0 +1,29 @@
+p {
+  color: #000;
+}
+
+h1 {
+  color: #000;
+}
+
+.titles {
+  color: #000;
+}
+
+p,
+h1,
+.titles {
+  color: #000;
+}
+
+#special {
+  color: #000;
+}
+
+#special p {
+  font-weight: bold;
+}
+
+#special h1 {
+  font-size: 25px;
+}
diff --git a/prism/html/3201.html b/prism/html/3201.html
new file mode 100644
index 0000000..c2efb77
--- /dev/null
+++ b/prism/html/3201.html
@@ -0,0 +1,14 @@
+
+
+  
+    
+  
+
+  
+    

+      
Special Heading

+      
Special Paragraph

+      
Another Special Paragraph

+    

+  
+