CSS -Krishnan

CSS (Cascading Style Sheets):

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document
written in HTML or XML, including colors, layout, and fonts. CSS describes how elements should be rendered on the
screen, on paper, in speech, or on other media.

History of CSS:

• CSS1 (1996): The first version, CSS1, was introduced to separate style from structure in web documents.

• CSS2 (1998): CSS2 brought new features and capabilities, including absolute, relative, and fixed positioning,
z-index, media types, and more.

• CSS2.1 (2011): An updated and refined version, CSS2.1, addressed inconsistencies and errors in the earlier
specifications.

• CSS3 (2001-present): Rather than a single monolithic specification, CSS3 is a collection of individual modules,
each adding new features. It includes modules like Flexbox, Grid, Transitions, Animations, and more.
1. Basic Concepts:
• Purpose of CSS: CSS, or Cascading Style Sheets, is a stylesheet language used to control the presentation and
layout of web documents written in HTML. It separates the structure (HTML) from the presentation (CSS) of a
web page.

• Syntax: CSS uses a syntax that consists of selectors and declaration blocks. A selector targets HTML elements,
and the declaration block contains the properties and their values.

• Cascading: CSS rules can cascade, meaning that styles from multiple sources can apply to an element, and a
specific set of rules determines the final styling. The order of specificity and source (e.g., user-defined, author,
browser default) plays a role in this.

2. Selectors and Specificity:

Selectors are used to target specific HTML elements for styling. Specificity is a measure of how specific a
selector is, and it determines which styles are applied when there are conflicts. Specificity is calculated based on the
type of selector and any combination of classes, IDs, and other selectors.
3. Styling Text:
1. Font Properties:

• font-family: [Font Family Name, Generic Font Family]

Example: element { font-family: "Arial", sans-serif; }

• font-size: [Size Value (e.g., px, em, %)]

Example: element { font-size: 16px; }

• font-weight: [normal, bold, bolder, lighter, 100 to 900]

Example: element { font-weight: bold; }

• font-style: [normal, italic, oblique]

Example: element { font-style: italic; }

• font-variant: [normal, small-caps]

Example: element { font-variant: small-caps; }

• line-height: [Number, %, normal]

Example: element { line-height: 1.5; }

2. Text Color and Background:

• color: [Color Value (e.g., name, hex, rgb)]

Example: element { color: #FF0000; }

• background-color: [Color Value]

Example: element { background-color: #FFFF00; }

3. Text Decoration:

• text-decoration: [none, underline, overline, line-through, underline overline line-through]

Example: element { text-decoration: underline; }

• text-decoration-color: [Color Value]

Example: element { text-decoration-color: #00FF00; }

• text-decoration-style: [solid, double, dotted, dashed, wavy]

Example: element { text-decoration-style: dashed; }

• text-decoration-line: [none, underline, overline, line-through]

Example: element { text-decoration-line: line-through; }

4. Text Alignment and Spacing:

• text-align: [left, right, center, justify]

Example: element { text-align: center; }

• text-indent: [Size Value]

Example: element { text-indent: 20px; }

 • letter-spacing: [Size Value]

Example: element { letter-spacing: 2px; }

• word-spacing: [Size Value]

Example: element { word-spacing: 5px; }

5. Text Transformation:

• text-transform: [none, capitalize, uppercase, lowercase]

Example: element { text-transform: uppercase; }

6. Text Shadow:

• text-shadow: [Offset X, Offset Y, Blur Radius, Color]

Example: element { text-shadow: 2px 2px 4px #000000; }

7. Text Overflow and Wrapping:

• overflow: [visible, hidden, scroll, auto]

Example: element { overflow: hidden; }

• white-space: [normal, nowrap, pre, pre-line, pre-wrap]

Example: element { white-space: nowrap; }

8. Text Direction:

• direction: [ltr, rtl]

Example: element { direction: rtl; }

9. Text Break:

• overflow-wrap: [normal, break-word]

Example: element { overflow-wrap: break-word; }

• word-wrap: [normal, break-word]

Example: element { word-wrap: break-word; }

4. Background Properties:
• background-color: [Color Value]

• Example: element { background-color: #FFFF00; }

• background-image: [Image URL, none]

• Example: element { background-image: url('image.jpg'); }

• background-repeat: [repeat, no-repeat, repeat-x, repeat-y, space, round]

• Example: element { background-repeat: no-repeat; }

• background-position: [Horizontal Position Vertical Position]

• Example: element { background-position: center top; }

 • background-size: [Auto, Cover, Contain, Size Value (e.g., px, %)]

• Example: element { background-size: cover; }

• background-attachment: [scroll, fixed, local]

• Example: element { background-attachment: fixed; }

5.Using Colors in CSS

1. Color Names:

• You can use predefined color names.

• Example: element { color: red; }

2. Hexadecimal Notation:

• You can use a hexadecimal representation of a color.

• Example: element { background-color: #00FF00; }

3. RGB Function:

• You can use the rgb() function to specify a color using red, green, and blue values.

• Example: element { border-color: rgb(255, 0, 0); }

4. RGBA Function:

• You can use the rgba() function to specify a color with an alpha (transparency) value.

• Example: element { background-color: rgba(0, 0, 255, 0.5); }

5. HSL Function:

• You can use the hsl() function to specify a color using hue, saturation, and lightness.

• Example: element { color: hsl(120, 100%, 50%); }

6. HSLA Function:

• You can use the hsla() function to specify a color with an alpha (transparency) value.

• Example: element {background-color: hsla(240, 100%, 50%, 0.7); }

6. Layout and Positioning

1.Position property
The position property in CSS is used to control the positioning of an element within its containing
element or the viewport. It works in conjunction with other properties like top, right, bottom, and left
to precisely place the element.

1. static:

• This is the default value. Elements with position: static; are positioned according to
the normal flow of the document. The top, right, bottom, and left properties have no
effect when position is set to static.

p {
position: static;
}

2. relative:

• The element is positioned relative to its normal position in the document flow, but it
can be moved using the top, right, bottom, and left properties. Other content will not
be adjusted to fit into any gap left by the element.

div {
position: relative;
top: 10px;
left: 20px;
}

3. absolute:

• The element is positioned relative to its nearest positioned ancestor (instead of

positioned relative to the viewport, like fixed).

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

4. fixed:

• The element is positioned relative to the viewport, meaning it always stays in the same
place even if the page is scrolled. It is not affected by the position of other elements.

div {

position: fixed;

top: 10px;

right: 10px;

5. sticky:

• The element is treated as relative positioned until it crosses a specified point, then it
is treated as fixed positioned.

• It is often used in navigation bars to create a "sticky" effect when scrolling.

div {

position: sticky;

top: 0;

Understanding and using these values of the position property is crucial for creating complex
layouts and achieving desired positioning effects on a webpage. The choice of which value to use
depends on the specific layout requirements and the desired behaviour of the element.
2.Display property
The display property in CSS is used to define how an HTML element should be displayed on
the page. It influences the layout and rendering of elements, determining whether an element
generates a block-level box, an inline-level box, or something else. The display property can take
various values, each serving a specific purpose:

1. block:

• The element generates a block-level box. It starts on a new line and takes up the full
width available. Examples of block-level elements include <div>, <p>, <h1> to <h6>,
and <form>.
div {
display: block;
}

2. inline:

• The element generates an inline-level box. It does not start on a new line and only
takes up as much width as necessary. Examples of inline-level elements include
<span>, <a>, <strong>, and <img>.

span {
display: inline;
}

3. inline-block:

• The element generates an inline-level box, but it behaves like a block-level box in terms
of layout.

• It does not start on a new line and allows other elements to sit next to it. It also
respects width and height properties. Useful for creating inline elements with block-
level styling.

span {
display: inline-block;
}
 4. flex:

• The element generates a block-level box and enables a flex container.

• It allows you to use the flexbox layout model, providing a powerful way to distribute
space and align items.

div {
display: flex;
}

5. grid:

• The element generates a block-level box and enables a grid container.

• It allows you to use the CSS Grid layout model, providing a two-dimensional grid for
arranging items.

div {
display: grid;
}

6. none:

• The element is not displayed at all.

• It is removed from the normal flow of the document, and it does not take up space.
div {
display: none;
}

These values provide flexibility in designing the layout of a webpage, allowing developers to
create complex structures and achieve desired visual effects. Choosing the right display value depends
on the desired layout and the behaviour you want for the specific element.
3.Float
The float property in CSS is used to specify whether
an element should be floated to the left or right of its
container, allowing content to flow around it. It was
commonly used for creating basic layouts before the
advent of more modern layout techniques like Flexbox
and CSS Grid. The float property can take the following
values:

1. none:

• The default value. The element does not float.

• It will be positioned according to the normal flow of the document.

img {
float: none;
}

2. left:

• The element is floated to the left of its container.

• Content following the floated element will flow around it on the right side.

img {
float: left;
}

3. right:

• The element is floated to the right of its container.

• Content following the floated element will flow around it on the left side.

img {
float: right;
}

4. inherit:

• The element inherits the float value from its parent element.

img {
float: inherit;
}

It's important to note that when an element is floated, it is taken out of the normal document flow,
which means that other elements may flow around it. This behaviour can lead to issues with clearing
and layout, especially when there are elements with different heights.
7. Box Model and Spacing:
The box model is a fundamental concept in CSS (Cascading Style
Sheets) that describes how elements are rendered on a web page in
terms of their dimensions and spacing. It consists of four main
components: content, padding, border, and margin. These components
work together to determine the overall size and layout of an element.

1. Content:

• The innermost part of the box is the content, which

contains the actual content of the element, such as text,
images, or other media.

• Its size is determined by the width and height properties in CSS.

2. Padding:

• Padding is the space between the content and the border. It provides inner spacing within the element.

• You can set the padding using the padding property in CSS, which can be a specific value (e.g., padding:
10px;) or individual properties for each side (e.g., padding-top, padding-right, padding-bottom,
padding-left).

3. Border:

• The border surrounds the padding, defining the outer edge of the element.

• You can set the border using the border property, which includes properties for the border width, style,
and color.

• Like padding, you can also set individual border properties for each side (e.g., border-top, border-
right, border-bottom, border-left).

4. Margin:

• Margin is the space outside the border, creating separation between the element and other elements
on the page.

• You can set the margin using the margin property, similar to padding. It can have specific values or
individual
properties for
each side (e.g.,
margin-top,
margin-right,
margin-
bottom,
margin-left).
9. Transitions and Animations:
1.Transition:
In CSS, a transition is a way to smoothly animate changes in CSS properties. It allows you to control the
timing and easing of the transition between the old and new values of a property. Transitions are commonly
used to create more visually appealing and interactive user interfaces.

The basic syntax for the transition property is as follows:

transition: property duration timing-function delay;

1. Transition Properties and Values:

Here are some common properties used with the transition property and their possible values:

• transition-property:

• Specifies the CSS properties to which a transition effect should be applied.

• Values: all, none, or a comma-separated list of specific property names.

• transition-duration:

• Specifies the duration of the transition effect.

• Values: Time in seconds (s) or milliseconds (ms).

• transition-timing-function:

• Specifies the timing function used for the transition effect.

• Values: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n), etc.

• transition-delay:

• Specifies a delay before the transition effect starts.

• Values: Time in seconds (s) or milliseconds (ms).

2. HTML Example:
2.Animations

1. CSS Animation:

CSS animation is a technique that allows elements to gradually change from one style to
another. It enables the creation of smooth and visually appealing transitions or movements on a
webpage without relying on JavaScript or other scripting languages.

2. Properties of Animation:

Here is a list of key properties related to CSS animations along with their possible values:

1. animation-name: Specifies the name of the @keyframes rule.

2. animation-duration: Specifies how long the animation takes to complete. Values can
be in seconds (s) or milliseconds (ms).
3. animation-timing-function: Defines the pace of the animation. Values include linear,
ease, ease-in, ease-out, and ease-in-out, among others.
4. animation-delay: Specifies a delay before the animation starts. Values can be in
seconds (s) or milliseconds (ms).
5. animation-iteration-count: Defines the number of times the animation should
repeat. It can be a number or infinite.
6. animation-direction: Sets whether the animation should play forward, backward, or
alternate back and forth. Values include normal, reverse, alternate, and alternate-
reverse.
7. animation-fill-mode: Specifies what values are applied by the animation outside the
time it is executing. Values include none, forwards, backwards, and both.
3. Using Keyframes with Examples:

i) Using from and to in Keyframes:

 ii) Using Percentages to Control Animation Duration:(using shorthand property)

iii)Animation Shorthand

The animation shorthand property in CSS allows you to specify multiple animation-related properties
in a single declaration. The general syntax for the animation shorthand property is as follows:

element {

animation: name duration timing-function delay iteration-count

direction fill-mode;

Here's a breakdown of each component:

1. name: Specifies the name of the @keyframes rule.

2. duration: Specifies how long the animation takes to complete. Values can be in seconds (s) or
milliseconds (ms).
3. timing-function: Defines the pace of the animation. Values include linear, ease, ease-in, ease-out, and
ease-in-out, among others.
4. delay: Specifies a delay before the animation starts. Values can be in seconds (s) or milliseconds (ms).
5. iteration-count: Defines the number of times the animation should repeat. It can be a number or
infinite.
6. direction: Sets whether the animation should play forward, backward, or alternate back and forth.
Values include normal, reverse, alternate, and alternate-reverse.
 7. fill-mode: Specifies what values are applied by the animation outside the time it is executing. Values
include none, forwards, backwards, and both.

Example animation shorthand property:

.element {

animation: slide-in 2s ease-in-out 1s infinite alternate;

In this example:

• slide-in is the name of the @keyframes rule.

• 2s is the duration of the animation (2 seconds).
• ease-in-out is the timing function.
• 1s is the delay before the animation starts (1 second).
• infinite specifies that the animation should repeat indefinitely.
• alternate sets the animation to alternate direction on each iteration.

A Practice program:
10.Flexbox in CSS
Flexbox, or the Flexible Box Layout, is a layout model in CSS that allows the design of complex and responsive
layouts with a more efficient and predictable way than traditional models. It is particularly well-suited for designing
dynamic and single-dimensional layouts.

1. Purpose of Flexbox:

• Flexbox is designed to provide an efficient way to layout, align, and distribute space among items in
a container, even when their size is unknown or dynamic.

• It helps to create a more responsive design, allowing for the construction of complex layouts with a
flexible and easily adaptable structure.

2. Properties and Possible Values with examples:

1. display
• Purpose:
• Defines a flex container.
• Possible Values:
• flex: Establishes a flex container, inline-flex: Establishes an inline flex container.
• Example
2. flex-direction
• Purpose:
• Defines the direction of the main axis.
• Possible Values:
• row, row-reverse, column, column-reverse.
• Example

3. flex-wrap
• Purpose:
• Defines whether the items should wrap or not.
• Possible Values:
• nowrap, wrap, wrap-reverse.
• Example:
4. justify-content
• Purpose:
• Defines how items are aligned along the main axis.
• Possible Values:
• flex-start, flex-end, center, space-between, space-around, space-evenly.
• Example:

5. align-items
• Purpose:
• Defines how items are aligned along the cross axis.
• Possible Values:
• flex-start, flex-end, center, baseline, stretch.
• Example:
Cheat Sheet:
11. Responsive Web Design (RWD):
1. Responsive Web Design

Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety
of devices and window or screen sizes. The goal of responsive design is to build web pages that detect the visitor's
screen size and orientation and change the layout accordingly. This ensures that the same website can provide an
optimal viewing experience across various devices, such as desktops, laptops, tablets, and smartphones.

2. Using RWD

• Fluid Grids: Use relative units like percentages instead of fixed units like pixels for layout components.
• Flexible Images: Ensure images are also sized in relative units, preventing them from overflowing their
containing elements.

• Media Queries:

A media query in CSS allows you to apply different styles to a document based on various conditions,
such as the characteristics of the device or the viewport size. The syntax for a media query is as follows:

@media media_type and (media_feature) {

/* CSS rules to apply when the media query conditions are met */

• @media: This is the at-rule that defines a media query. It signals to the browser that enclosed styles
should be applied only under specific conditions.
• media_type: Specifies the type of media for which the styles are intended. Common values include:
• all: Applies to all devices.
• screen: Applies to computer screens, tablets, and smartphones.
• print: Applies to printers and print preview.
• and: A logical operator used to combine multiple media features into a single media query. It
requires that all conditions be true for the styles to be applied.
• media_feature: Specifies the specific condition or feature that should be met for the styles to be
applied. Some examples of media features include:
• width: The width of the viewport.
• height: The height of the viewport.
• min-width and max-width: Minimum and maximum width of the viewport.
• orientation: The orientation of the device (landscape or portrait).