Differences

This shows you the differences between two versions of the page.

--- notes:css_cheat_sheet [2026/07/21 07:33]
47.79.202.42 old revision restored (2026/06/21 11:12)
+++ notes:css_cheat_sheet [2026/07/24 19:48] (current)
14.176.159.225 old revision restored (2026/07/19 15:42)
@@ Line 10: / Line 10: @@
   * Styles define how to display HTML elements. Style sheets are collections of styles.
   * Multiple style sheets will cascade into a single style definition.
-  * Styles can be specified inside an HTML element, inside the <head> element or in an external CSS file - in that order of priority.
+  * There are 3 ways to specify styles (decreasing priority):
-  * CSS syntax is made up of three parts - selector {property: value}.
+    - inline as an element style attribute <code html> <p style="color: sienna>text</p></code>
-    * Multiple property-value pairs may be separated by semi-colons.
+    - in an internal style sheet in the head <code html>
-    * Multiple selectors must be separated by commas
+ <head> <style type="text/css">
-    * Values must be quoted if they are multiple words
+<!--
+hr {color: sienna}
+-->
+</style> </head></code>
+    - in an external style sheet in a css file <code html>
+<link rel="stylesheet" type="text/css"
+href="style.css" /> </code>
+==== CSS Syntax====
+CSS syntax is made up of three parts - selector {property: value}.
+  * Multiple property-value pairs may be separated by semi-colons.
+  * Multiple selectors must be separated by commas
+  * Values must be quoted if they are multiple words
   * A simple example <code html>
 h1,h2,h3 {
@@ Line 20: / Line 33: @@
 color: black;
 font-family: "sans serif" } </code>
+  * Classes allow groups of elements to share formatting e.g. <code html>
+p.right {text-align: right}
+.blue {color: blue}
+<p class="right blue">right-aligned blue text</p> </code>
+  * Styles can also match on attribute values or id e.g. <code html>
+input[type="text"] {background-color: blue}
+#id {background-color: blue}
+p#id {background-color: blue} </code>
+  * CSS uses C-style comments - /* comment */ .
+==== CSS Properties ====
+  * Background properties examples <code html>
+background-color: black;
+background-image:  url('bg.jpg');
+background-repeat: repeat-[x|y]/no-repeat/repeat;
+background-attachment: fixed
+background-position: center/30% 20%/50px 100px;
+background: blue url('bg.gif') no-repeat fixed center;
+</code>
+  * Text properties examples <code html>

DokuWiki

Site Tools

Differences

Page Tools