Css Tutorial

CSS Tutorials (Cascading Style Sheet) Presented By: Waseem Akhter

What is CSS? 
Cascading Style Sheet.
CSS is a styling language used to describe the presentation of HTML documents.
CSS is fundamental for creating responsive webpages.

History of CSS: CSS1 (1996) The first version of CSS, CSS1, was introduced in 1996. It introduced basic styling elements, including fonts, text, colors, and simple layout features (like margins, padding, and borders). Focused on making text look better and organizing page elements in a more structured way.

CSS2 (1998) CSS2 expanded styling capabilities, adding support for positioning, media types, and the concept of the “box model.” Brought improvements for layouts, including absolute, relative, and fixed positioning. CSS2.1 (a revision of CSS2) became the official specification, fixing issues and removing less useful features.

CSS3 (Late 1990s - Early 2000s) CSS3 was modularized into different "modules," making it easier to update and extend specific parts. Introduced a vast array of features, including: Media Queries: Core to responsive design, media queries allow styles to change based on screen size and device capabilities. Flexbox and Grid: New layout modules that make complex layouts and responsive design easier. Animations and Transitions: Added native support for animations without JavaScript. Transformations: Introduced 2D and 3D transforms, like scaling, rotating, and translating elements. Selectors Level 3: Expanded selectors with new options like nth-child, not, and attribute selectors.

CSS4 (Ongoing) CSS Variables (Custom Properties): Allow developers to define variables for reuse, making stylesheets more maintainable. CSS Grid Level 2: Adds new capabilities like subgrid, making it easier to create complex responsive layouts. Container Queries, further enhancing responsive design. New Selectors: Like
() and
(), which allow more complex and flexible styling. More Powerful Media Queries: With new media features (e.g., light/dark mode detection, user preference for reduced motion).

Basic Syntax of CSS
Selecter { 
    Property : Value; 
} 

Example 
h1 { 
    color : blue;
}

Types of CSS Inline CSS 
<h1 style="color: blue;"> Coding With Waseem </h1> 
Internal / Embedded CSS 
<head>
    <style>
        h1 { 
            color: blue; 
         }
    </style>
</head>

External CSS 
<link rel ="stylesheet" href ="style.css" > 

Create file with name style.css and add following code
h1 { 
    color: blue; 
}

Color Property Used to set the color of foreground 
color: red; 
color: green; 
color: blue; 
color: yellow;

Background Color Property Used to set the color of background 
background- color: red; 
background- color: green; 
background- color: blue; 
background- color: yellow;


Color System In CSS

RGB 
color: rgb( red , green , blue ); 
color: rgb(255, 0, 0); 
color: rgb(0, 255, 0); 
color: rgb(0, 0, 255); 
color: rgb(255, 255, 0); 
color: rgb(255, 0, 255); 
color: rgb(0, 255, 255); 
color: rgb(255, 255, 255); 
color: rgb(0, 0, 0);

RGB With Percentage
color: rgb(100%, 0%, 0%) ;
color: rgb(0%, 100%, 0%) ;
color: rgb(0%, 0%, 100%) ;
color: rgb(100%, 100%, 0%) ;
color: rgb(100%, 0%, 100%) ;
color: rgb(0%, 100%, 100%) ;
color: rgb(100%, 100%, 100%) ;
color: rgb(0%, 0%, 0%) ;

Color System With Alpha Channel
opacity(0 to 1)
RGBA
color: rgba(255, 0, 0, 0.5) ;
color: rgba(0, 255, 0, 0.4) ;
color: rgba(0, 0, 255, 1) ;
color: rgba(255, 255, 0, 0.3) ;
color: rgba(255, 0, 255, 0.6) ;
color: rgba(0, 255, 255, 0.8) ;
color: rgba(255, 255, 255, 0.5) ;
color: rgba(0, 0, 0, 0.75) ;

Color System With Hexadecimal (0-15)
decimal = 0-9
Hexadecimal = A  B  C  D  E  F 
             10 11 12 13 14 15

color: #FF0000;
color: #00FF00;
color: #0000FF;
color: #FFFF00;
color: #FF00FF;
color: #00FFFF;
color: #FFFFFF;
color: #000000;

Selectors In CSS
Universal Selector 
* { }
Element / Type / Tag Selector 
p { }

Class Selector 
.myClass { }

Id Selector 
#myId { }

Attribute Selector 
tagName[attribute] { }

Attribute Selector With Value 
tagName[attribute="value"] { }

Combinators Selectors In CSS

Descendant Selector 
parent-el descendant-el { }

Child Selector 
parent-el > descendant-el { }

Adjacent Sibling Selector 
parent-el + descendant-el { }

General Sibling Selector 
parent-el ~ descendant-el { }

Pseudo Class and Elements Selectors In CSS

Pseudo-classes Selector element:pseudo-class { }
Examples:
a:link
{ color: red; }
a:visited
{ color: green; }
a:hover
{ color: hotpink; }
a:active
{ color: blue; }

Pseudo-elements Selector element::pseudo-element { }
p::first-line { color: red; }

Exercise
Q1. Create a div with id "box".** **Add** **paragraph** **inside** **div.** **Set** **div** **background** **color** **to** **green.** **Set** **paragraph** **color** **to** **white.** **Q2.** **Create** **headings** **h1** **to** **h6** **and** **give** **class** "heading".**
Set color to blue.

Text Properties In CSS
text-align text-align: left | right | center | justify;
text-decoration text-decoration: none | underline | overline | line-through | underline overline line-through;
font-weight font-weight: normal | bold | bolder | lighter; font-weight: 100-900;
font-family font-family: arial; font-family: arial, roboto;

Generic Font Families In CSS
Families: serif, sans-serif, monospace, cursive, fantasy

Serif Fonts - Times New Roman, Georgia, Garamond, Baskerville, Palatino Linotype, Bookman Old Style.
Sans-serif Fonts - Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Calibri.
Monospace Fonts - Courier New, Lucida Console, Monaco, Consolas, DejaVu Sans Mono.
Cursive Fonts - Comic Sans MS, Brush Script MT, Lucida Handwriting, Zapf Chancery.
Fantasy Fonts - Impact, Papyrus, Algerian, Bauhaus 93.


Units In CSS
Absolute

pt - Points
in - Inches
mm - Millimeters
cm - Centimeters
px - Pixels (mostly used)
96px = 1 inch
font-size: 5px;
Text Properties In CSS
line-height line-height: 5;
line-height: 4px;
line-height: normal;

Text Properties In CSS
text-transform text-transform: none | capitalize | uppercase | lowercase;
letter-spacing letter-spacing: normal | 2px;

Exercise
Q1. Create a heading centered on the page with all of its text capitalized by default.
Q2. Set the font family of all the content in the document to "Times New Roman" and set letter-spacing to 4px.
Q3. Create one div inside another div. Set id & text "Outer Box" for the first one & "Inner Box" for the second one. Set the outer box div text size to 28px & inner box div text size to 12px.


Box Model In CSS
Margin
Border
Padding
Content

Height In CSS
By default, it sets the content area height of the element.
div { height: 100px; }
img { height: 50px; }

Width In CSS
By default, it sets the content area width of the element.
div { width: 100px; }
img { width: 50px; }

Border In CSS
Used to set an element’s border.
border-width: 1px;
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-color: black;

Border In CSS
Shorthand border: 1px solid green;
border-top
border-right
border-bottom
border-left

Border Radius In CSS
Used to round the corners of an element's outer border edge.
border-radius: 2px;
border-radius: 50%;

Padding In CSS
padding-left
padding-right
padding-top
padding-bottom

Padding In CSS
Shorthand padding: 25px;
For All top right bottom left
padding: 1px 2px 3px 4px;
top | right | bottom | left -> clockwise

Margin In CSS
margin-left
margin-right
margin-top
margin-bottom

Margin In CSS
Shorthand margin: 25px;
For All top right bottom left
margin: 1px 2px 3px 4px;
top | right | bottom | left -> clockwise

Overflow In CSS
The overflow property in CSS manages how content that exceeds an element’s boundaries is handled.
overflow: visible | hidden | scroll | auto;
overflow-x: visible | hidden | scroll | auto;
overflow-y: visible | hidden | scroll | auto;

visible: default;
hidden: Overflowing content is clipped and hidden; no scrollbars are displayed.
scroll: Adds vertical and horizontal scrollbars to the element.
auto: Adds scrollbars only if the content exceeds the element’s boundaries.

Exercise
Q1. Create a beautiful login form.
Q2. Create a navbar.


Display Property In CSS
display: inline | block | inline-block | none

inline - Takes only the space required by the element. (no margin/padding)
block - Takes full space available in width.
inline-block - Similar to inline but we can set margin & padding.
none - To remove element from document flow.
Visibility Property In CSS
visibility: hidden;

Note: When visibility is set to hidden, space for the element is reserved. But for display set to none, no space is reserved or blocked for the element.
Units In CSS
Relative

%
em
rem
vh
vw
Percentage (%) In CSS
It is often used to define a size as relative to an element's parent object.
width: 30%;
height: 40%;

Em
font-size: 5em;

Rem (Root Em)
font-size: 1rem;
1rem = 16px;

Vh
height: 100vh;
1vh = 1%;

Vw
width: 100vw;
1vw = 1%;

Position In CSS
The position CSS property sets how an element is positioned in a document.
position: static | relative | absolute | sticky | fixed;

Position In CSS

static - default position (The top, right, bottom, left, and z-index properties have no effect)
relative - element is relative to itself. (The top, right, bottom, left, and z-index will work)
absolute - positioned relative to its closest positioned ancestor. (removed from the flow)
fixed - positioned relative to browser. (removed from flow)
sticky - positioned based on user's scroll position
Z-index In CSS
It decides the stack level of elements.
Overlapping elements with a larger z-index cover those with a smaller one.
z-index: auto (0);
z-index: 1 / 2 / ...;
z-index: -1 / -2 / ...;

Background Image In CSS
Used to set an image as background.
background-image: url("image.jpeg");

Background Size In CSS
background-size: auto | cover | contain;
background-size: 100px 200px; / Sets width to 100px and height to 200px /
background-size: 50% 50%; / Sets width and height to 50% of the element /

Background Repeat In CSS
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round;

Variables In CSS
CSS variables, also known as custom properties, allow you to store values that can be reused throughout your CSS.
They are particularly useful for managing styles across a project, making it easier to maintain and update them.

:root {
  --variable-name: value;
  --primary-color: #2ecc71;
  --font-size: 16px;
}
h1 {
  color: var(--primary-color);
  font-size: var(--font-size);
}
Import other CSS files
@import url("path/to/colors.css");
In your main file (e.g., style.css):

/* style.css */
@import url("colors.css");
/* Rest of your CSS code */
body {
  font-family: Arial, sans-serif;
  color: var(--primary-color);
}
Exercise
Q1. Create the following layout using the given HTML.
Give the div a height, width & some background image.
Use the appropriate position property for the div element to place it at the right end of the page. (The div should not move even on scroll)
Use z-index to place the div on top of page.
Q2. Create colors.css file and assign primary-color variable and import this file in style.css and create one h1 and set color using primary-color.


Flexbox In CSS

Flexible Box Layout
Flexbox is one-dimensional, meaning it arranges items either in a row (horizontal) or a column (vertical), not both at once.
It is ideal for responsive designs.
display: flex;

The Flex Model

Flex Direction In CSS
It sets how flex items are placed in the flex container, along which axis and direction.
flex-direction: row; (default)
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

Flex Properties In CSS
For flex container:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
flex-wrap: nowrap | wrap | wrap-reverse;
align-items: stretch | flex-start | flex-end | center | baseline;
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
Flex Properties In CSS
For flex items (individual):

align-self: auto | flex-start | flex-end | center | baseline | stretch; (alignment of individual items along the cross axis)
flex-grow: 0 | 1 | Any positive number; (how much a flex item will grow relative to the rest if space is available)
flex-shrink: 0 | 1 | Any positive number; (how much a flex item will shrink relative to the rest if space is limited)
Exercise
Q1. Create a navbar with 4 options in the form of anchor tags inside list items.
Now, use flexbox to place them all spaced equally in a single line.
Q2. Use flexbox to center one div inside another div.
Q3. Which has higher priority - align-items or align-self?

Media Queries In CSS
Help create a responsive website.

@media (width: 600px) {
  div {
    background-color: red;
  }
}
Example using min-width:

@media (min-width: 600px) {
  div {
    background-color: red;
  }
}
Example with multiple conditions:

@media (min-width: 200px) and (min-width: 300px) {
  div {
    background-color: red;
  }
}
Example using max-width:

@media (max-width: 200px) {
  div {
    background-color: red;
  }
}
Exercise
Q. Add a media query to implement the following:

The color of a div changes to green for viewport width less than 300px.
The color of a div changes to pink for width between 300px & 400px.
The color of a div changes to red for width between 400px & 600px.
The color of a div changes to blue for width above 600px.
Transitions In CSS
A technique that allows you to change property values smoothly (over a specified duration) rather than abruptly, enabling you to define the transition between two states of an element.

transition-property: property you want to transition (font-size, width, etc.)
transition-duration: 2s | 4ms ...
transition-timing-function: ease-in | ease-out | linear | steps ...
transition-delay: 2s | 4ms ...

Transitions Shorthand
property name | duration | timing-function | delay

transition: font-size 2s ease-in-out 0.2s;
transition: width 3s steps 0.3s;

Transform In CSS
Used to apply 2D & 3D transformations to an element.
rotate
transform: rotate(45deg);

scale
transform: scale(2);
transform: scale(0.5);
transform: scale(1, 2);
transform: scaleX(0.5);
transform: scaleY(0.5);

translate
transform: translate(20px);
transform: translate(20px, 50px);
transform: translateX(20px);
transform: translateY(20px);
skew

transform: skew(20deg);
transform: skew(20deg, 10deg);
transform: skewX(20deg);
transform: skewY(20deg);
Animation In CSS
To animate CSS elements.

@keyframes myName {
  from { font-size: 20px; }
  to { font-size: 40px; }
}
Animation Properties In CSS

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
Animation Shorthand


animation: myName 2s linear 3s infinite normal;
% in Animation


@keyframes myName {
  0% { font-size: 20px; }
  50% { font-size: 30px; }
  100% { font-size: 40px; }
}

Exercise
Q. Create a simple loader using CSS:

Create a div with circular shape & a thick border from one end (top/bottom/left/right)
To make it spin, create an animation which transforms it from 0deg to 360deg
Add the animation property to the loader with infinite duration