Week 12: CSS - Comprehensive Guide

1. CSS Basics
Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in HTML or XML. CSS describes how elements
should be rendered on screen, on paper, in speech, or on other media.

Syntax
CSS has a simple syntax and uses a number of English keywords to specify the names
of various style properties.
A CSS rule consists of a selector and a declaration block:
css
selector {
property: value;
property: value;
}
- The selector points to the HTML element you want to style
- The declaration block contains one or more declarations separated by semicolons
- Each declaration includes a CSS property name and a value, separated by a colon
For example:
css
h1 {
color: blue;
font-size: 12px;
}

Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
Here are the main types of selectors:

1. Element Selector: Selects all elements with the specified element name.
css
p{
color: red;
 }

2. ID Selector: Uses the id attribute of an HTML element to select a specific element.

An ID is unique within a page.
css
#para1 {
color: red;
}

3. Class Selector: Selects elements with a specific class attribute.

css
.center {
text-align: center;
}

4. Universal Selector: Selects all HTML elements on the page.

css
{
margin: 0;
padding: 0;
}

5. Grouping Selector: Selects all the HTML elements with the same style definitions.
css
h1, h2, p {
text-align: center;
color: red;
}

6. Descendant Selector: Selects all elements that are descendants of a specified

element.
css
div p {
background-color: yellow;
 }

7. Child Selector: Selects all elements that are the direct children of a specified
element.
css
div > p {
background-color: yellow;
}

Properties
CSS properties are used to specify the styling of an element. There are numerous CSS
properties, but here are some of the most commonly used ones:
1. Color Properties:
- `color`: Sets the color of text
- `background-color`: Sets the background color of an element
2. Font Properties:
- `font-family`: Specifies the font for text
- `font-size`: Sets the size of the font
- `font-weight`: Sets how thick or thin characters in text should be displayed
3. Text Properties:
- `text-align`: Specifies the horizontal alignment of text
- `text-decoration`: Specifies the decoration added to text
4. Box Model Properties:
- `width`: Sets the width of an element
- `height`: Sets the height of an element
- `padding`: Sets the padding (space inside the element)
- `margin`: Sets the margin (space outside the element)
- `border`: Sets the border of an element
5. Display Properties:
- `display`: Specifies how an element should be displayed
- `position`: Specifies the type of positioning method used for an element
6. Flexbox Properties:
- `flex-direction`: Specifies the direction of the flexible items
 - `justify-content`: Aligns the flexible container's items when the items do not use all
available space on the main-axis
7. Grid Properties:
- `grid-template-columns`: Specifies the number (and the widths) of columns in a
grid layout
- `grid-template-rows`: Specifies the number (and the heights) of the rows in a grid
layout

These properties allow you to control virtually every aspect of an element's

appearance and layout on a web page.

2. Box Model, Padding, Margins, and Borders

Understanding the CSS box model is crucial for controlling layout and spacing in web
design.
The Box Model
The CSS box model is essentially a box that wraps around every HTML element. It
consists of:

- Content - The content of the box, where text and images appear
- Padding - Clears an area around the content (inside the box)
- Border - A border that goes around the padding and content
- Margin - Clears an area outside the border
Here's a visual representation:

Padding

Padding is the space between the content and the border. You can set padding for all
four sides of an element:
css
div {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}

Or use the shorthand `padding` property:

css
div {
padding: 20px 10px; / top/bottom 20px, left/right 10px /
}

Margins
Margins are the space outside the border. Like padding, you can set margins for all
four sides:
css
div {
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}

Or use the shorthand `margin` property:

css
div {
margin: 20px 10px; / top/bottom 20px, left/right 10px /
}

Borders
Borders go around the padding and content. The `border` property is a shorthand for:
- `border-width`
- `border-style` (required)
- `border-color`
css
div {
border: 2px solid black;
}
You can also set these individually:

css
div {
border-width: 2px;
border-style: solid;
border-color: black;
}

Or set different borders for different sides:

css
div {
border-top: 2px solid black;
border-right: 1px dashed red;
border-bottom: 2px solid black;
border-left: 1px dashed red;
}
Understanding and effectively using the box model allows for precise control over the
layout and spacing of elements on a web page.

3. Typography in CSS
Typography plays a crucial role in web design, affecting readability, accessibility, and
overall user experience. CSS provides a wide range of properties to control text
appearance.

Font Properties

1. font-family: Specifies the font for text.

 css
body {
font-family: Arial, sans-serif;
}
2. font-size: Sets the size of the font.
css
p{
font-size: 16px;
}
3. font-weight: Sets how thick or thin characters in text should be displayed.
css
h1 {
font-weight: bold;
}
4. font-style: Specifies the font style for text.
css
em {
font-style: italic;
}
5. font-variant: Specifies whether or not a text should be displayed in a small-caps
font.
css
p{
font-variant: small-caps;
}
6. line-height: Sets the height of a line of text.
css
p{
line-height: 1.6;
}

Text Properties
1. color: Sets the color of text.
css
 p{
color: #333333;
}
2. text-align: Specifies the horizontal alignment of text.
css
h1 {
text-align: center;
}
3. text-decoration: Specifies the decoration added to text.
css
a{
text-decoration: none;
}
4. text-transform: Controls the capitalization of text.
css
h2 {
text-transform: uppercase;
}
5. letter-spacing: Increases or decreases the space between characters in text.
css
h1 {
letter-spacing: 2px;
}
6. word-spacing: Increases or decreases the white space between words.
css
p{
word-spacing: 4px;
}
7. text-shadow: Adds shadow to text.
css
h1 {
text-shadow: 2px 2px 4px #000000;
}
Using these properties effectively can greatly enhance the readability and visual
appeal of your web pages. Remember to consider accessibility when choosing fonts
and colors, ensuring sufficient contrast and readability for all users.
4. CSS Layouts
CSS provides powerful tools for creating complex layouts. Two of the most popular
and powerful layout systems in CSS are Flexbox and Grid.

Flexbox
Flexbox, or the Flexible Box Layout, provides an efficient way to layout, align, and
distribute space among items in a container, even when their size is unknown or
dynamic.

Key concepts of Flexbox:

1. Flex Container: The parent element that has `display: flex` applied to it.
2. Flex Items: The direct children of the flex container.
3. Main Axis: The primary axis along which flex items are laid out.
4. Cross Axis: The axis perpendicular to the main axis.
Basic usage:
css
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Important Flexbox properties:
1. For the container:
- `flex-direction`: Sets the direction of the main axis.
- `justify-content`: Aligns items along the main axis.
- `align-items`: Aligns items along the cross axis.
- `flex-wrap`: Controls whether items wrap to new lines.
2. For the items:
- `flex-grow`: Determines how much an item will grow relative to other items.
- `flex-shrink`: Determines how much an item will shrink relative to other items.
- `flex-basis`: Sets the initial main size of an item.
 - `align-self`: Allows default alignment to be overridden for individual items.

Example:
css
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item {
flex: 1 1 auto;
}

Grid
CSS Grid Layout is a two-dimensional layout system that allows you to lay out
content in rows and columns.
Key concepts of Grid:
1. Grid Container: The element on which `display: grid` is applied.
2. Grid Items: The children of the grid container.
3. Grid Lines: The dividing lines that make up the structure of the grid.
4. Grid Tracks: The space between two adjacent grid lines (rows or columns).
5. Grid Cell: The space between four grid lines.
6. Grid Area: The total space surrounded by four grid lines.
Basic usage:
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
Important Grid properties:
1. For the container:
- `grid-template-columns`: Defines the columns of the grid.
 - `grid-template-rows`: Defines the rows of the grid.
- `grid-template-areas`: Defines grid template areas.
- `grid-gap`: Sets the gap between grid items.
2. For the items:
- `grid-column`: Specifies which column(s) the item will span.
- `grid-row`: Specifies which row(s) the item will span.
- `grid-area`: Specifies a grid item's size and location in a grid.

Example:
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1;
}
.item2 {
grid-column: 3;
grid-row: 1 / 3;
}
Both Flexbox and Grid are powerful tools for creating layouts. Flexbox is generally
better for one-dimensional layouts (either rows or columns), while Grid excels at two-
dimensional layouts (rows and columns together). Often, the best designs use a
combination of both.

5. Responsive Design
Responsive web design is an approach to web design that makes web pages render
well on a variety of devices and window or screen sizes. It's a crucial aspect of
modern web development.
Media Queries
Media queries are a key component of responsive design. They allow you to apply
CSS styles based on device characteristics, such as width, height, or orientation.
Basic syntax:
css
@media screen and (max-width: 600px) {
.class {
/ styles to apply when screen width is 600px or less /
}
}

Common breakpoints:
- Mobile: 320px - 480px
- Tablet: 481px - 768px
- Desktop: 769px and above

Example:
css
/ Base styles /
body {
font-size: 16px;
}

/ Tablet styles /
@media screen and (min-width: 481px) and (max-width: 768px) {
body {
font-size: 18px;
}
}

/ Desktop styles /
@media screen and (min-width: 769px) {
body {
font-size: 20px;
 }
}

Flexible Layouts
Flexible layouts use relative units like percentages, em, or rem instead of fixed units
like pixels. This allows elements to resize based on the viewport size.

Example:
css
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
}

.column {
width: 50%;
float: left;
}

@media screen and (max-width: 600px) {

.column {
width: 100%;
float: none;
}
}
This approach ensures that the layout adjusts smoothly across different screen sizes.

Responsive Images
Images play a crucial role in web design, and it's important to make them responsive
as well.
1. Using max-width:
css
img {
 max-width: 100%;
height: auto;
}

This ensures that images never exceed their container's width while maintaining
their aspect ratio.
2. Picture Element: HTML5 introduced the `<picture>` element, which allows you to
specify different images for different screen sizes:
html
<picture>
<source media="(min-width: 650px)" srcset="img_large.jpg">
<source media="(min-width: 465px)" srcset="img_medium.jpg">
<img src="img_small.jpg" alt="Image description" style="width:auto;">
</picture>
3. Background Images: For background images, you can use media queries to change
the image based on screen size:
css
.header {
background-image: url('small-image.jpg');
}
@media screen and (min-width: 768px) {
.header {
background-image: url('large-image.jpg');
}
}

Viewport Meta Tag

The viewport meta tag is crucial for responsive design on mobile devices. It should be
included in the `<head>` of your HTML:

html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This ensures that the browser renders the width of the page at the width of its own
screen.
Mobile-First Approach
A popular strategy in responsive design is the "mobile-first" approach. This means
designing for mobile devices first, then progressively enhancing the design for larger
screens.
Example:
css
/ Base styles for mobile /
.container {
width: 100%;
padding: 10px;
}

/ Tablet styles /
@media screen and (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/ Desktop styles /
@media screen and (min-width: 1024px) {
.container {
width: 960px;
}
}
This approach ensures that the most essential content and functionality are available to
all users, regardless of their device.