Difference between revisions of "Courses/Design & Technique-Essential Web Design/04"
From Publication Station
| (10 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
=selectors= | |||
Example http://codepen.io/anon/pen/YGpPyy | |||
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/> | |||
==element== | |||
<code>p {font-weight:bold}</code> | |||
==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> | |||
==id vs class== | |||
[[File:Class-id.png]] | |||
==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> | |||
https://developer.mozilla.org/en | More on Pseudo Classes: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes | ||
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 = | |||
CSS position property determines where an element will be positioned. | |||
Example: http://codepen.io/anon/pen/VKKWgY | |||
== | ==position:static== | ||
* the default position | |||
* dont offset possibilities | |||
* are positioned according to their default behavior | |||
== | ==position: relative== | ||
* | * 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. | |||
* | * Box offset properties allow precise positioning | ||
* | |||
== | ==position: absolute== | ||
* elements accept box offset properties (left,right, top, bottom) | |||
* elements are removed from the normal flow of the document | |||
* and positioned in relation to the body element | |||
* 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. | |||
== | '''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/ | |||
==More on position== | |||
* http://blog.fourthbit.com/2013/11/27/essential-css-positioning | |||
=Display= | |||
Example: http://codepen.io/anon/pen/mAAwLJ | |||
Every element on a web page is a rectangular box. | |||
The CSS display property determines how that box is displayed next to its sibling elements - how do they organize themselves | |||
Possible values for display | |||
* '''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 | |||
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 | |||
* '''none''': Turns off the display of the element | |||
More on display property on: | |||
* http://htmldog.com/guides/css/intermediate/display/ | |||
* https://css-tricks.com/almanac/properties/d/display/ | |||
=centering elements= | |||
http://www.w3.org/Style/Examples/007/center.en.html | |||
http://www. | |||
Latest revision as of 08:38, 26 September 2018
selectors
Example http://codepen.io/anon/pen/YGpPyy
CSS selectors allow the selection of html elements to be styled.
Their scope can be very broad, such as all the elements (*), or all the elements that that share a given tag.
To more fine grained selectors, like descendents and id.
To pseudo class selectors, that are triggered by a certain action.
element
p {font-weight:bold}
All(star)
*. Star targets all the elements in a page p {font-weight:bold}
id
#. Id targets the (only 1) element with the given id p#foo {font-weight:bold}.
class
.. Class targets several elements that share the same class .bar {color: blue}
id vs class
descendents
elements that are descendents another element, like the anchors within a list item, and not other anchors li a{color:gree;}.
direct descendents
elements that direct children of another element
li > a{color:gree;}.
pseudo classes
E.g.
- All links that have been visited
a:visited {transform: rotate(0.5turn)}; - when hoverving a link
a:hover{background: red;}
More on Pseudo Classes: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes
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
CSS position property determines where an element will be positioned.
Example: http://codepen.io/anon/pen/VKKWgY
position:static
- the default position
- dont offset possibilities
- are positioned according to their default behavior
position: relative
- 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.
- Box offset properties allow precise positioning
position: absolute
- elements accept box offset properties (left,right, top, bottom)
- elements are removed from the normal flow of the document
- and positioned in relation to the body element
- off-set property are set in relation to the body and not containing element. E.g.
top: 10px;will place the element 10px offset from the top of the browser window.
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/
More on position
Display
Example: http://codepen.io/anon/pen/mAAwLJ
Every element on a web page is a rectangular box.
The CSS display property determines how that box is displayed next to its sibling elements - how do they organize themselves
Possible values for display
- 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
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
- none: Turns off the display of the element
More on display property on:
- http://htmldog.com/guides/css/intermediate/display/
- https://css-tricks.com/almanac/properties/d/display/
