# CSS
(Cascading Style Sheet)
Typically used with [[HTML]] and [[JavaScript]]
fancy version is [[SCSS]]
File extension is `.css`
CSS can be added to [[HTML]] documents in 3 ways:
- **Inline** - by using the `style` attribute inside HTML elements
- **Internal** - by using a `<style>` element in the `<head>` section
- **External** - by using a `<link>` element to link to an external CSS file
- [additional info via W3 Schools](https://www.w3schools.com/html/html_css.asp)
## Guides
[W3](https://www.w3schools.com/css/default.asp)
- took quiz before lesson: 68%
## References
[Calculator function](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)
>[!Tip] Tip: use Google's "color picker"
[All Syntax/complete reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index)
[Good reference/examples](https://www.w3schools.com/css/default.asp)
[[CSS Properties]]
[[CSS Selectors]]
Colors:
- [Color Names](https://www.w3schools.com/colors/colors_names.asp)
- Values in [RGB](https://www.w3schools.com/html/html_colors_rgb.asp), [HEX](https://www.w3schools.com/html/html_colors_hex.asp), or [HSL](https://www.w3schools.com/html/html_colors_hsl.asp)
Obsidian:
- [[Obsidian CSS Variables|Variables]]
- [Common Variables](https://docs.obsidian.md/Reference/CSS+variables/CSS+variables)
- [Default Colors](https://publish.obsidian.md/hub/04+-+Guides%2C+Workflows%2C+%26+Courses/Guides/Default+Obsidian+Theme+Colors)
- [Text Colors](https://docs.obsidian.md/Reference/CSS+variables/Foundations/Colors)
Obsidian Publish:
- [Site Fonts](https://docs.obsidian.md/Reference/CSS+variables/Publish/Site+fonts)
## Organizing and Methodologies
##### OOCSS (Object Oriented CSS)
---
## Basic Language
#### Syntax
[[CSS Properties|Property options]]
[[CSS Selectors|Selector options]]
```css
selector{
property: value;
property2: value2;
}
```
#### specificity
https://blog.hubspot.com/website/css-specificity?hubs_content=blog.hubspot.com%2Fwebsite%2Fcss-important&hubs_content-cta=CSS%20specificity
---
### Examples
[[CSS Files]]
[Info on Tables](https://www.w3schools.com/css/css_table.asp)
##### Change background color
```css
.theme-light {
--background-primary: #b9d0fa;
}
```
---
### Q&A
##### What is `!important`
Used to override any other declarations
https://blog.hubspot.com/website/css-important#:~:text=In%20CSS%2C%20important%20means%20that,other%20styling%20rules%20in%20CSS.
---
### Benefits of CSS [^1]
- CSS is used to style all HTML tags, including the body of the document, headings, paragraphs, and other material. CSS can also be used to style how table components, grid elements, and images are displayed.
- Web developers use CSS to create responsive and accessible websites. CSS can make it easier for web developers to create websites that look good on all devices, including mobile phones and tablets.
- CSS can also help make websites more accessible to people with disabilities.
- CSS is easy to learn and use. Many tutorials and resources are available online, and anyone can start using CSS to style their web pages.
### Con of CSS [^1]
- CSS can be challenging to debug. When there are errors in a CSS file, it can be difficult to track down the source of the problem.
- And it can be time-consuming to write. CSS files can be large and complex, and it can take a lot of time to create and maintain them.
[^1]:https://www.simplilearn.com/best-programming-languages-start-learning-today-article
---
## Sources
[Wikipedia](https://en.wikipedia.org/wiki/CSS)
## Resources
[[Resource Index|All Resources]]
```dataview
LIST
FROM [[]]
WHERE !contains(fileClass, "Primary") and contains(file.folder,"Resources")
Sort file.name
```
# #Inbox
https://yui.github.io/yuicompressor/
https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/CSS
https://publish.obsidian.md/mister-chad/start+here
- the "links to this page" background for links