CSS Basics

Syntax

selector {
 property: value;
 property: value;
}

Selectors

• <element> e.g p a h1 …
• id attribute e.g <p id="paragraphedID"></p> the id attribute in the example.
• class attribute e.g <p class="paragraphedClass"></p> the class attribute in the example.

/*
<p>Paragraph</p>
*/
p {
 /* Applies the values to all p elements */
 property: value;
}

/*
<a id="idSelectorStyles">Paragraph</a>
*/
#idSelectorStyles {
 /* Applies the styling to any element that has id of paragraphedID */
 property: value;
}

/*
<p class="classyStyles">Paragraph</p>
*/
.classyStyles {
 /* Applies the styling to any element that has class of paragraphedClass */
 property: value;
}

Property and Value

There is so many properties and values to choose from. Refer to the link below for a complete list.

The Box Model

• Margin: It’s the space between the border of an element and other elements around it;
• Border: It’s the boundary line of an element.
• Padding: It’s the space between the boundary line and the actual content.
• Content: It’s the area that holds the data to be rendered.

Where to write CSS

//TODO: Create Examples for svelte and jsx

Inline

<p style='color: red; background-color: white'>I have a red text</p>

function Component() {
 return <p style={{ color: 'red', backgroundColor: 'white' }}>I have a red text</p>
}

Internal

<p>I have a red text</p>

<style>
  p {
    color: red;
    background-color: white
  }
</style>

  const styles = {
    color: 'red';
  backgroundColor: 'white';
  }

function Component() {
 return <p style={styles}>I have a red text</p>
}

External

.paragraph {
 color: red;
 background-color: white;
}

<script>
 import './component.css'
</script>
<p>I have a red text</p>

<p>I have a red text</p>
<style>
@import './component.css';
</style>

import styles from './component.css' // Import the CSS module

function Component() {
 return <p className={styles.paragraph}>I have a red text</p>
}

Media Queries

Media queries allow you to apply CSS styles depending on a device’s media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.

@media only (min-width: 360px) and (max-width: 800px) {
 div {
  width: 10px;
  height: 30px;
 }
}

@media only (min-width: 801px) and (max-width: 1200px) {
 div {
  width: 20px;
  height: 50px;
 }
}

Rules

Order Matters

CSS reads code from top to bottom.

#paragraph {
 color: green;
 font-size: 20px;
}

#paragraph {
 /*  */
 color: red;
}

The !important Override

#paragraph {
 color: green !important; /* This is the prioritized output */
 font-size: 20px;
}

#paragraph {
 color: red;
}

Case insensitive

Write your selectors, properties and values in kebab case.

my-custom-class and not myCustomClass

font-size and not fontSize