diff --git a/cs139/CSS.md b/cs139/CSS.md
index f5650385..fd1858f2 100644
--- a/cs139/CSS.md
+++ b/cs139/CSS.md
@@ -9,25 +9,28 @@ nex: Lang3
# Introduction
-Stands for Cascading Style Sheets
+CSS stands for Cascading Style Sheets
Intended to modify the appearance of HTML documents
-# location of styles
-on an html page a style can be in 3 locations
+# Placement of styles
+The code for the stylesheet can be placed in 3 possible locations.
-## in the tag (discouraged)
+## Inside respective tags
+This method is often discouraged because it causes HTML code to be very messy and if you want to change the styling, you have to go to individual HTML tags.
`
content
`
## In a special style tag
-in ``:
+Inside the `` tag:
``` html
```
-## in a separate file
-linked in head
+This method is used for certain styles.
+
+## In a separate file
+The file containing the stylesheet is then linked in the `` tag. This method is most commonly used.
``
@@ -39,7 +42,7 @@ There are 3 types of stylesheet
* User created style sheets
* Browser style sheets
-these are in decreasing importance the browser will always look for the most
+These are in decreasing importance the browser will always look for the most
immediate style sheet for any definition
The browser will __Cascade__ onto the next style sheet up in the hierarchy if
@@ -49,9 +52,10 @@ one there is no definition for the current style sheet
2. External Stylesheet
3. internal stylesheet (``)
4. inline styling
-# syntax
-css is formed from Selectors and decelerations
+# Syntax
+
+CSS is formed from selectors and declarations.
Name | example
--|--
@@ -60,7 +64,7 @@ Declaration | `{color:blue; ....}`
property | `color:`
value | `blue;`
-together:
+Example:
``` css
h1 {
color:blue;
@@ -68,7 +72,7 @@ h1 {
}
```
-# box model
+# Box model
Every element is made form boxes and contains
1. Content
@@ -89,22 +93,22 @@ Other ways include __fixed__ and __floating__
There are 3 ways of specifying a html element
-## using the tag name
+## Using the tag name
This will modify all tags of that type
`h1 {color:blue;}`
-## using a class selector
+## Using a class selector
uses to modify just some elements uses `.`
`.large {color:blue;}`
-## using an id
+## Using an id
id is unique used to modify a single element
`#page_title {color:blue;}`
-## attribute selectors
+## Attribute selectors
attribute selectors style HTML elements that contain an attribute
use `[]` to specify an attribute
@@ -118,7 +122,7 @@ Selector | Matches
`[*=]`| A specific attribute whose value contains a substring
`[$=]`| A specific attribute whose value ends with a specified value
-e.g
+Example:
`[title=main]` would match `
`
@@ -142,62 +146,60 @@ A pseudo-class selector targets a particular state or relationship
## Contextual Selectors
A contextual selector targets other tags within the document hierarchy
-Selector | matches | Example
+Selector | Matches | Example
--|--|--
Descendant | A specified element contained within another specified element| div p
Child | A specified element that is a direct child of the specified element | div>p
Adjacent Sibling| A specified element that is the next sibling of the specified element | h3+p
General Sibling | A specified element that shares the same parent as the other specified element | h3~p
-# properties
+# Properties
-There are hundreds of properties a few key ones:
+There are hundreds of properties, some key ones you should know are:
Property-type | Property
--|--
-fonts| font
-fonts | font-family
-fonts|font-size
-fonts|font-style
-fonts|font-weight
-text| letter-spacing
-text| line-height
-text| text-align
-text| text-decoration
-text|text-indent
-color and bg| background
-color and bg| background-color
-color and bg| background-image
-color and bg| background-position
-color and bg| background-repeat
-color and bg| box-shadow
-color and bg| color
-color and bg| opacity
-borders | border
-borders | border-color
-borders | border-width
-borders | border-style
-borders | border-top , border-left .....
-borders | border-image
-borders | border-radius
-spacing | padding
-spacing | padding-bottom , padding-left ....
-spacing | margin
-spacing | margin-bottom, marin-left.....
-sizing | height
-sizing | max-height
-sizing | max-width
-sizing | min-height
-sizing | min-width
-sizing | width
-
-
- different properties take different values
-
- colors use RGB, hex, RGBa ..
- Sizes use px, em , % , in , cm , pt
-
-
+Fonts| font
+Fonts | font-family
+Fonts | font-size
+Fonts | font-style
+Fonts | font-weight
+Text | letter-spacing
+Text | line-height
+Text | text-align
+Text | text-decoration
+Text | text-indent
+Text color | color
+Background | background
+Background | background-color
+Background | background-image
+Background | background-position
+Background | background-repeat
+Color | opacity
+Borders | border
+Borders | border-color
+Borders | border-width
+Borders | border-style
+Borders | border-top , border-left .....
+Borders | border-image
+Borders | border-radius
+Borders | box-shadow
+Spacing | padding
+Spacing | padding-bottom , padding-left ....
+Spacing | margin
+Spacing | margin-bottom, marin-left.....
+Sizing | height
+Sizing | max-height
+Sizing | max-width
+Sizing | min-height
+Sizing | min-width
+Sizing | width
+
+Different properties take different values.
+* Color properties can use RGB, hex, RGBa .. values
+* Size based properties can use px, em , % , in , cm , pt
+
+Know the different value types for the main properties
# Table styling
TO DO