CSS

What is CSS

 CSS stands for Cascading Style sheet

 This is a styling language

 It is used to control the appearance of web page

 It allows customization for web content with out changing the HTML structure
CSS Syntax

SELECTOR{
color: red;
background-color: blue;
}
 Types Of Styles

There are three types of styles

They are :-

1. Inline Styles :- Styles applied inside the element.

2. Internal Styles:- Styles applied in head tag using style tag

3. External Styles:- Styles applied using external file linked in head tag using <link>
 Rel Attribute

 Rel attribute is used for specifies the relation between present document and the external
document.

 Common rel attributes are

 Stylesheet :- Link an external CSS file.

 Icon :- link to the favicon for the web page.

 Alternate :- Links to the alternate version of the document like (RSM or Atom).

 Manifest :- Links a web app manifest file.

 Preload :- Indicate resource to load early to improve performance.

 Type Attribute

 Type attribute is used for specifies the MIME TYPE of the linked resource.
 It helps to the browser to understand what type file it is dealing with before fetching the resource.
 Common MIME TYPE for Type attribute
 Text based files :-
text/css text/html text/javascript
 Application based files :-
application/rss+xml application/json application/pdf
 image files :-
image/png image/jpeg text/svg+xml
 Audio/Video files :-
audio/mp3 video/mp4
 Stylesheet Versioning

 It is a technique to have browser’s load the latest stylesheet updates.

 Prevent ontdated styles caused by caching.

 Simplifies cache management for updated files.

 Common strategies:

 Query String Versioning:

<link rel=“stylesheet” href =“style.css?v=1.0.0”>

 File Name Versioning:

<link rel=“stylesheet” href =“style- v=1.0.0.css”>

 Box Model

 Box model is used for calculate the dimensions of the specific element.
 Every element in CSS is a rectangular box.
 box model have to key concepts:
 box-sizing : content box
 it is a default sizing in box model.

 width and height only apply to the content area.

 Border (50) + Padding (10) + Border (10) = 70

 box-sizing : border box
 it includes the border and padding in the elements width and height
calculations.
 Margin And Padding

 Margin:- Margin is a spacing border outside of an element, create distance between element and
surroundings.

 Padding:- padding is a spacing between the content of an element and the border of an element.

 Total width :-  Total height :-

Content Width Content Height
+ Left Padding + Top Padding
+ Left Border + Top Border
+ Right Padding + Bottom Padding
+ Right Border + Bottom Border
 Overflow Property

 Overflow property is used for the fit in the content dimensions using several keys.

 Key values:-

1. Visible (Default) :- Content visible outside the element boundaries.

2. Hidden :- it cuts the excess content and not visible.

3. Auto :- provide the scrollbars only the content is overflow the containers.

4. Scroll :- provide the scrollbars(horizontal and vertical) to the element.

 CSS Selectors

 It uses CSS to target specific HTML element.

 Common selectors are:-
1. ID selectors:- Target element with a specific ID attribute. (eg: #myid)
2. Class selectors:- Target elements with a specific class attribute. (eg: .mycls)
3. Attribute selectors:- target elements based on their attributes. ([type=“text”])
4. Global selectors:- Globally need to apply the styles. (eg: *)
5. Pseudo classes:- Target elements in the specific states (:hover; :focus; :first-child; :last-
child; :nth-child(2); :nth-child(2n); :nth-child(3n); :nth-child(3n+1); :nth-last-child(n);)
6. Type/Element selectors:- Target to the specific HTML Tags. (eg: p, div)
7. Pseudo Elements:- Target elements in a specific states. ( ::before ::after)
8. Combinators:- div p, div>p ( all p tags), div+p (immediately after div), div~p (all p outside div)
 CSS Properties

1. Layout:- Controls the size and positioning of an element using properties.

Example:- width, height, padding, margin etc,..

2. Typography:- styling the text using properties.

Example:- font-family, font-size, font-weight, font-style, etc,…

3. Background:- Apply the background colours and images

Example:- background-color, background-image

4. Border:- Control the appearance of border.

Example:- border, border-radius, border-collapse

 Font Properties Background Properties
font-family: cursive; background-color: red;
font-size: 50px; background-image:
font-weight: 600; url(w4.jpg);
background-size: cover;
font-style: italic;
font-stretch: expanded;

Text Properties Border Properties

color: blueviolet; border: 5px solid grey
text-align: center; border-radius: 50%;
text-transform: uppercase; position: relative;
text-decoration: underline;
letter-spacing: 10px;
text-shadow: 2px 2px 5px
#000;
 Positioning

 It helps to control the where elements appear on the web page.

 There are 5 types of positioning

They are:- Z-Index

1. Static Positioning  Z-Index is used for changes
the priorities of the positions.
2. Relative Positioning

3. Absolute Positioning

4. Fixed Positioning

5. Sticky Positioning
1. Static Positioning:- Elements appear in the normal flow of the document like writing text on paper.
position : static;
2. Relative Positioning:-
1. Elements are moved relative to their normal position.
2. It is based on the parent element position.
3. You can move the element by using top, left, right, bottom
position : relative;
3. Absolute Positioning:-
1. Elements are placed exactly specified co-ordinates.
2. It is based on the web page
3. You can move the element by using top, left, right, bottom
position : relative;
4. Fixed Positioning:- Elements are stay at the given position to the page even you scrolling.
position : fixed;
5. Sticky Positioning:- Elements are acts like relative until a scroll point, then they stick and behave like fixed.
position : stick;
 CSS Units

 CSS Units are fundamentals for defining measurements in your stylesheets.

 Each unit have different purposes and different use cases.

Units are divided into two types. They are :-

1. Absolute Units

2. Relative Units
 Absolute Units

 Absolute units are fixed and do not change based on their properties.

 Any of these will appear as exactly that size.

px (pixels) : They are fixed and do not change based on any other elements.

in (Inches) : Measures in inches.

cm (centimeters) : Measures in centimeters.

Mm (millimeters) : Measures in millimeters.

 Relative Units

 Relative Units are flexible and relative to other lengths or sizes.

 They are very useful for responsive design.

em : relative to parent element’s font size. 16px equals to 1em

rem (root em) : relative to root font size.

vw : relative to 1% of view port’s width.

vh : relative to 1% of view port’s height.

% (percentage) : relative to parent element’s.

Use px for fixed dimensions: such as setting borders, spaces or defining a layout that doesn't need

to scale.

Use % for layout responsiveness: It adjust relative to parent elements. This is particularly useful

for fluid layouts.

Use em and rem for typography and scaling: em is useful for text sizing. rem is ideal for global

size settings.

Use viewport units for viewport relative sizing: vw and vh are creating elements that adapt to the

size of the browser window

 Media Queries
 Media queries are a key component of responsive web design.
 It's allowing to apply different styles based on the screen size or other device characteristics.
 Common breakpoints are 320px, 480px, 768px, 992px, 1200px
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag is considered
mandatory in modern web development
 Need to mention media queries at the end of the stylesheet.
 Syntax:
@media media type and (media feature)
{/* CSS rules go here */}
Media Types Media Feature
all width, height,
print min-width, min-height, max-width, max-height,
screen orientation, resolution
 Layout Technologies

 We have several methods for laying out the elements in a structured and responsive manner.

They are :

1. Table Layout

2. Floating Layout

3. Flexbox Layout (Flexible Box Layout)

4. Grid Layout
1. Table Layout
 Think of this as arranging content in a grid of rows and columns (like a table in MS Word or Excel).

 Each cell of the table can hold text, images, or other elements.

 It ensures that everything aligns properly and looks organized.

 Example: You use a table layout to present a comparison or organize data neatly in a presentation.

2. Floating Layout
 This is a free-form layout, where you can place elements (text, images, shapes) anywhere on the slide
without being restricted by rows or columns.
 You can drag and drop content to any position.

 It allows for more creativity and flexibility.

 Example: Designing an infographic-like slide or placing an image and text freely side by side.
3. Flexbox Layout

 Flexible Box layout model allows for efficient alignment and distribution of space among items in a

container, even when their size is unknown or dynamic.

 Key Concepts:

1 . Flex Container: The parent element that contains the flex items. Flexbox properties are applied to

the container to control the layout of its children.

2. Flex Items: The child elements within the flex container. Their arrangement and distribution are

controlled by the properties of the flex container.

4. Grid Layout
 CSS Transitions
 CSS transition allows you to change property values smoothly (over a given duration) from one
state to another.
Key concepts:
 Properties to animate (width, height, background color)
 Duration
 Timing Function (linear, ease-in, ease-out, ease-in-out)
 Delay element{
transition-property:
background-color;
transition-duration:
2s;
transition-delay: 1s;
transition-timing-
function: linear;
}
element:hover{
background-color: blue;
 CSS Animations

Key Concepts
 @keyframes: Define the stages of animation.
 Animation Duration
 Timing Function
 Delay @keyframes example {
from {background-color: red;}
 Iteration Count
to {background-color: blue;}
 Direction }
div{
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
animation-direction: alternate;
width: 100px; height: 100px;
}
 CSS Variables
Key Concepts
 CSS Variables, also known as CSS Custom Properties.
 CSS Variables are defined using the – prefix.
 Declared variables global accessible across the entire stylesheet.
:root{
--primary-color: blue;
--secondary-color: red;
}
.btnLogin {
background-color: var(--primary-
color);
color: red;
}
.btnCancel {
background-color: var(--
secondary-color);
color: yellow;