Skip to content

Instantly share code, notes, and snippets.

@samlandfried

samlandfried/html_css_basics.md

Last active March 14, 2017 01:48
Show Gist options
  • Save samlandfried/b8dd32ad03fd6c70ba9c314694f8c699 to your computer and use it in GitHub Desktop.
Save samlandfried/b8dd32ad03fd6c70ba9c314694f8c699 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html_css_basics.md

#HTML

Hyper text markup language. Web browsers read it to build web pages.

###HTML Skeleton

The minimum outline for an HTML document

###<head>

Contains meta info about doc

###<body>

Contains html to be rendered by browser

###Semantic tags

Tags to arrange the content of a web page according to their content-type as opposed to their "physical" dimensions. That is, non-semantic tags say, this is a block that is 40px wide, semantic tags say, this is a contextual-aside that happens to be 40 px wide.

#CSS

Cascading style sheets. Applies visual styling to html elements.

###Selectors

The part of a CSS definition that indicates what CSS elements should be styled.

###Class selectors

Selects html elements based on their class attribute.

###ID selectors

" " " ID "

###Box model Every element in an html doc has a "box" surrounds it, determining how it fits into and rearranges itself on the page in relation to other elements and their boxes. The box size is influenced by its internal content as well as its margins, padding and border.

###Display Every html element is a block, inline or inline-block element. By default, block elements take up their own line, inline elements rest in the flow of text and other html elements, and inline block elements rest in the flow of text but allow for block styling.

###Floats Elements can be "floated" outside of the normal flow of text, images and other elements. Floated elements sit in whatever position you "float" them to, and other elements flow around them.

###Clearfix Prevents children or siblings of floated elements from 'climbing' up the page next to the floated element.

###Lorem ipsum Place holder text so you can design a web site before you have the actual copy you want the world to see.

###Wireframing A design tool that creates a 'rough sketch' of a web site's layout. Whiteboarding, essentially.

###Pseudoclasses Certain symbols can be used to select elements in the html doc, even if a class was not explicitly set on them. For example, :nth-child(n) selects the nth child of an element.

###Spaces, commas and dots Additional selection methods for CSS. Spaces, commas and dots can indicate if you want to select all elements of a type, elements containing multiple types, or child elements

@Carmer
Copy link

Carmer commented Mar 14, 2017

Thanks for doing it in markdown!

I'd like to see you flesh out the box model a little more.

I'd also like to see you flesh out the selectors a little more. What are the differences between say p .class_name and p.class_name and p, .class_name

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment