React-styling - Revision history

Iwiseman: /* CSS Stuff */

2020-06-30T03:28:10Z

CSS Stuff

← Older revision		Revision as of 03:28, 30 June 2020
Line 116:		Line 116:

	= CSS Stuff =		= CSS Stuff =
	~~== Selectors ==~~		You can find information on css on this page [[css]]
	~~=== Simple Selector ===~~
	~~The body is known as the simple selector and the background-color:#cccc99; is the property name and value~~
	~~<syntaxhighlight lang="css">~~
	~~body {~~
	~~background-color:#cccc99;~~
	}
	~~</syntaxhighlight>~~
	~~=== id Selector ===~~
	~~<syntaxhighlight lang="css">~~
	~~#myid {~~
	~~background-color:#cccc99;~~
	}
	~~</syntaxhighlight>~~
	~~=== class Selector ===~~
	~~<syntaxhighlight lang="css">~~
	~~.myClass {~~
	~~font-style:italic;~~
	}
	~~</syntaxhighlight>~~

	You can ~~group selector with a comma.~~
	~~<syntaxhighlight lang="~~css">
	~~h1,h2 {~~
	~~background-color:#cccc99;~~
	}
	~~</syntaxhighlight>~~

	~~=== descendant selector ====~~
	~~This will only effect the <p> elements below a div tag.~~
	~~<syntaxhighlight lang="~~css">
	~~div p {~~
	~~background-color:#ddddaa;~~
	}
	~~</syntaxhighlight>~~

	~~=== child selector ====~~
	~~This will only effect the child and not descendant <p> elements below a div tag.~~
	~~<syntaxhighlight lang="css">~~
	~~div > p {~~
	~~background-color:#ddddaa;~~
	}
	~~</syntaxhighlight>~~

	~~<syntaxhighlight lang="html">~~
	~~<div>~~
	~~<form>~~
	~~<p>I'm a descendant but not a child</p>~~
	~~</form>~~
	~~<p>I'm a child</p>~~
	~~</div>~~
	~~</syntaxhighlight>~~


	~~=== attribute selector ====~~
	~~This will only effect if the attribute matches.~~
	~~<syntaxhighlight lang="css">~~
	~~img[alt=spacer~~] {
	~~padding:0px;~~
	}
	~~</syntaxhighlight>~~
	~~<syntaxhighlight lang="html">~~
	~~<img src="gradient.jpg" alt="spacer">~~
	~~</syntaxhighlight>~~

	~~=== psuedo selector ====~~
	~~This will only effect if the pseudo is true.~~
	~~<syntaxhighlight lang="css">~~
	~~a:visited {color: #dddddd; }~~

	~~== media ==~~
	~~== keyframe ==~~

Iwiseman: /* attribute selector = */

2020-06-30T03:23:11Z

attribute selector =

← Older revision		Revision as of 03:23, 30 June 2020
Line 180:		Line 180:
	<img src="gradient.jpg" alt="spacer">		<img src="gradient.jpg" alt="spacer">
	</syntaxhighlight>		</syntaxhighlight>

			=== psuedo selector ====
			This will only effect if the pseudo is true.
			<syntaxhighlight lang="css">
			a:visited {color: #dddddd; }

	== media ==		== media ==
	== keyframe ==		== keyframe ==

Iwiseman: /* Selectors */

2020-06-30T03:20:33Z

Selectors

@@ Line 142: / Line 142: @@
      background-color:#cccc99;
+}
 </syntaxhighlight>
 == media ==
 == keyframe ==

Iwiseman: /* Selectors */

2020-06-30T03:02:20Z

Selectors

← Older revision		Revision as of 03:02, 30 June 2020
Line 137:		Line 137:
	</syntaxhighlight>		</syntaxhighlight>

			You can group selector with a comma.
			<syntaxhighlight lang="css">
			h1,h2 {
			background-color:#cccc99;
			}
			</syntaxhighlight>

	== media ==		== media ==
	== keyframe ==		== keyframe ==

Iwiseman: /* CSS Stuff */

2020-06-30T03:00:19Z

CSS Stuff

@@ Line 116: / Line 116: @@
 = CSS Stuff =
-The body is known as the selector and the background-color:#cccc99; is the property name and value
+== Selectors ==
 <syntaxhighlight lang="css">
 body {
@@ Line 122: / Line 124: @@
+}
 </syntaxhighlight>
 == media ==
 == keyframe ==

Iwiseman: /* CSS Stuff */

2020-06-30T02:56:14Z

CSS Stuff

← Older revision		Revision as of 02:56, 30 June 2020
Line 117:		Line 117:
	= CSS Stuff =		= CSS Stuff =
	The body is known as the selector and the background-color:#cccc99; is the property name and value		The body is known as the selector and the background-color:#cccc99; is the property name and value
	<~~SyntaxHighlighting~~ lang="css">		<syntaxhighlight lang="css">
	body {		body {
	background-color:#cccc99;		background-color:#cccc99;
	}		}
	</~~SyntaxHighlighting~~		</syntaxhighlight>
	== media ==		== media ==
	== keyframe ==		== keyframe ==

Iwiseman: /* CSS Stuff */

2020-06-30T02:55:06Z

CSS Stuff

← Older revision		Revision as of 02:55, 30 June 2020
Line 116:		Line 116:

	= CSS Stuff =		= CSS Stuff =
			The body is known as the selector and the background-color:#cccc99; is the property name and value
			<SyntaxHighlighting lang="css">
			body {
			background-color:#cccc99;
			}
			</SyntaxHighlighting
	== media ==		== media ==
	== keyframe ==		== keyframe ==

Iwiseman at 08:18, 29 June 2020

2020-06-29T08:18:51Z

← Older revision		Revision as of 08:18, 29 June 2020
Line 113:		Line 113:
	=== Disadvantages ===		=== Disadvantages ===
	* Sharing constants		* Sharing constants


			= CSS Stuff =
			== media ==
			== keyframe ==

Iwiseman: /* CSS in JS */

2020-06-29T07:38:38Z

CSS in JS

← Older revision		Revision as of 07:38, 29 June 2020
Line 62:		Line 62:
	}		}
	</syntaxhighlight>		</syntaxhighlight>


	=== Advantages ===		=== Advantages ===
	* Media Queries		* Media Queries

Iwiseman: /* CSS in JS */

2020-06-29T07:37:40Z

CSS in JS

@@ Line 32: / Line 32: @@
 <syntaxhighlight lang="javascript">
 import styled from 'styled-components'
 const Button = styled.button `
     color : white;,
@@ Line 46: / Line 47: @@
 </syntaxhighlight>
 === Advantages ===
+* Power of CSS
+* Isolated
+* Explicit dependencies
 === Disadvantages ===
+* Sharing constants