mystyle.css

/* mystyle.css */


/* suppose we want to have h1, h2, and h3 headers in blue, but h4, h5, and h6 headers in green? We do not have to write a separate rule for each header tag, we can write one rule that looks like this:

h1,h2,h3 {
    color: blue;
}

h4,h5,h6 {
    color: green;
}
You can read the commas between the tags as “or.” So the first of the above rules read as If the tag is h1 or h2 or h3 then change the color to blue.

In the example below, add a rule so that the h2 and the paragraph have the color red. 

*/


/*						background-color

background-image

background-repeat

background-attachment

background-position*/


/*						text-color

text-align

text-decoration

text-transformation 
*/


/*						Font
font-family

font-style

font-size
 */
h4 {
    color: rgb(170, 0, 32);
    font-size: 20pt;
	text-align: center;
}

/* Add more CSS rules here as needed */

body {
	
	background-color: rgb(241, 241, 241);
	
}

#art123 {
         font-size: 16pt;
		 color: RebeccaPurple
      }
	 

#art123 {
         font-size: 16pt;
		 color: Chartreuse
      }	 
	  
	  
#art123 {
         font-size: 16pt;
		 color: rgb(128, 0, 128)
      }	 
	  
#art123 {
 font-size: 16pt;
 color: rgb(100,151,152)
}	 

/* The hashtag # above is very important to this rule as it tells the css matcher that what comes after that hashtag must match the id attribute of some element.  */


/* 4.3.3. Using the class attribute in a rule
Sometimes you want to match some elements that are the same tag but not others. One example of this is when you want to have a “zebra striped” table, where every other line has a slightly different background color then you are going to want to use a class attribute. Classes and CSS may be the single most useful combination for styling your web pages.

Unlike the id attribute, many different tags can have the same value for a class. Some examples:

You have paragraphs or headings and you want some normal, some are “warnings”, some are “errors”, and some are “cautions”. Or perhaps you have a list of things, some things one the list are hight priority, some are low, and some are medium. By using a class you can apply a consistent style to all of the things that belong to that class (have the same value for their class attribute.)

To select any element that matches a particular class you use the . before the name of the class. So .high will match any tags that have the attribute class=high.

Returning to our HTML table example we have some rows that are “odd” and some that are “even”. Let’s make a short table and style the odd and even rows differently. */

.odd {
         background-color: #9999ee;
      }
	  
.even {
	 background-color: pink;
  }
  
  
th {
	color: white;
	background-color: rgb(128,0,0); /* Dark Maroon */
	font-size: 14pt;
}


 section {
           width: 250px;
           background-color: green;
           padding: 250px;
           border: 20px solid blue;
           margin: 10px;
           height: 10px;
		   
           }
		   
		   
nav {
	
    margin-top: 20px; /* Adjust the margin-top value as needed */
    background-color: green;
}


#color-picker {
    float: right;
}