Skip to content

Latest commit

 

History

History
682 lines (535 loc) · 9.84 KB

CSS.md

File metadata and controls

682 lines (535 loc) · 9.84 KB

CSS Tutorial

Table of Contents

  1. Introduction to CSS
  2. CSS Syntax
  3. Selectors
  4. Colors
  5. Backgrounds
  6. Borders
  7. Margins
  8. Padding
  9. Height and Width
  10. Box Model
  11. Text
  12. Fonts
  13. Icons
  14. Links
  15. Lists
  16. Tables
  17. Display
  18. Positioning
  19. Z-index
  20. Overflow
  21. Float and Clear
  22. Flexbox
  23. Grid
  24. Media Queries
  25. Transitions
  26. Animations
  27. Transforms
  28. Pseudo-classes
  29. Pseudo-elements
  30. Variables
  31. Functions
  32. Responsive Design
  33. Best Practices

Introduction to CSS

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.

CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value;
}

Example:

p {
  color: red;
}

Selectors

Selectors are used to target the HTML elements you want to style.

Types of Selectors

  • Universal Selector (*)
  • Element Selector (element)
  • ID Selector (#id)
  • Class Selector (.class)
  • Attribute Selector ([attribute])
  • Pseudo-class Selector (:pseudo-class)
  • Pseudo-element Selector (::pseudo-element)
  • Group Selector (selector1, selector2)

Colors

Colors can be defined using names, HEX values, RGB, RGBA, HSL, and HSLA.

Examples

color: red; /* Name */
color: #ff0000; /* HEX */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA */
color: hsl(0, 100%, 50%); /* HSL */
color: hsla(0, 100%, 50%, 0.5); /* HSLA */

Backgrounds

Properties

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-size
  • background

Example

body {
  background-color: lightblue;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

Borders

Properties

  • border
  • border-width
  • border-style
  • border-color
  • border-radius

Example

div {
  border: 2px solid black;
  border-radius: 10px;
}

Margins

Margins are used to create space around elements, outside of any defined borders.

Properties

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin

Example

div {
  margin: 20px;
}

Padding

Padding is used to create space around an element's content, inside of any defined borders.

Properties

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding

Example

div {
  padding: 20px;
}

Height and Width

Properties

  • height
  • width
  • max-height
  • max-width
  • min-height
  • min-width

Example

div {
  height: 100px;
  width: 100px;
}

Box Model

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

Components

  • content
  • padding
  • border
  • margin

Example

div {
  width: 300px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

Text

Properties

  • color
  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • letter-spacing
  • line-height
  • text-shadow
  • word-spacing

Example

p {
  color: blue;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.5;
}

Fonts

Properties

  • font-family
  • font-style
  • font-size
  • font-weight
  • font-variant
  • font

Example

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}

Icons

Icons can be added using various icon libraries like Font Awesome.

Example

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fas fa-camera"></i>

Links

Properties

  • a:link
  • a:visited
  • a:hover
  • a:active

Example

a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
}
a:active {
  color: orange;
}

Lists

Properties

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style

Example

ul {
  list-style-type: square;
  list-style-position: inside;
}

Tables

Properties

  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells
  • table-layout

Example

table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid black;
  padding: 8px;
}

Display

Values

  • none
  • block
  • inline
  • inline-block
  • flex
  • grid

Example

div {
  display: block;
}

Positioning

Types

  • static
  • relative
  • absolute
  • fixed
  • sticky

Example

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

Z-index

The z-index property specifies the stack order of an element.

Example

div {
  position: absolute;
  z-index: 1;
}

Overflow

Values

  • visible
  • hidden
  • scroll
  • auto

Example

div {
  overflow: scroll;
}

Float and Clear

Float Property

  • left
  • right
  • none

Clear Property

  • left
  • right
  • both
  • none

Example

div {
  float: left;
}
div.clear {
  clear: both;
}

Flexbox

Flexbox is a layout model that provides a more efficient way to lay out, align, and distribute space among items in a container.

Properties

  • display: flex;
  • flex-direction
  • justify-content
  • align-items
  • align-content
  • flex-wrap
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • order

Example

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Grid

CSS Grid Layout is a two-dimensional layout system for the web.

Properties

  • display: grid;
  • grid-template-columns
  • grid-template-rows
  • grid-gap
  • grid-column
  • grid-row
  • grid-area

Example

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

Media Queries

Media queries are used to apply different styles for different devices or screen sizes.

Example

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

 {
    background-color: lightblue;
  }
}

Transitions

CSS transitions allow you to change property values smoothly (over a given duration).

Properties

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • transition

Example

div {
  transition: width 2s;
}
div:hover {
  width: 200px;
}

Animations

CSS animations allow you to animate transitions from one CSS style configuration to another.

Properties

  • @keyframes
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation

Example

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  animation-name: example;
  animation-duration: 4s;
}

Transforms

CSS transforms allow you to rotate, scale, skew, or translate an element.

Properties

  • transform
  • transform-origin

Example

div {
  transform: rotate(45deg);
}

Pseudo-classes

Pseudo-classes are used to define the special state of an element.

Example

a:hover {
  color: red;
}

Pseudo-elements

Pseudo-elements are used to style specified parts of an element.

Example

p::first-line {
  color: blue;
}

Variables

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document.

Example

:root {
  --main-color: blue;
}

p {
  color: var(--main-color);
}

Functions

CSS has several built-in functions, such as calc(), var(), rgb(), hsl(), and others.

Example

div {
  width: calc(100% - 50px);
}

Responsive Design

Responsive design makes web pages render well on a variety of devices and window or screen sizes.

Techniques

  • Flexible Grid Layouts
  • Flexible Images
  • Media Queries

Example

img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Best Practices

Tips

  1. Keep it Simple: Use clear, maintainable, and reusable CSS.
  2. Use External Style Sheets: Keep CSS in separate files.
  3. Comment Your Code: Explain why specific styles are used.
  4. Organize Your CSS: Group related styles together.
  5. Use Shorthand Properties: Minimize the length of CSS rules.
  6. Avoid Inline Styles: Use classes and IDs instead.
  7. Optimize for Performance: Minimize the use of large images and redundant styles.
  8. Stay Updated: Keep up with new CSS features and best practices.

This tutorial provides a comprehensive overview of CSS, from basic concepts to advanced techniques. By mastering these topics, you'll be able to create visually appealing and responsive web pages.

Here is a link to a Youtube Tutorial which can help you learn the language in a better way <>

https://youtu.be/ESnrn1kAD4E?si=Z2gX5J0jf7CiBQbI