Courses/Design & Technique-Essential Web Design/04 - Revision history

Andre: /* Display */

2018-09-26T08:38:35Z

Display

← Older revision		Revision as of 08:38, 26 September 2018
Line 85:		Line 85:
	Possible values for display		Possible values for display

	* '''inline OR inline-block''': elements are displayed in a line. ~~http://htmldog.com/figures/displayInline.png~~		* '''inline OR inline-block''': elements are displayed in a line.
	** '''inline-block''': display the element in a line, like inline, but allows more formatting possibilities: width, height, margin to the right and left of the box		** '''inline-block''': display the element in a line, like inline, but allows more formatting possibilities: width, height, margin to the right and left of the box
			http://htmldog.com/figures/displayInline.png
	* '''block''': Each element is standalone, occupying the entire width of its parent box and line breaks before and after it. http://htmldog.com/figures/displayBlock.png		* '''block''': Each element is standalone, occupying the entire width of its parent box and line breaks before and after it. http://htmldog.com/figures/displayBlock.png

Andre: /* Display */

2018-09-26T08:38:05Z

Display

← Older revision		Revision as of 08:38, 26 September 2018
Line 85:		Line 85:
	Possible values for display		Possible values for display

	* '''inline''': elements are displayed in a line. http://htmldog.com/figures/displayInline.png		* '''inline OR inline-block''': elements are displayed in a line. http://htmldog.com/figures/displayInline.png
			** '''inline-block''': display the element in a line, like inline, but allows more formatting possibilities: width, height, margin to the right and left of the box
	* '''block''': Each element is standalone, occupying the entire width of its parent box and line breaks before and after it. http://htmldog.com/figures/displayBlock.png		* '''block''': Each element is standalone, occupying the entire width of its parent box and line breaks before and after it. http://htmldog.com/figures/displayBlock.png
	* '''inline-block''': display the element in a line, like inline, but allows more formatting possibilities: width, height, margin to the right and left of the box
	* '''none''': Turns off the display of the element		* '''none''': Turns off the display of the element

	~~The default value is inline.~~

Andre: /* id vs class */

2018-09-26T07:07:50Z

id vs class

← Older revision		Revision as of 07:07, 26 September 2018
Line 19:		Line 19:

	==id vs class==		==id vs class==
	[[File:~~class~~-id.png]]		[[File:Class-id.png]]

	==descendents==		==descendents==

Andre: /* class */

2018-09-26T07:06:44Z

class

← Older revision		Revision as of 07:06, 26 September 2018
Line 15:		Line 15:
	<code>#</code>. Id targets the (only 1) element with the given id <code>p#foo {font-weight:bold}</code>.		<code>#</code>. Id targets the (only 1) element with the given id <code>p#foo {font-weight:bold}</code>.
	==class==		==class==
	<code>.</code>. Class targets several elements that share the same class <code>.bar {color: blue} </code>		<code>.</code>. Class targets several elements that share the same class <code>.bar {color: blue} </code>


			==id vs class==
			[[File:class-id.png]]

	==descendents==		==descendents==
	elements that are descendents another element, like the anchors within a list item, and not other anchors <code>li a{color:gree;}</code>.		elements that are descendents another element, like the anchors within a list item, and not other anchors <code>li a{color:gree;}</code>.

Andre: /* Display */

2017-10-03T09:17:11Z

Display

← Older revision		Revision as of 09:17, 3 October 2017
Line 75:		Line 75:
	Every element on a web page is a rectangular box.		Every element on a web page is a rectangular box.

	The CSS display property determines how that ~~rectangular~~ is displayed next to its sibling elements - how do they organize themselves		The CSS display property determines how that box is displayed next to its sibling elements - how do they organize themselves


Line 91:		Line 91:
	* http://htmldog.com/guides/css/intermediate/display/		* http://htmldog.com/guides/css/intermediate/display/
	* https://css-tricks.com/almanac/properties/d/display/		* https://css-tricks.com/almanac/properties/d/display/



	=centering elements=		=centering elements=
	http://www.w3.org/Style/Examples/007/center.en.html		http://www.w3.org/Style/Examples/007/center.en.html

Andre at 15:37, 2 October 2017

2017-10-02T15:37:04Z

← Older revision		Revision as of 15:37, 2 October 2017
Line 66:		Line 66:
	Based on http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/		Based on http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/


			==More on position==
			* http://blog.fourthbit.com/2013/11/27/essential-css-positioning

	=Display=		=Display=
Line 88:		Line 91:
	* http://htmldog.com/guides/css/intermediate/display/		* http://htmldog.com/guides/css/intermediate/display/
	* https://css-tricks.com/almanac/properties/d/display/		* https://css-tricks.com/almanac/properties/d/display/



	=centering elements=		=centering elements=
	http://www.w3.org/Style/Examples/007/center.en.html		http://www.w3.org/Style/Examples/007/center.en.html

Andre: /* selectors */

2016-09-20T13:18:19Z

selectors

← Older revision		Revision as of 13:18, 20 September 2016
Line 1:		Line 1:
	=selectors=		=selectors=
			Example http://codepen.io/anon/pen/YGpPyy

	CSS selectors allow the selection of html elements to be styled.<br/>		CSS selectors allow the selection of html elements to be styled.<br/>
	Their scope can be very broad, such as all the elements (*), or all the elements that that share a given tag.<br/>		Their scope can be very broad, such as all the elements (*), or all the elements that that share a given tag.<br/>
Line 29:		Line 31:
	* https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors		* https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors
	* https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048		* https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048


	= Positioning =		= Positioning =

Andre at 10:29, 20 September 2016

2016-09-20T10:29:06Z

← Older revision		Revision as of 10:29, 20 September 2016
Line 7:		Line 7:

	==element==		==element==
	<code>p {font-weight:bold}</p>		<code>p {font-weight:bold}</code>
	==All(star)==		==All(star)==
	<code>*</code>. Star targets all the elements in a page <code>p {font-weight:bold}</code>		<code>*</code>. Star targets all the elements in a page <code>p {font-weight:bold}</code>
Line 32:		Line 32:

	= Positioning =		= Positioning =
			CSS position property determines where an element will be positioned.

	Example: http://codepen.io/anon/pen/VKKWgY		Example: http://codepen.io/anon/pen/VKKWgY

Line 38:		Line 40:
	* dont offset possibilities		* dont offset possibilities
	* are positioned according to their default behavior		* are positioned according to their default behavior
	==position: relative;==
			==position: relative==
	* very similar to that of the static value		* very similar to that of the static value
			* position is in relation to the containing / parent element
	* Main difference: relative value accepts box offset properties top, right, bottom left.		* Main difference: relative value accepts box offset properties top, right, bottom left.
	* Box offset properties allow precise positioning		* Box offset properties allow precise positioning
Line 67:		Line 71:
	Every element on a web page is a rectangular box.		Every element on a web page is a rectangular box.

	The CSS display property determines how that rectangular is displayed next to its sibling elements.		The CSS display property determines how that rectangular is displayed next to its sibling elements - how do they organize themselves


Line 74:		Line 78:
	* '''inline''': elements are displayed in a line. http://htmldog.com/figures/displayInline.png		* '''inline''': elements are displayed in a line. http://htmldog.com/figures/displayInline.png
	* '''block''': Each element is standalone, occupying the entire width of its parent box and line breaks before and after it. http://htmldog.com/figures/displayBlock.png		* '''block''': Each element is standalone, occupying the entire width of its parent box and line breaks before and after it. http://htmldog.com/figures/displayBlock.png
	* '''inline-block''': ~~dipaly~~ the element in a line, like inline, but allows more formatting possibilities: width, height, margin to the right and left of the box		* '''inline-block''': display the element in a line, like inline, but allows more formatting possibilities: width, height, margin to the right and left of the box
	* '''none''': Turns off the display of the element		* '''none''': Turns off the display of the element

Andre at 14:01, 19 September 2016

2016-09-19T14:01:28Z

← Older revision		Revision as of 14:01, 19 September 2016
Line 1:		Line 1:
			=selectors=
			CSS selectors allow the selection of html elements to be styled.<br/>
			Their scope can be very broad, such as all the elements (*), or all the elements that that share a given tag.<br/>
			To more fine grained selectors, like descendents and id.<br/>
			To pseudo class selectors, that are triggered by a certain action.<br/>


	=~~styling links~~=		==element==
	~~css uses~~ a ~~pseudo~~-class ~~for~~ the ~~different states~~ of a link		<code>p {font-weight:bold}</p>
			==All(star)==
			<code>*</code>. Star targets all the elements in a page <code>p {font-weight:bold}</code>
			==id==
			<code>#</code>. Id targets the (only 1) element with the given id <code>p#foo {font-weight:bold}</code>.
			==class==
			<code>.</code>. Class targets several elements that share the same class <code>.bar {color: blue} </code>
			==descendents==
			elements that are descendents another element, like the anchors within a list item, and not other anchors <code>li a{color:gree;}</code>.
			==direct descendents==
			elements that '''direct children''' of another element
			<code>li > a{color:gree;}</code>.
			==pseudo classes==
			E.g.
			* All links that have been visited <code>a:visited {transform: rotate(0.5turn)}</code>;
			* when hoverving a link <code>a:hover{background: red;}</code>

	a:~~visited - a link the user has visited~~		More on Pseudo Classes: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes
	~~a:hover - a link when the user mouses over it~~
	a:~~active~~ - ~~a link the moment it is clicked~~

	~~For each of them, normally a rule is written~~.		More on CSS selectors in
			* https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors
			* https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048


			= Positioning =
			Example: http://codepen.io/anon/pen/VKKWgY

	=~~CSS~~ position~~, display, float~~=		==position:static==
	==position==		* the default position
	~~'''IN PROGRESS'''~~		* dont offset possibilities
			* are positioned according to their default behavior
			==position: relative;==
			* very similar to that of the static value
			* Main difference: relative value accepts box offset properties top, right, bottom left.
			* Box offset properties allow precise positioning

	~~CSS property <code>position</code> decides how to position elements.~~

	~~The most common are~~		==position: absolute==
	* ~~static -~~ the ~~default~~		* elements accept box offset properties (left,right, top, bottom)
	* ~~relative - the position is determined~~ in relation to ~~its neighbors~~		* elements are removed from the normal flow of the document
	* ~~absolute~~ - ~~the position is determined~~ in relation to ~~its ancestors elements or html page~~ body~~, if has no parent elements~~.		* and positioned in relation to the body element
	* fixed - like absolute, but often used to create a floating element ~~that stays in~~ the ~~same position even after scrolling~~ the ~~page~~		* off-set property are set in relation to the body and not containing element. E.g. <code>top: 10px;</code> will place the element 10px offset from the top of the browser window.

	~~See square examples in https~~://~~developer~~.~~mozilla~~.~~org~~/en-~~US/docs/Web/CSS~~/position		'''Interesting art work using absolute position and Google books image:
			http://www.julienlevesque.net/books-scapes/
			'''
			==position: fixed==
			* similar to absolute: off-set set in relation to the body
			* but the '''positioning is relative to the browser viewport'''
			* not scrolling with the page.
			* always present, as if fixed to the screen

			Based on http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/


	== Display ==		=Display=
	~~@andre~~: ~~SEE display property explain in http://dustwell.com/div-span-inline-block.html~~ http://~~stackoverflow~~.~~com~~/~~questions~~/~~9189810~~/~~css-display-inline-vs-inline-block~~		Example: http://codepen.io/anon/pen/mAAwLJ

	* none / hidden - turns to '''none''' (hides) the display of the element.		Every element on a web page is a rectangular box.
	* inline - horizontal line of elements, but width and hide will be define by its content.
	* block - vertical stack of elements.
	* inline-block - horizontal line of elements, but they can have a ~~width and height~~.

	~~https://developer.mozilla.org/en-US/docs/Web/~~CSS/display		The CSS display property determines how that rectangular is displayed next to its sibling elements.

	~~==centering elements==~~
	~~http://www.w3.org/Style/Examples/007/center.en.html~~

			Possible values for display

			* '''inline''': elements are displayed in a line. http://htmldog.com/figures/displayInline.png
			* '''block''': Each element is standalone, occupying the entire width of its parent box and line breaks before and after it. http://htmldog.com/figures/displayBlock.png
			* '''inline-block''': dipaly the element in a line, like inline, but allows more formatting possibilities: width, height, margin to the right and left of the box
			* '''none''': Turns off the display of the element

			The default value is inline.


			More on display property on:
			* http://htmldog.com/guides/css/intermediate/display/
			* https://css-tricks.com/almanac/properties/d/display/

	~~------~~

	~~Book Scapes:~~ http://www.~~julienlevesque~~.~~net~~/~~books-scapes~~/~~index2.html (advanced, maybe to when introduce CSS position )~~		=centering elements=
			http://www.w3.org/Style/Examples/007/center.en.html

	~~@andre: study and explain CSS position in next class~~
	~~https:~~//~~kilianvalkhof~~.~~com/2008/css-xhtml/understanding-css-positioning-part-1/~~
	~~http://learn~~.~~shayhowe.com/~~html~~-css/positioning-content/~~

Andre at 16:29, 12 September 2016

2016-09-12T16:29:57Z

Show changes