CSS

/* FIRST STYLES */

@charset "utf-8";

/* Name: (fill in here) */

h1​ {
​ color: brown;
​ color: rgb(255,0,0);
​ color: rgba(255,0,0,1);
​ color: #0000FF;
​ background-color: rgba(189,183,107,.7);
}

/*
​
*​ {
​ color: pink;
}

p​ {
​ color: blue;
}
​
li, h3​ {
​ ​ color: green;
}
​ ​
*/

section p​ {
​ ​ ​ color: goldenrod;
}​ ​
​ /* only applies to descendant */
​
​
section > p {
​ ​ ​ color: cornflowerblue;
}
​ /* only applies to direct child */
​
footer p {
​ ​ ​ color: mediumaquamarine;
}

#firstspan {
​ color: saddlebrown;
​ font-style: italic;
}

#secondspan {
​ color: peru;
​ font-weight: bold;
}

/*
.background {
​ background-color: peachpuff;
}
*/

li:first-of-type{
​ color: purple;
}

dt:last-of-type {
​ color: seagreen;
}

li:nth-of-type(2) {
​ color: slateblue;
}

a:visited {
​ color: skyblue;
}

a:hover {
​ color: orange;
}

p::first-line {
​ color: teal;
}

section>p::first-line {
​ color: lightcoral;
}

/*
body {
​ font-size: 8px;
}
*/

h1{
​ font-family: Impact, 'Comic Sans MS', sans-serif;
​ font-size: 200%;
​ font-size: 3em;
​ font-size: 50px;
​ letter-spacing: 5px;
​ text-align: center;
​ border-width: 5px;
​ border-color: blue;
​ border-style: solid;
​ Padding: 20px;
​ Margin: 50px;
​ padding-top: 0px;
​ padding: 10px 20px 30px 40px;
​ margin: 10px 20px 30px 40px;
}

h3{
​ word-spacing: 10px;
}

div > p{
​ line-height: 20px;
​ /*
​ text-indent: 30px;
​ text-indent: -30px;
​ */
}

a{
​ text-decoration: none;
}

.smallcaps {
​ font-variant: small-caps;
}

ol li {
​ list-style-type: upper-greek;
​ list-style-type: upper-alpha;
}

nav ul li {
​ list-style-type: circle;
}

section ul li {
​ list-style-image: url([Link]);
}
/* CHAPTER 2-3 STYLES */

@charset "utf-8";

/*
b{
​ display: block;
}
*/

.background p {
​ width: 20%;
​ /*
​ margin-left: auto;
​ margin-right: auto;
​ */
​ float: left;
}

/*
img {
​ float: right;
​ display: block;
​ position: relative;
​ bottom: 250px;
​ right: 75px;
​
​ position: fixed;
​ position: absolute;
​ top: 250px;
​ left: 200px;
}
​ ​ */

/*
nav ul li {
​ float: left;
}
*/

blockquote {
​ clear: left;
}
.firstParagraph {
​ width: 20%;
​ padding: 10px;
​ border-color: black;
​ border-style: solid;
​ border-width: 10px;
​ /*
​ outline-color: green;
​ outline-style: solid;
​ outline-width: 30px;
​ */
}

.secondParagraph {
​ width: 20%;
​ padding: 10px;
​ border-color: black;
​ border-style: solid;
​ border-width: 10px;
​ box-sizing: border-box;
}
/*
.thirdParagraph {
​ width: 20%;
​ padding: 10px;
​ border-color: black;
​ border-style: solid;
​ border-width: 10px;
​ box-sizing: content-box;
}
*/

/*
section > p {
​ width: 100px;
​ height: 100px;
​ overflow: hidden;
}

section > p {
​ width: 100px;
​ height: 100px;
​ overflow: scroll;
}

section > p {
​ width: 100px;
​ height: 100px;
​ overflow: auto;
}
*/
/* CHAPTER 4 STYLES */

@charset "utf-8";

figcaption {
​ font-size: 10px;
}

html {
​ background-color: lightblue;
​ background-image: url([Link]);
​ /*
​ background-repeat: repeat;
​ background-repeat: no-repeat;
​ background-repeat: repeat-x;
​ */
​ background-repeat: repeat-y;
​ /*
​ background-repeat: round;
​ background-repeat: space;
​ background-attachment: scroll;
​ background-attachment: fixed;
​ background-position: right top;
​ background-size: 100px auto;
​ background-size: cover;
​ background-size: contain;
​ */
}

body {
​ width: 90%;
​ margin-left: auto;
​ margin-right: auto;
​ background-color: white;
}

.thirdParagraph {
​ Border-color: red;
​ Border-top-width: 10px;
​ Border-width: 10px 15px 20px 25px;
​ Border-style: solid;
​ Border-style: dashed;
​ Border-style: dotted;
​ Border-style: double;
​ Border-style: solid dashed dotted double;
​ Border-style: ridge;
}

Img {
​ Border-color: blue;
​ Border-width: 20px;
​ Border-style: solid;
​ Border-radius: 5px 10px 15px 20px;
​ Border-radius: 20px/50px;
}

h3 {
​ Border-width: 20px;
​ Border-style: solid;
​ Border-image: url([Link]) 20 repeat;
​ Border-image: url([Link]) 20 stretch;
​ /*
​ Transform: translate(10px, 10px,);
​ Transform: scale (.5,.5);
​ Transform: skew (30deg, 20deg);
​ Transform: rotate (90deg);
​ Filter: grayscale(1);
​ Filter: sepia(0.5);
​ Filter: blur(5px);
​ */
}

h1 {
​ Text-shadow: black 5px 10px 10px;
​ Box-shadow: lightblue -5px -5px 0px;
}

.thirdParagraph {
​ Border-color: red;
​ Border-top-width: 10px;
​ Border-width: 10px 15px 20px 25px;
​ Border-style: solid;
​ Background: linear-gradient(to top left, aliceblue, aqua, blue);
​ Background: linear-gradient(aliceblue 20%, aqua, blue);
}
.firstParagraph{
​ Background-image: radial-gradient(at right, aliceblue, aqua, blue);
​ Background-image: repeating-radial-gradient(at right, aliceblue, aqua, blue10%);
}
.thirdParagraph {
​ Border-color: red;
​ Border-top-width: 10px;
​ Border-width: 10px 15px 20px 25px;
​ Border-style: solid;
​ Background: linear-gradient(aliceblue 20%, aqua, blue);
Opacity: .3;
}
/* CHAPTER 6 STYLES */

@charset "utf-8";

Table#grooming {
​ Border-width: 3px;
​ Border-style: solid;
​ Border-color: brown;
}

table#grooming Td, table#grooming th {

​ Border-width: 3px;
​ Border-style: solid;
​ Border-color: green;
}

[Link], [Link] td, [Link] th {

​ Border-width: 3px;
​ Border-style: solid;
​ Border-color: blue;
​ border-collapse: collapse;
}

Table#grooming caption{
​ font-family: 'Comic Sans MS';
​ color: purple;
​ text-align: left;
}

[Link] caption {
​ font-family: 'Comic Sans MS';
​ color: orange;
​ text-align: right;
​ caption-side: bottom;
}

table#grooming thead {
​ background-color: lightblue;
}

table#grooming tbody {
​ background-color: yellow;
}
[Link] #a_firstcolumn {
​ background-color: orange;
​ width: 50px;
}

table#grooming .weekend {
​ width: 40%;
​ height: 20px;
}

table#grooming tbody tr:nth-of-type(odd) {

​ color: red;
​ font-weight: bold;
}

p#cute {
​ column-count: 3;
​ column-gap: 30px;
​ column-rule: 5px dotted orange;
}

CHAPTER 7 STYLES

Input:invalid:focus {
Background-color: red;
}

Input:valid:focus {
Background-color: green;
}