1164 lines
20 KiB
Markdown
1164 lines
20 KiB
Markdown
## RESTful APIs
|
|
|
|
---
|
|
marp: true
|
|
theme: gaia
|
|
class: invert
|
|
paginate: true
|
|
title: "Understanding RESTful APIs"
|
|
author: "Your Name"
|
|
date: "CS PhD Seminar"
|
|
style: |
|
|
section {
|
|
font-family: 'Arial, sans-serif';
|
|
color: #ddd;
|
|
}
|
|
h1, h2, h3 {
|
|
color: #4CAF50;
|
|
}
|
|
code {
|
|
background: #333;
|
|
color: #eee;
|
|
padding: 0.2em;
|
|
border-radius: 5px;
|
|
}
|
|
.columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
.columns div {
|
|
padding: 1rem;
|
|
}
|
|
---
|
|
|
|
# Understanding RESTful APIs
|
|
|
|
## CS PhD Seminar
|
|
|
|
---
|
|
|
|
# What is a RESTful API?
|
|
|
|
- **API (Application Programming Interface)**: A set of rules and protocols for building and interacting with software applications.
|
|
- **REST (Representational State Transfer)**: An architectural style for designing networked applications.
|
|
- **RESTful API**: An API that adheres to the principles of REST.
|
|
|
|
|
|
|
|
---
|
|
|
|
# Principles of REST
|
|
|
|
1. **Statelessness**
|
|
2. **Client-Server Architecture**
|
|
3. **Cacheability**
|
|
4. **Layered System**
|
|
5. **Uniform Interface**
|
|
|
|
|
|
|
|
---
|
|
|
|
# Statelessness
|
|
|
|
- Each request from a client to a server must contain all the information needed to understand and process the request.
|
|
- The server should not store any context about the client between requests.
|
|
|
|
---
|
|
|
|
# Client-Server Architecture
|
|
|
|
- The client and server operate independently.
|
|
- The client makes requests, and the server processes them and returns the appropriate responses.
|
|
|
|
|
|
|
|
---
|
|
|
|
# Cacheability
|
|
|
|
- Responses from the server should be explicitly labeled as cacheable or non-cacheable.
|
|
- This allows clients to cache responses and reduce the need to make additional requests.
|
|
|
|
---
|
|
|
|
# Layered System
|
|
|
|
- A client cannot ordinarily tell whether it is connected directly to the end server or an intermediary.
|
|
- This promotes scalability by allowing load balancing and shared caching.
|
|
|
|
---
|
|
|
|
# Uniform Interface
|
|
|
|
- Simplifies and decouples the architecture, which enables each part to evolve independently.
|
|
- Key constraints:
|
|
- Identification of resources (URI)
|
|
- Manipulation of resources through representations (HTTP methods)
|
|
- Self-descriptive messages
|
|
- Hypermedia as the engine of application state (HATEOAS)
|
|
|
|
---
|
|
|
|
# HTTP Methods in REST
|
|
|
|
<div class="columns">
|
|
<div>
|
|
|
|
### GET
|
|
|
|
- Retrieve data from a specified resource.
|
|
- Example: `GET /api/users`
|
|
|
|
</div>
|
|
<div>
|
|
|
|
### POST
|
|
|
|
- Submit data to be processed to a specified resource.
|
|
- Example: `POST /api/users`
|
|
|
|
</div>
|
|
<div>
|
|
|
|
### PUT
|
|
|
|
- Update a specified resource.
|
|
- Example: `PUT /api/users/1`
|
|
|
|
</div>
|
|
<div>
|
|
|
|
### DELETE
|
|
|
|
- Delete a specified resource.
|
|
- Example: `DELETE /api/users/1`
|
|
|
|
</div>
|
|
</div>
|
|
|
|
---
|
|
|
|
# RESTful API Example
|
|
|
|
```http
|
|
GET /api/books/1 HTTP/1.1
|
|
Host: example.com
|
|
```
|
|
|
|
**Response:**
|
|
```json
|
|
{
|
|
"id": 1,
|
|
"title": "RESTful APIs",
|
|
"author": "John Doe"
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Advantages of RESTful APIs
|
|
|
|
- **Scalability**: Stateless nature helps in scaling.
|
|
- **Flexibility**: Can handle different types of calls and return different data formats.
|
|
- **Independence**: Separation of client and server.
|
|
|
|
---
|
|
|
|
# Disadvantages of RESTful APIs
|
|
|
|
- **Overhead**: HTTP methods and headers add extra overhead.
|
|
- **Statelessness**: Requires every request to be self-contained.
|
|
- **Complexity**: Properly designing and documenting a RESTful API can be complex.
|
|
|
|
---
|
|
|
|
# Conclusion
|
|
|
|
- RESTful APIs are a powerful way to design web services that are scalable, flexible, and maintainable.
|
|
- Understanding the principles and constraints of REST is crucial for designing effective APIs.
|
|
|
|
|
|
|
|
# Thank you!
|
|
|
|
---
|
|
|
|
# Q&A
|
|
|
|
---
|
|
|
|
# References
|
|
|
|
- [Fielding, Roy T. "Architectural Styles and the Design of Network-based Software Architectures." Doctoral dissertation, University of California, Irvine, 2000.](https://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf)
|
|
- [REST API Tutorial](https://restfulapi.net/)
|
|
- [RESTful Web Services](https://restfulwebservices.net/)
|
|
|
|
|
|
### CSS Presentation on Basic CSS for CS PhD Students
|
|
|
|
---
|
|
marp: true
|
|
theme: gaia
|
|
class: invert
|
|
paginate: true
|
|
title: "Basic CSS Refresher"
|
|
author: "Your Name"
|
|
date: "CS PhD Seminar"
|
|
style: |
|
|
section {
|
|
font-family: 'Arial, sans-serif';
|
|
color: #ddd;
|
|
}
|
|
h1, h2, h3 {
|
|
color: #4CAF50;
|
|
}
|
|
code {
|
|
background: #333;
|
|
color: #eee;
|
|
padding: 0.2em;
|
|
border-radius: 5px;
|
|
}
|
|
.columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
---
|
|
|
|
# Basic CSS Refresher
|
|
|
|
## CS PhD Seminar
|
|
|
|
---
|
|
|
|
# What is CSS?
|
|
|
|
- **CSS (Cascading Style Sheets)**: A language used to describe the presentation of a document written in HTML or XML.
|
|
- **Purpose**: CSS handles the visual and aural layout, including colors, fonts, and spacing.
|
|
|
|
|
|
|
|
---
|
|
|
|
# CSS Syntax
|
|
|
|
- **Selector**: Specifies the HTML element(s) to be styled.
|
|
- **Declaration Block**: Contains one or more declarations separated by semicolons.
|
|
- **Declaration**: Consists of a property and a value, separated by a colon.
|
|
|
|
```css
|
|
selector {
|
|
property: value;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Selectors
|
|
|
|
- **Element Selector**: Selects all elements of a given type.
|
|
```css
|
|
p {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
- **Class Selector**: Selects elements with a specific class.
|
|
```css
|
|
.classname {
|
|
color: green;
|
|
}
|
|
```
|
|
|
|
- **ID Selector**: Selects an element with a specific ID.
|
|
```css
|
|
#idname {
|
|
color: red;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Colors and Backgrounds
|
|
|
|
- **Color Property**: Sets the text color.
|
|
```css
|
|
p {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
- **Background Color**:
|
|
```css
|
|
body {
|
|
background-color: #333;
|
|
}
|
|
```
|
|
|
|
- **Background Image**:
|
|
```css
|
|
body {
|
|
background-image: url('background.jpg');
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Fonts and Text
|
|
|
|
- **Font Family**:
|
|
```css
|
|
p {
|
|
font-family: 'Arial, sans-serif';
|
|
}
|
|
```
|
|
|
|
- **Font Size**:
|
|
```css
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
```
|
|
|
|
- **Text Alignment**:
|
|
```css
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Box Model
|
|
|
|
- **Content**: The innermost part where text and images appear.
|
|
- **Padding**: Clears an area around the content.
|
|
- **Border**: Goes around the padding.
|
|
- **Margin**: Clears an area outside the border.
|
|
|
|
```css
|
|
div {
|
|
padding: 20px;
|
|
border: 5px solid #ccc;
|
|
margin: 10px;
|
|
}
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
# Layout and Positioning
|
|
|
|
- **Display Property**: Specifies how an element is displayed.
|
|
```css
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
.block {
|
|
display: block;
|
|
}
|
|
```
|
|
|
|
- **Position Property**: Specifies the type of positioning method.
|
|
```css
|
|
.relative {
|
|
position: relative;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
.absolute {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Flexbox
|
|
|
|
- **Container**:
|
|
```css
|
|
.flex-container {
|
|
display: flex;
|
|
}
|
|
```
|
|
|
|
- **Items**:
|
|
```css
|
|
.flex-item {
|
|
flex: 1;
|
|
}
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
# Grid Layout
|
|
|
|
- **Container**:
|
|
```css
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
}
|
|
```
|
|
|
|
- **Items**:
|
|
```css
|
|
.grid-item {
|
|
padding: 20px;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Pseudo-classes and Pseudo-elements
|
|
|
|
- **Pseudo-class**: Applies to elements based on their state.
|
|
```css
|
|
a:hover {
|
|
color: red;
|
|
}
|
|
```
|
|
|
|
- **Pseudo-element**: Styles specific parts of an element.
|
|
```css
|
|
p::first-line {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Conclusion
|
|
|
|
- **CSS Basics**: Essential for designing and styling web pages
|
|
|
|
### Complete Marp Markdown Presentation on Basic CSS for CS PhD Students
|
|
|
|
|
|
---
|
|
marp: true
|
|
theme: gaia
|
|
class: invert
|
|
paginate: true
|
|
title: "Basic CSS Refresher"
|
|
author: "Your Name"
|
|
date: "CS PhD Seminar"
|
|
style: |
|
|
section {
|
|
font-family: 'Arial, sans-serif';
|
|
color: #ddd;
|
|
}
|
|
h1, h2, h3 {
|
|
color: #4CAF50;
|
|
}
|
|
code {
|
|
background: #333;
|
|
color: #eee;
|
|
padding: 0.2em;
|
|
border-radius: 5px;
|
|
}
|
|
.columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
---
|
|
|
|
# Basic CSS Refresher
|
|
|
|
## CS PhD Seminar
|
|
|
|
---
|
|
|
|
# What is CSS?
|
|
|
|
- **CSS (Cascading Style Sheets)**: A language used to describe the presentation of a document written in HTML or XML.
|
|
- **Purpose**: CSS handles the visual and aural layout, including colors, fonts, and spacing.
|
|
|
|
|
|
|
|
---
|
|
|
|
# CSS Syntax
|
|
|
|
- **Selector**: Specifies the HTML element(s) to be styled.
|
|
- **Declaration Block**: Contains one or more declarations separated by semicolons.
|
|
- **Declaration**: Consists of a property and a value, separated by a colon.
|
|
|
|
```css
|
|
selector {
|
|
property: value;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Selectors
|
|
|
|
- **Element Selector**: Selects all elements of a given type.
|
|
```css
|
|
p {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
- **Class Selector**: Selects elements with a specific class.
|
|
```css
|
|
.classname {
|
|
color: green;
|
|
}
|
|
```
|
|
|
|
- **ID Selector**: Selects an element with a specific ID.
|
|
```css
|
|
#idname {
|
|
color: red;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Colors and Backgrounds
|
|
|
|
- **Color Property**: Sets the text color.
|
|
```css
|
|
p {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
- **Background Color**:
|
|
```css
|
|
body {
|
|
background-color: #333;
|
|
}
|
|
```
|
|
|
|
- **Background Image**:
|
|
```css
|
|
body {
|
|
background-image: url('background.jpg');
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Fonts and Text
|
|
|
|
- **Font Family**:
|
|
```css
|
|
p {
|
|
font-family: 'Arial, sans-serif';
|
|
}
|
|
```
|
|
|
|
- **Font Size**:
|
|
```css
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
```
|
|
|
|
- **Text Alignment**:
|
|
```css
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Box Model
|
|
|
|
- **Content**: The innermost part where text and images appear.
|
|
- **Padding**: Clears an area around the content.
|
|
- **Border**: Goes around the padding.
|
|
- **Margin**: Clears an area outside the border.
|
|
|
|
```css
|
|
div {
|
|
padding: 20px;
|
|
border: 5px solid #ccc;
|
|
margin: 10px;
|
|
}
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
# Layout and Positioning
|
|
|
|
- **Display Property**: Specifies how an element is displayed.
|
|
```css
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
.block {
|
|
display: block;
|
|
}
|
|
```
|
|
|
|
- **Position Property**: Specifies the type of positioning method.
|
|
```css
|
|
.relative {
|
|
position: relative;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
.absolute {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Flexbox
|
|
|
|
- **Container**:
|
|
```css
|
|
.flex-container {
|
|
display: flex;
|
|
}
|
|
```
|
|
|
|
- **Items**:
|
|
```css
|
|
.flex-item {
|
|
flex: 1;
|
|
}
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
# Grid Layout
|
|
|
|
- **Container**:
|
|
```css
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
}
|
|
```
|
|
|
|
- **Items**:
|
|
```css
|
|
.grid-item {
|
|
padding: 20px;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Pseudo-classes and Pseudo-elements
|
|
|
|
- **Pseudo-class**: Applies to elements based on their state.
|
|
```css
|
|
a:hover {
|
|
color: red;
|
|
}
|
|
```
|
|
|
|
- **Pseudo-element**: Styles specific parts of an element.
|
|
```css
|
|
p::first-line {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Conclusion
|
|
|
|
- **CSS Basics**: Essential for designing and styling web pages.
|
|
- **Selectors**: Fundamental for targeting HTML elements.
|
|
- **Box Model**: Crucial for layout and design.
|
|
- **Advanced Layouts**: Flexbox and Grid offer powerful ways to create complex layouts.
|
|
|
|
|
|
|
|
# Thank you!
|
|
|
|
---
|
|
|
|
# Q&A
|
|
|
|
---
|
|
|
|
# References
|
|
|
|
- [MDN Web Docs on CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
|
|
- [W3Schools CSS Tutorial](https://www.w3schools.com/css/)
|
|
- [CSS Tricks](https://css-tricks.com/)
|
|
|
|
|
|
This presentation covers the fundamental aspects of CSS, using a dark theme and incorporating images, code snippets, and a two-column layout. This format should be engaging and informative for a group of CS PhD students.
|
|
|
|
---
|
|
|
|
# MARP Rresentations
|
|
|
|
---
|
|
marp: true
|
|
theme: gaia
|
|
class: invert
|
|
paginate: true
|
|
title: "Understanding RESTful APIs"
|
|
author: "Your Name"
|
|
date: "CS PhD Seminar"
|
|
style: |
|
|
section {
|
|
font-family: 'Arial, sans-serif';
|
|
color: #ddd;
|
|
}
|
|
h1, h2, h3 {
|
|
color: #4CAF50;
|
|
}
|
|
.columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
---
|
|
|
|
# Understanding RESTful APIs
|
|
|
|
## CS PhD Seminar
|
|
|
|
---
|
|
|
|
# What is a RESTful API?
|
|
|
|
- **API (Application Programming Interface)**: A set of rules and protocols for building and interacting with software applications.
|
|
- **REST (Representational State Transfer)**: An architectural style for designing networked applications.
|
|
- **RESTful API**: An API that adheres to the principles of REST.
|
|
|
|
|
|
|
|
---
|
|
|
|
# Principles of REST
|
|
|
|
1. **Statelessness**
|
|
2. **Client-Server Architecture**
|
|
3. **Cacheability**
|
|
4. **Layered System**
|
|
5. **Uniform Interface**
|
|
|
|
|
|
|
|
---
|
|
|
|
# Statelessness
|
|
|
|
- Each request from a client to a server must contain all the information needed to understand and process the request.
|
|
- The server should not store any context about the client between requests.
|
|
|
|
---
|
|
|
|
# Client-Server Architecture
|
|
|
|
- The client and server operate independently.
|
|
- The client makes requests, and the server processes them and returns the appropriate responses.
|
|
|
|
|
|
|
|
---
|
|
|
|
# Cacheability
|
|
|
|
- Responses from the server should be explicitly labeled as cacheable or non-cacheable.
|
|
- This allows clients to cache responses and reduce the need to make additional requests.
|
|
|
|
---
|
|
|
|
# Layered System
|
|
|
|
- A client cannot ordinarily tell whether it is connected directly to the end server or an intermediary.
|
|
- This promotes scalability by allowing load balancing and shared caching.
|
|
|
|
---
|
|
|
|
# Uniform Interface
|
|
|
|
- Simplifies and decouples the architecture, which enables each part to evolve independently.
|
|
- Key constraints:
|
|
- Identification of resources (URI)
|
|
- Manipulation of resources through representations (HTTP methods)
|
|
- Self-descriptive messages
|
|
- Hypermedia as the engine of application state (HATEOAS)
|
|
|
|
---
|
|
|
|
# HTTP Methods in REST
|
|
|
|
<div class="columns">
|
|
<div>
|
|
|
|
### GET
|
|
|
|
- Retrieve data from a specified resource.
|
|
- Example: `GET /api/users`
|
|
|
|
</div>
|
|
<div>
|
|
|
|
### POST
|
|
|
|
- Submit data to be processed to a specified resource.
|
|
- Example: `POST /api/users`
|
|
|
|
</div>
|
|
<div>
|
|
|
|
### PUT
|
|
|
|
- Update a specified resource.
|
|
- Example: `PUT /api/users/1`
|
|
|
|
</div>
|
|
<div>
|
|
|
|
### DELETE
|
|
|
|
- Delete a specified resource.
|
|
- Example: `DELETE /api/users/1`
|
|
|
|
</div>
|
|
</div>
|
|
|
|
---
|
|
|
|
# RESTful API Example
|
|
|
|
```json
|
|
GET /api/books/1 HTTP/1.1
|
|
Host: example.com
|
|
```
|
|
|
|
**Response:**
|
|
```json
|
|
{
|
|
"id": 1,
|
|
"title": "RESTful APIs",
|
|
"author": "John Doe"
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Advantages of RESTful APIs
|
|
|
|
- **Scalability**: Stateless nature helps in scaling.
|
|
- **Flexibility**: Can handle different types of calls and return different data formats.
|
|
- **Independence**: Separation of client and server.
|
|
|
|
---
|
|
|
|
# Disadvantages of RESTful APIs
|
|
|
|
- **Overhead**: HTTP methods and headers add extra overhead.
|
|
- **Statelessness**: Requires every request to be self-contained.
|
|
- **Complexity**: Properly designing and documenting a RESTful API can be complex.
|
|
|
|
---
|
|
|
|
# Conclusion
|
|
|
|
- RESTful APIs are a powerful way to design web services that are scalable, flexible, and maintainable.
|
|
- Understanding the principles and constraints of REST is crucial for designing effective APIs.
|
|
|
|
|
|
|
|
# Thank you!
|
|
|
|
---
|
|
|
|
# Q&A
|
|
|
|
---
|
|
|
|
# References
|
|
|
|
- [Fielding, Roy T. "Architectural Styles and the Design of Network-based Software Architectures." Doctoral dissertation, University of California, Irvine, 2000.](https://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf)
|
|
- [REST API Tutorial](https://restfulapi.net/)
|
|
- [RESTful Web Services](https://restfulwebservices.net/)
|
|
```
|
|
|
|
This presentation covers the fundamental aspects of RESTful APIs, using a dark theme and incorporating images, code snippets, and a two-column layout. This format should be engaging and informative for a group of CS PhD students.
|
|
|
|
---
|
|
|
|
---
|
|
marp: true
|
|
theme: gaia
|
|
class: invert
|
|
paginate: true
|
|
title: "Basic CSS Refresher"
|
|
author: "Your Name"
|
|
date: "CS PhD Seminar"
|
|
style: |
|
|
section {
|
|
font-family: 'Arial, sans-serif';
|
|
color: #ddd;
|
|
}
|
|
h1, h2, h3 {
|
|
color: #4CAF50;
|
|
}
|
|
code {
|
|
background: #333;
|
|
color: #eee;
|
|
padding: 0.2em;
|
|
border-radius: 5px;
|
|
}
|
|
.columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
---
|
|
|
|
# Basic CSS Refresher
|
|
|
|
## CS PhD Seminar
|
|
|
|
---
|
|
|
|
# What is CSS?
|
|
|
|
- **CSS (Cascading Style Sheets)**: A language used to describe the presentation of a document written in HTML or XML.
|
|
- **Purpose**: CSS handles the visual and aural layout, including colors, fonts, and spacing.
|
|
|
|
|
|
|
|
---
|
|
|
|
# CSS Syntax
|
|
|
|
- **Selector**: Specifies the HTML element(s) to be styled.
|
|
- **Declaration Block**: Contains one or more declarations separated by semicolons.
|
|
- **Declaration**: Consists of a property and a value, separated by a colon.
|
|
|
|
```css
|
|
selector {
|
|
property: value;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Selectors
|
|
|
|
- **Element Selector**: Selects all elements of a given type.
|
|
```css
|
|
p {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
- **Class Selector**: Selects elements with a specific class.
|
|
```css
|
|
.classname {
|
|
color: green;
|
|
}
|
|
```
|
|
|
|
- **ID Selector**: Selects an element with a specific ID.
|
|
```css
|
|
#idname {
|
|
color: red;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Colors and Backgrounds
|
|
|
|
- **Color Property**: Sets the text color.
|
|
```css
|
|
p {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
- **Background Color**:
|
|
```css
|
|
body {
|
|
background-color: #333;
|
|
}
|
|
```
|
|
|
|
- **Background Image**:
|
|
```css
|
|
body {
|
|
background-image: url('background.jpg');
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Fonts and Text
|
|
|
|
- **Font Family**:
|
|
```css
|
|
p {
|
|
font-family: 'Arial, sans-serif';
|
|
}
|
|
```
|
|
|
|
- **Font Size**:
|
|
```css
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
```
|
|
|
|
- **Text Alignment**:
|
|
```css
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Box Model
|
|
|
|
- **Content**: The innermost part where text and images appear.
|
|
- **Padding**: Clears an area around the content.
|
|
- **Border**: Goes around the padding.
|
|
- **Margin**: Clears an area outside the border.
|
|
|
|
```css
|
|
div {
|
|
padding: 20px;
|
|
border: 5px solid #ccc;
|
|
margin: 10px;
|
|
}
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
# Layout and Positioning
|
|
|
|
- **Display Property**: Specifies how an element is displayed.
|
|
```css
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
.block {
|
|
display: block;
|
|
}
|
|
```
|
|
|
|
- **Position Property**: Specifies the type of positioning method.
|
|
```css
|
|
.relative {
|
|
position: relative;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
.absolute {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Flexbox
|
|
|
|
- **Container**:
|
|
```css
|
|
.flex-container {
|
|
display: flex;
|
|
}
|
|
```
|
|
|
|
- **Items**:
|
|
```css
|
|
.flex-item {
|
|
flex: 1;
|
|
}
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
# Grid Layout
|
|
|
|
- **Container**:
|
|
```css
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
}
|
|
```
|
|
|
|
- **Items**:
|
|
```css
|
|
.grid-item {
|
|
padding: 20px;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Pseudo-classes and Pseudo-elements
|
|
|
|
- **Pseudo-class**: Applies to elements based on their state.
|
|
```css
|
|
a:hover {
|
|
color: red;
|
|
}
|
|
```
|
|
|
|
- **Pseudo-element**: Styles specific parts of an element.
|
|
```css
|
|
p::first-line {
|
|
color: blue;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# Conclusion
|
|
|
|
- **CSS Basics**: Essential for designing and styling web pages.
|
|
- **Selectors**: Fundamental for targeting HTML elements.
|
|
- **Box Model**: Crucial for layout and design.
|
|
- **Advanced Layouts**: Flexbox and Grid offer powerful ways to create complex layouts.
|
|
|
|
|
|
|
|
# Thank you!
|
|
|
|
---
|
|
|
|
# Q&A
|
|
|
|
---
|
|
|
|
# References
|
|
|
|
- [MDN Web Docs on CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
|
|
- [W3Schools CSS Tutorial](https://www.w3schools.com/css/)
|
|
- [CSS Tricks](https://css-tricks.com/)
|
|
```
|
|
|
|
This presentation covers the fundamental aspects of CSS, using a dark theme and incorporating images, code snippets, and a two-column layout. This format should be engaging and informative for a group of CS PhD students. |