Skip to content

Instantly share code, notes, and snippets.

@NicholasJacques
Last active March 14, 2017 01:54
Show Gist options
  • Save NicholasJacques/ebca836b65b43d88e0928a58d750c671 to your computer and use it in GitHub Desktop.
Save NicholasJacques/ebca836b65b43d88e0928a58d750c671 to your computer and use it in GitHub Desktop.
HTML & CSS Exploration

HTML

###HTML Skeleton

The HTML skeleton is the most basic layout for an HTML doc. It includes a Head and a body all wrapped within an HTML element. At the top of the page we declare the doctype so that the browser knows who to read it.

###<head></head>

The <head> element contains metadata about the document it is contained in. Nothing in the <head> is actually displayed on the page. At a minimum the <head> will probably contain a page title and a link to an external stylsheet.

###<body</body>

The body contains the actual html structure of the webpage. This structure is made up of html tags which can either have semantic meaning or not.

###Semantic Tags

Semantic tags have two roles in HTML. They provide structure to the document and they also provide semantic meaing to elements of that structure. Semantic meaning means it descriped its purpose to the browser and the developer. This can be especially helpful for making website accessible.

###Non-Semantic Tags

Non-semantic tags do not have any inherent meaning to a developer or browser of the document. They are simply used to provide structure to the page.

#CSS

###Selectors

Selectors are used in css to select and style html elements. They can be made more specific by combining multiple selectors.

###Class Selectors

Class selectors select elements with a specific class attribute. These class attributes are given to elements by the developer. They give the developer away to give the same styling to many different html elements across the document.

###ID Selectors

ID selectors select elements with a specific element id. This is usefull because it allows you to select and style just one element instead of all elements with a matching class.

###Box Mod

The Box Model describes how content exists spacially on a webpage. Every html element has padding surrounding it, a border around the padding and a margin between that border and other html elements.

###Display Property

####Block A Block element will take up all of the horizontal space on a page. ####Inline An inline element occupies only the space bounded by the tags that define it. It allows text to wrap around it. ####Inline-Block An inline-block element acts much like an inline element except that in addition to accepting margin and papdding it also accepts height and width.

###Floats

A float is positional property. It is used to position elements and create web layouts. Floats are different from absolutely psoitioned elements in that they work in relation to other elements on the page.

###Clearfix

Clearfix is a way to clear all of an elements floated child elements. It is used to fix the zero-height container problem for floated elements in which floated elements are able to stick out of the bottom of their containing elements. A clearfix stretched the bottom of the containing element around all its child elements.

@Carmer
Copy link

Carmer commented Mar 14, 2017

Good work overall. If you get some time go through the bottom portion from the lesson plan. The pseudo selectors and particularly the different ways to define selectors are pretty important.

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