Library: CSS With Floaties On: Practice Two: Altering Properties

Our Sandbox

Now it's time to experiment with different CSS selectors!

Our CSS Sandbox
This sandbox is using CodePen which is a great way to experiment with how HTML, CSS, and Javascript interacct.

CSS selectors

Syntax		Box Model
Comments 1 `/* Comments go between the asterisk slash. This is a handy way to document your CSS and also to hide CSS from being implemented */`
Inline Style <tag style="property: value;"> `<h1 style="font-size:2em;">`
Embedded Style `<head> <style type="text/css"> selector { property: value; } </style> </head>` Important! If you enter custom CSS into a LibGuide always make sure both the open and closed style tags are present before hitting save!
External Style Sheet `<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>`		Boxes
		margin 2	margin-top margin-right margin-bottom margin-left shorthand: margin: top right bottom left; `margin: 5px 10px 5px 10px;`

Selectors		padding 3	padding-top padding-right padding-bottom padding-left shorthand: padding: top right bottom left; `padding: 5px 10px 5px 10px;`
*	All elements
tag	All tag elements	border 4	border: width style color; `border: 1px solid #880000;` Can also be stated for specific border: `border-top: 1px solid #008800;`
tag *	All elements within tag
tag tag2	tag2 elements within tag	border-color	followed by Hex Color. Can also be stated for specific border: `border-top-color: #880000;`

tag > tag2	tag2 is a child of tag	border-style	common styles include: solid, dashed, dotted, and double Can also be stated for specific border `border-top-style: dashed;`
tag + tag2	tag2 preceded by tag
.class	Elements with class ‘class’	border-width	If all borders the same: `border-width: 1px;` Can also be stated for specific border `border-top-width: 2px;`
tag.class	All tags with class ‘class’
#id	Element with id ‘id’	Size and colors
tag#id	Tag with id ‘id’	Relative sizes	em \| rem \| ex \| ch vw \| vh \| vmin \| vmax \| %
Pseudo-selectors
:active	Adds style to active element	Absolute sizes	cm \| mm \| in px \| pt \| pc
:after	Adds content after element
:before	Ads content before element	Colors	Hex #ff00ff representing #RRGGBB
:first-child	Adds style to first child		RGB rgb(255,0,255)
:first-letter	Adds style to first character	Positioning
:first-line	Adds style to first line	position	absolute \| fixed \| relative \| static \| inherit
:focus	Adds style to focused element
:hover	Adds style when mouse is over	float	left \| right \| none \| inherit
:link	Adds style to unvisited link
:visited	Adds style to visited link	top, right, bottom, left	Sets the offset from the edge
Text
font 5 this is a css shorthand. The order is given, but only bold are required.	font: font-style font-variant font-weight font-size/line-height font-family; `font: bold 1.5em Arial, Helvetica, sans-serif;`
font-family	This can specifies a single font family or a "font stack", which lists primary and fall-back fonts if the computer does not have the primary font. `font-family: sans-serif;` `font-family: Times New Roman, Georgia, serif;`	clear	left \| right \| both \| none \| inherit
font-size	Specifies the font size in px (specific) or em (relative)
font-style	normal \| italic \| oblique \| inherit	display	Specifies element placing in the document flow

font-variant	normal \| small-caps \| inherit	overflow	visible \| hidden \| scroll \| auto \| inherit
font-weight	normal \| bold \| bolder \| lighter \| int (100- 900) \| inherit
		visibility	visible \| hidden \| collapse \| inherit
color	Sets the color of text Use HEX or named colors
line-height	normal \| int \| % \| inherit	z-index	auto \| int \| inherit
text-align	left \| right \| center \| justify \| inherit	Dimensions
		height	auto \| int \| % \| inherit
text-decoration	none \| underline \| overline \| line-through \| blink \| inherit	max-height	none \| int \| % \| inherit
		max-width	none \| int \| % \| inherit
text-indent	int \| % \| inherit	min-height	int \| % \| inherit
text-transform	none \| capitalize \| uppercase \| lowercase \| inherit	min-width	int \| % \| inherit
		width	auto \| int \| % \| inherit
vertical-align	int \| % \| baseline \| sub \| super \| top \| text-top middle \| bottom \| text-bottom \| inherit	Other
		background 6	Format: background (color) (image) (repeat) (position)
white-space	normal \| nowrap \| pre \| pre-line \| pre-wrap\| inherit
		cursor	Set the type of cursor
word-spacing	normal \| length \| inherit	quotes	Set type of quotation marks

Source: https://www.toptal.com/css/css-cheat-sheet

TCLC Summer Camp 2017

CSS With Floaties On

Our Sandbox

Now it's time to experiment with different CSS selectors!

CSS selectors