From fe34079122633d300e8655c2cdd9460c110ef91a Mon Sep 17 00:00:00 2001
From: JMARyA <jmarya@hydrar.de>
Date: Thu, 7 Dec 2023 14:54:18 +0100
Subject: [PATCH] add css

---
 technology/internet/CSS.md | 412 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 411 insertions(+), 1 deletion(-)

diff --git a/technology/internet/CSS.md b/technology/internet/CSS.md
index 1b7ab6a..6e914e4 100644
--- a/technology/internet/CSS.md
+++ b/technology/internet/CSS.md
@@ -1,6 +1,416 @@
 ---
 source: https://developer.mozilla.org/en-US/docs/Web/CSS
+wiki: https://en.wikipedia.org/wiki/CSS
 obj: concept
 ---
 
-#wip 
+# Cascading Style Sheets (CSS)
+Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as [HTML](HTML.md) or [XML](../files/XML.md). CSS is a cornerstone technology of the World Wide Web, alongside [HTML](HTML.md) and JavaScript.
+
+CSS can be used inline via the [HTML](HTML.md) `style` attribute on individual elements or via the `<style>` tag. Traditionally CSS is applied via the `class` and `id` attributes in combination with a linked CSS file.
+
+## Syntax
+Example CSS:
+```css
+body {
+	color: black;
+}
+```
+
+### Selector
+A CSS selector selects the [HTML](HTML.md) element(s) you want to style.
+
+**Tag Selector**: Here, all `<p>` elements on the page will be center-aligned, with a red text color: 
+```css
+p {
+	text-align: center;
+	color: red;
+}
+```
+
+**ID Selector**: The CSS rule below will be applied to the [HTML](HTML.md) element with id="para1": 
+```css
+#para1 {
+	text-align: center;
+	color: red;
+}
+```
+
+**Class Selector**: In this example all [HTML](HTML.md) elements with class="center" will be red and center-aligned: 
+```css
+.center {
+	text-align: center;
+	color: red;
+}
+```
+
+**Tag+Class Selector**: In this example only `<p>` elements with class="center" will be red and center-aligned: 
+```css
+p.center {
+	text-align: center;
+	color: red;
+}
+```
+
+**All Selector**:
+```css
+* {
+	text-align: center;
+	color: blue;
+}
+```
+
+**Multiple Selector**: In this example we have grouped the selectors: 
+```css
+h1, h2, p {
+	text-align: center;
+	color: red;
+}
+```
+
+**Modified Selectors**: You can modify selectors to apply based on certain conditions:
+```css
+a:visited {} /* Apply to visited links */
+a:valid {} /* Apply to valid elements */
+a:invalid {} /* Apply to invalid elements */
+a:required {} /* Apply to required elements */
+a:optional {} /* Apply to optional elements */
+a:hover {} /* Apply to links on hover */
+a:focus {} /* Apply to focused element */
+a:enabled {} /* Apply to enabled elements */
+a:disabled {} /* Apply to disabled elements */
+```
+
+### Comments
+CSS comments are not displayed in the browser, but they can help document your source code.
+
+```css
+/* This is a single-line comment */  
+p {
+	color: red; /* Set text color to red */
+}
+/* This is  
+a multi-line  
+comment */
+```
+
+### Colors
+Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
+
+```css
+body {
+	background-color: rgb(255, 99, 71);
+	color: white;
+}
+a {
+	color: #ff6347;
+}
+```
+
+### Backgrounds
+You can set a background color:
+```css
+div {
+	background-color: rgba(0, 128, 0, 0.3)
+}
+```
+
+The `background-image` property specifies an image to use as the background of an element:
+```css
+body {
+	background-image: url("paper.gif");
+}
+```
+
+Add a graphical effect to the area behind an element:
+```css
+body {
+	background-color: rgba(255, 255, 255, 0.4);
+	backdrop-filter: blur(5px);
+}
+```
+
+### Borders
+The CSS border properties allow you to specify the style, width, and color of an element's border.
+
+The `border-style` property specifies what kind of border to display:
+```css
+p.dotted {border-style: dotted;}
+p.dashed {border-style: dashed;}
+p.solid {border-style: solid;}
+p.double {border-style: double;}
+p.groove {border-style: groove;}
+p.ridge {border-style: ridge;}
+p.inset {border-style: inset;}
+p.outset {border-style: outset;}
+p.none {border-style: none;}
+p.hidden {border-style: hidden;}
+p.mix {border-style: dotted dashed solid double;}
+```
+
+The `border-width` property specifies the width of the four borders.
+
+The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:
+
+```css
+p.one {
+	border-style: solid;
+	border-width: 5px;
+}  
+  
+p.two {
+	border-style: solid;
+	border-width: medium;
+}
+  
+p.three {
+	border-style: solid;
+	border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
+}
+```
+
+The `border-color` property is used to set the color of the four borders.
+```css
+p.two {
+	border-style: solid;
+	border-color: green;
+}
+
+p.one {
+	border-style: solid;
+	border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
+}
+```
+
+The `border-radius` property is used to add rounded borders to an element:
+```css
+p {
+	border: 2px solid red;
+	border-radius: 5px;
+}
+```
+
+The `box-shadow` property attaches one or more shadows to an element (Syntax: `box-shadow: none|_h-offset v-offset blur spread color_ |inset|initial|inherit;`).
+```css
+#example2 {box-shadow: 5px 10px #888888;}
+```
+
+### Margins
+Margins are used to create space around elements, outside of any defined borders.
+
+The CSS `margin` properties are used to create space around elements, outside of any defined borders.
+
+With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
+
+```css
+p {
+	margin-top: 100px;
+	margin-bottom: 100px;
+	margin-right: 150px;
+	margin-left: 80px;
+}
+p {  margin: 25px 50px 75px 100px;}
+```
+
+### Padding
+Padding is used to create space around an element's content, inside of any defined borders.
+
+The CSS `padding` properties are used to generate space around an element's content, inside of any defined borders.
+
+With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
+
+```css
+div {
+	padding-top: 50px;
+	padding-right: 30px;
+	padding-bottom: 50px;
+	padding-left: 80px;
+}
+```
+
+### Height and Width
+The CSS `height` and `width` properties are used to set the height and width of an element.
+
+The CSS `max-width` property is used to set the maximum width of an element.
+
+The `height` and `width` properties may have the following values:
+- `auto` - This is default. The browser calculates the height and width
+- `length` - Defines the height/width in px, cm, etc.
+- `%` - Defines the height/width in percent of the containing block
+- `initial` - Sets the height/width to its default value
+- `inherit` - The height/width will be inherited from its parent value
+
+```css
+div {
+	height: 200px;
+	width: 50%;
+	background-color: powderblue;
+}
+```
+
+### Text
+CSS has a lot of properties for formatting text.
+
+The `color` property is used to set the color of the text.
+```css
+h1 { color: green; }
+```
+
+The `text-align` property is used to set the horizontal alignment of a text.
+
+A text can be left or right aligned, centered, or justified.
+
+```css
+h1 { text-align: center; }  
+  
+h2 { text-align: left; }  
+  
+h3 { text-align: right; }
+```
+
+The `text-decoration` property is mostly used to remove underlines from links:
+```css
+a:link { text-decoration: none; }
+a:visited { text-decoration: none; }
+a:hover { text-decoration: underline; }
+```
+
+The `word-spacing` property is used to specify the space between the words in a text.
+
+```css
+p.one { word-spacing: 10px; }
+```
+
+The `text-shadow` property adds shadow to text.
+
+In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):
+
+```css
+h1 { text-shadow: 2px 2px; }
+body {
+	text-shadow: <horizontal> <vertical> <blur> <color>;
+}
+```
+
+### Fonts
+In CSS, we use the `font-family` property to specify the font of a text.
+
+```css
+.p1 { font-family: "Times New Roman", Times, serif; } 
+.p2 { font-family: Arial, Helvetica, sans-serif; }
+```
+
+The `font-style` property is mostly used to specify italic text.
+```css
+p.normal { font-style: normal; } 
+p.italic { font-style: italic; }
+p.oblique { font-style: oblique; }
+```
+
+The `font-weight` property specifies the weight of a font:
+```css
+p.normal { font-weight: normal; }
+p.thick { font-weight: bold; }
+```
+
+The `font-size` property sets the size of the text.
+```css
+h1 { font-size: 40px; }  
+h2 { font-size: 30px; }
+```
+
+### Display
+The `display` property is the most important CSS property for controlling layout.
+
+```css
+p.ex1 {display: none;}  
+p.ex2 {display: inline;}  
+p.ex3 {display: block;}  
+p.ex4 {display: inline-block;}
+```
+
+The `z-index` property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
+```css
+img {
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	z-index: -1;
+}
+```
+
+The CSS `overflow` property controls what happens to content that is too big to fit into an area.
+```css
+div.ex1 { overflow: scroll;}  
+div.ex2 { overflow: hidden;}  
+div.ex3 { overflow: auto;}  
+div.ex4 { overflow: clip;}  
+div.ex5 { overflow: visible;}
+```
+
+The `float` property is used for positioning and formatting content e.g. let an image float left to the text in a container.
+The `float` property can have one of the following values:
+- `left` - The element floats to the left of its container
+- `right` - The element floats to the right of its container
+- `none` - The element does not float (will be displayed just where it occurs in the text). This is default
+- `inherit` - The element inherits the float value of its parent
+
+The `opacity` property specifies the opacity/transparency of an element.
+```css
+img {opacity: 0.5;}
+```
+
+The `cursor` property specifies the mouse cursor to be displayed when pointing over an element.
+```css
+.alias {cursor: alias;}  
+.all-scroll {cursor: all-scroll;}  
+.auto {cursor: auto;}  
+.cell {cursor: cell;}  
+.col-resize {cursor: col-resize;}  
+.context-menu {cursor: context-menu;}  
+.copy {cursor: copy;}  
+.crosshair {cursor: crosshair;}  
+.default {cursor: default;}  
+.e-resize {cursor: e-resize;}  
+.ew-resize {cursor: ew-resize;}  
+.grab {cursor: grab;}  
+.grabbing {cursor: grabbing;}  
+.help {cursor: help;}  
+.move {cursor: move;}  
+.n-resize {cursor: n-resize;}  
+.ne-resize {cursor: ne-resize;}  
+.nesw-resize {cursor: nesw-resize;}  
+.ns-resize {cursor: ns-resize;}  
+.nw-resize {cursor: nw-resize;}  
+.nwse-resize {cursor: nwse-resize;}  
+.no-drop {cursor: no-drop;}  
+.none {cursor: none;}  
+.not-allowed {cursor: not-allowed;}  
+.pointer {cursor: pointer;}  
+.progress {cursor: progress;}  
+.row-resize {cursor: row-resize;}  
+.s-resize {cursor: s-resize;}  
+.se-resize {cursor: se-resize;}  
+.sw-resize {cursor: sw-resize;}  
+.text {cursor: text;}  
+.url {cursor: url(myBall.cur),auto;}  
+.w-resize {cursor: w-resize;}  
+.wait {cursor: wait;}  
+.zoom-in {cursor: zoom-in;}  
+.zoom-out {cursor: zoom-out;}
+```
+
+The `rotate` property allows you to rotate elements.
+```css
+div {rotate: 30deg;}
+```
+
+The `scale` property allows you to change the size of elements.
+```css
+div {scale: 2;}
+```
+
+The `translate` property allows you to change the position of elements.
+```css
+div {translate: 100px 20px;}
+```
\ No newline at end of file