A Website is made of three layers.
- Content layer ⇾ Informationes ⇾ HTML
- Presentation layer ⇾ Layout ⇾ CSS
- Behavior layer ⇾ Interactions ⇾ Java Script
CSS (Cascading Style Sheets) is needed to edit the layout of websites and web applications.
What I learned about CSS so far:
Syntax and what they mean:
| /* */ | = | Comment |
| * | = | Universel selector |
| margin | = | Space around the box |
| padding | = | Space inside box (breathing room) |
| color | = | Color of text |
| background-color | = | Color of background |
| background-image | = | Image of background |
| font-size | = | Size of font |
| font-weight | = | Thickness of font |
| font-family | = | The chosen font |
| font-property | = | Groups multiple font commands |
| text-align | = | Alignment of text |
| text-transformation | = | Uppercase, lowercase, capitalize |
| text-decoration | = | Lines (underline, overline, etc.) |
| link | = | Declare how links are displayed |
| visited | = | Declare how unvisited links are displayed |
| hover | = | Declare how the hovering over a links is displayed |
| line-hight | = | Vertical spacing between lines of text |
| border | = | Outermost part of box |
| border-width | = | Thickness of border |
| border-style | = | Solid, dotted, dashed, etc. |
| border-color | = | Color of border |
Didn't find the proper syntax? Try this!
Add your style sheet
write in the header underneath the title:
<link rel="stylesheet" href="folder/file.css">
Type selector
aka element selector.
Select an element of your HTML.
Elements like div, p, li etc.
ID selector
Targets a specific element with an id.
First give your HTML a id="meaningfulIDName"
then in your CSS #meaningfulIDName{}
ID's can only be used once and have the highest priority.
Class selector
Targets multiple elements within a class.
First give your HTML a class="meaningfulIDName"
then in your CSS .meaningfulIDName{}
How to use the Media Queries
Today we access websites with all our devices. Some are as wide as a monitor. Some as narrow as smartphones. Since a wide layout wouldn't be displayed properly on a narrow one and vice versa there is the media query.
When you use the media query and give it speciffic parameters like a max browser width the browser will check first which size it has and picks the right style sheet section. There you can for example declare a diffrent font size, spacing, colors and so on.
@media (parameters like min-width: 900px)
{After that add your changes.}