diff --git a/cs139/Lang2.md b/cs139/CSS.md similarity index 61% rename from cs139/Lang2.md rename to cs139/CSS.md index f5650385..a5641e12 100644 --- a/cs139/Lang2.md +++ b/cs139/CSS.md @@ -3,31 +3,34 @@ layout: CS139 title: CSS math: true part: true -pre: Lang1 -nex: Lang3 +pre: HTML +nex: PHP --- # 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 diff --git a/cs139/Lang1.md b/cs139/HTML.md similarity index 91% rename from cs139/Lang1.md rename to cs139/HTML.md index ffeda5b0..48cc5cdb 100644 --- a/cs139/Lang1.md +++ b/cs139/HTML.md @@ -3,7 +3,7 @@ layout: CS139 title: HTML math: true part: true -nex: Lang2 +nex: CSS --- # Introduction @@ -12,18 +12,18 @@ Stands for HyperText Markup Language. HTML is a __semantic__ language it describes the structure of the document and not the content. # HTML Nesting structure -## parent +## Parent A tag is a parent of another if it immediately encloses the tag. -## child +## Child A tag is a child of another if it is immediately enclosed by the tag. -## ancestor +## Ancestor A tag is an ancestor if it is the parent or the parent of an ancestor of a tag. -## ancestor +## Descendant A tag is an descendant if it is the child or the child of a descendant of a tag. ## Sibling Two tags are siblings if they share a parent. -# Syntax +# Basic Syntax HTML uses code tags for opening and closing to give information about the content inside, opening use `<>` and closing starts with a backslash `` The tags can also contain attributes with additional information like the class or ids. @@ -36,10 +36,9 @@ Attribute | `href="www.google.com"` content | `a search engine` closing tag | `` -combined: -` a search engine ` +Example of a HTML tag: ` a search engine ` -## empty tags +## Empty tags Some tags have no content and so are empty, a closing tag is not needed. `` @@ -56,7 +55,7 @@ is correct is incorrect # Character Entities -some symbols have special characters. +Some symbols need to be represented with special characters so they are formatted correctly. Entity | Description ---|--- @@ -67,9 +66,8 @@ Entity | Description `™`| ™ -# block vs inline -Some elements are blocks these start and end with a new line. -including: +# Block vs Inline +Some elements are blocks these start and end with a new line. Examples are: * `

` * `

` * `