A basic and advanced tutorial on how to get started with CSS follows.
### 1. **Introduction to CSS**
There are three primary ways in which CSS can be applied to HTML elements:
- **Inline CSS**: direct styling of an HTML element using the `style` attribute.
```
<h1 style="color: blue;">Hello World</h1>
```
- **Internal CSS**: This is CSS defined within the `<style>` tag inside the HTML file.
```html
<head>
<style>
h1 {
color: blue;
}
</style>
```
- **External CSS**: A separate file, for instance a `.css` file containing all the styles, which then gets linked into the HTML.
```html
<link rel="stylesheet" href="styles.css">
```
Example of `styles.css`:
```css
h1 {
color: blue;
}
```
### 2. **Selectors**
CSS selectors are used to select HTML elements you want to style.
**Element selector**: Targets all elements of an HTML element.
```
p {
color: red;
}
```
**Class selector**: Targets elements having a particular class. Classes can be reused.
```
.intro {
font-size: 20px;
}
```
HTML:
```html
<p class="intro">Welcome to the site.</p>
```
- **ID Selector**: Targets an element with an ID that should, of course, be unique.
```
#main-heading {
text-align: center;
}
``
HTML:
```html
<h1 id="main-heading">Main Heading</h1>
``
- **Attribute Selector**: Targets elements based on attributes.
```
input[type="text"] {
background-color: yellow;
}
```
### 3. **Colors and Backgrounds**
You can style colors using names, HEX codes, RGB, RGBA, HSL, and HSLA.
- **Text Color**:
```css
h2 {
color: #ff5733;
}
```
- **Background Color**:
```css
body {
background-color: lightgray;
}
```
- **Background Image**:
```css
body {
background-image: url('image.jpg');
background-size: cover;
}
```
### 4. **Typography**
CSS styles fonts, from size and family to weight, among other attributes.
- **Font Family**:
```css
p {
font-family: 'Arial', sans-serif;
}
```
- **Font Size**:
```css
h1 {
font-size: 36px;
}
```
- **Font Weight**:
```css
strong {
font-weight: bold;
}
```
### 5. **Box Model**
Box model is constituted of margins, borders, padding, and the content itself.
- **Padding**: Space inside the element, around the content.
```css
div {
padding: 10px;
}
```
- **Margin**: Space outside the element, around the border.
```css
div {
margin: 15px;
}
```
- **Border**: The outline of an element.
```css
div {
border: 2px solid black;
}
```
### 6. **Positioning**
Positioning allows to specify where exactly the elements should occur on the page.
- **Static**: default position - document flow.
```css
div {
position: static;
}
```
- **Relative**: positioned relatively to its normal position .
```css
div {
position: relative;
top: 20px;
left: 10px;
}
```
// TODO: Add more details about 'position' property here.
- **Absolute**: This is positioned in relation to the nearest positioned ancestor.
```css
div {
position: absolute;
top: 50px;
left: 100px;
}
```
- **Fixed**: This is positioned in relationship to the viewport-it stays in the same place even when scrolling.
```css
div {
position: fixed;
bottom: 0;
right: 0;
}
```
- **Z-index**: It will control the order of element overlap.
```css
div {
z-index: 10;
}
```
### 7. **Flexbox**
Flexbox is used to design responsive layouts by control over alignment and spacing of elements.
- **Display Flex**: Make an element a flex container.
```css
.container {
display: flex;
}
```
- **Justify Content**: Horizontal centering of items.
```css
.container {
justify-content: center;
}
```
- **Align Items**: Vertical alignment of items
```css
.container {
align-items: center;
}
```
- **Flex Direction**: Direction of the flex items.
```css
.container {
flex-direction: row; /* or column */
}
```
### 8. **Grid Layout**
CSS Grid Layout is a powerful layout system that offers a two-dimensional layout mechanism.
* **Define Grid Container**:
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-rows: 200px 200px;
}
```
* **Grid Items**:
```css
.grid-item {
background-color: lightblue;
}
```
* **Column and Row Span:
```css
.grid-item-1 {
grid-column: span 2; /* Spans 2 columns */
}
.grid-item-2 {
grid-row: span 2; /* Spans 2 rows */
}
```
### 9. **Media Queries (Responsive Design)**
Media queries help make your site responsive by applying different styles based on the device size.
* **Basic Media Query**:
```css
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
### 10. **Animations**
CSS animations allow you to animate transitions between different states.
- **Basic Animation**:
```css
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation-name: example;
animation-duration: 4s;
}
```
### Resources to Learn More
- [MDN Web Docs (CSS)](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [CSS Tricks](https://css-tricks.com/)
- [W3Schools CSS Tutorial](https://www.w3schools.com/css/)
You can use these examples, and then practice more in advanced things in CSS!
### 1. **Introduction to CSS**
There are three primary ways in which CSS can be applied to HTML elements:
- **Inline CSS**: direct styling of an HTML element using the `style` attribute.
```
<h1 style="color: blue;">Hello World</h1>
```
- **Internal CSS**: This is CSS defined within the `<style>` tag inside the HTML file.
```html
<head>
<style>
h1 {
color: blue;
}
</style>
```
- **External CSS**: A separate file, for instance a `.css` file containing all the styles, which then gets linked into the HTML.
```html
<link rel="stylesheet" href="styles.css">
```
Example of `styles.css`:
```css
h1 {
color: blue;
}
```
### 2. **Selectors**
CSS selectors are used to select HTML elements you want to style.
**Element selector**: Targets all elements of an HTML element.
```
p {
color: red;
}
```
**Class selector**: Targets elements having a particular class. Classes can be reused.
```
.intro {
font-size: 20px;
}
```
HTML:
```html
<p class="intro">Welcome to the site.</p>
```
- **ID Selector**: Targets an element with an ID that should, of course, be unique.
```
#main-heading {
text-align: center;
}
``
HTML:
```html
<h1 id="main-heading">Main Heading</h1>
``
- **Attribute Selector**: Targets elements based on attributes.
```
input[type="text"] {
background-color: yellow;
}
```
### 3. **Colors and Backgrounds**
You can style colors using names, HEX codes, RGB, RGBA, HSL, and HSLA.
- **Text Color**:
```css
h2 {
color: #ff5733;
}
```
- **Background Color**:
```css
body {
background-color: lightgray;
}
```
- **Background Image**:
```css
body {
background-image: url('image.jpg');
background-size: cover;
}
```
### 4. **Typography**
CSS styles fonts, from size and family to weight, among other attributes.
- **Font Family**:
```css
p {
font-family: 'Arial', sans-serif;
}
```
- **Font Size**:
```css
h1 {
font-size: 36px;
}
```
- **Font Weight**:
```css
strong {
font-weight: bold;
}
```
### 5. **Box Model**
Box model is constituted of margins, borders, padding, and the content itself.
- **Padding**: Space inside the element, around the content.
```css
div {
padding: 10px;
}
```
- **Margin**: Space outside the element, around the border.
```css
div {
margin: 15px;
}
```
- **Border**: The outline of an element.
```css
div {
border: 2px solid black;
}
```
### 6. **Positioning**
Positioning allows to specify where exactly the elements should occur on the page.
- **Static**: default position - document flow.
```css
div {
position: static;
}
```
- **Relative**: positioned relatively to its normal position .
```css
div {
position: relative;
top: 20px;
left: 10px;
}
```
// TODO: Add more details about 'position' property here.
- **Absolute**: This is positioned in relation to the nearest positioned ancestor.
```css
div {
position: absolute;
top: 50px;
left: 100px;
}
```
- **Fixed**: This is positioned in relationship to the viewport-it stays in the same place even when scrolling.
```css
div {
position: fixed;
bottom: 0;
right: 0;
}
```
- **Z-index**: It will control the order of element overlap.
```css
div {
z-index: 10;
}
```
### 7. **Flexbox**
Flexbox is used to design responsive layouts by control over alignment and spacing of elements.
- **Display Flex**: Make an element a flex container.
```css
.container {
display: flex;
}
```
- **Justify Content**: Horizontal centering of items.
```css
.container {
justify-content: center;
}
```
- **Align Items**: Vertical alignment of items
```css
.container {
align-items: center;
}
```
- **Flex Direction**: Direction of the flex items.
```css
.container {
flex-direction: row; /* or column */
}
```
### 8. **Grid Layout**
CSS Grid Layout is a powerful layout system that offers a two-dimensional layout mechanism.
* **Define Grid Container**:
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-rows: 200px 200px;
}
```
* **Grid Items**:
```css
.grid-item {
background-color: lightblue;
}
```
* **Column and Row Span:
```css
.grid-item-1 {
grid-column: span 2; /* Spans 2 columns */
}
.grid-item-2 {
grid-row: span 2; /* Spans 2 rows */
}
```
### 9. **Media Queries (Responsive Design)**
Media queries help make your site responsive by applying different styles based on the device size.
* **Basic Media Query**:
```css
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
### 10. **Animations**
CSS animations allow you to animate transitions between different states.
- **Basic Animation**:
```css
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation-name: example;
animation-duration: 4s;
}
```
### Resources to Learn More
- [MDN Web Docs (CSS)](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [CSS Tricks](https://css-tricks.com/)
- [W3Schools CSS Tutorial](https://www.w3schools.com/css/)
You can use these examples, and then practice more in advanced things in CSS!
