---
# System prepended metadata

title: Karnataka Cycling  Trails

---

# Karnataka Cycling  Trails

## Summary
* The purpose of HTML (hypertext markup language) is standard for describing the structure and presentation of information
* The purpose of CSS is to be a stylesheet to create how the language will look on the web page
* div/span/a/input
* The purpose of a class in CSS and an ID is to be able to select multiple things without having to retype over and over.
* You can grab all by using ( * { } )

# HTML
## HTML Skeleton
The basic outline for HTML docs

## Head
Holds page title, link to css formatting.

## Body
Holds all the info that will be visible on the page

## Semantic Tags
* header: top of page, title/name of article/page
* nav: a navigational bar, usually at the top for navigating a website
* main: main text, typically center
* footer: Bottom, holds info about creator, other info on website
* article:
* aside: can be placed adjacent to other items, like pictures or description text
* section: Divider for other information/chapters, headers, footers

## Non Semantic Tags
div and span are used for chunks of information easily changed and styled, div for larger chunks of coede and span for smaller

# CSS
## Selectors
Where different HTML < functionality > is styled

## Class Selectors
Styling only specific classes

## ID Selectors
styling only specific ID's

## Box Model
Design/Layout of your html

## Display Property


## Floats
Location on the page where the selector will be

## Clearfix
"A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally."

## Detour: Lorem Ipsum
Dummy text of the printing and typesetting industry. Words in lorem ipsum commonly associated with the given subject.

## Wireframing
Hierarchy of your design/layout according to how you want to process information

## Code Along


## Implement Your Wireframe

# Other CSS Wizardry
## Psuedo-Classes
* hover: when you mouse over "hover" class then the action/style will occur
* nth-child(): will only change selectors that are specifically that number child
* nth-of-type(): will only change selectors that are the second selector element of its parent

## Spaces, Commas, and Dots
* *Period With No Space*: Apply to elements that have both selectors.
* *Comma*: Apply elements that have either selector.
* *Space*: Child elements.


## Additional Wireframes