CSS INTRODUCTION

What is CSS?

CSS stands for Cascading Style Sheets. CSS is the standard language for
defining styles on web pages.

Styles are set using CSS Properties. For example, you can set font properties
(size, colors, style etc), background images, border styles, and much more.

HTML vs CSS

It's not really "HTML vs CSS". In fact HTML and CSS are the best of friends! CSS is
a supplementary extension to HTML. Here's what each does:

HTML

The purpose of HTML is to provide document structure and meaning. You use
HTML to specify what elements go on the page (eg, headings, paragraphs,
tables, images, etc). Each of these elements (as well as their attributes and
attribute values) has a certain meaning.

CSS

We use CSS to specify how those HTML elements look. But not just how
they look, how they are presented. So, you can write an HTML document
without being concerned with its presentation, and then use CSS to specify
how it will be presented within any given context.

Why learn CSS?

Styling is an essential property for any website. It increases the standards and
overall look of the website that makes it easier for the user to interact with it
CSS Code Format: It is the basic structure of the CSS style of a webpage.
body {

background-color: lightgray;

h1 {

color: green;

text-align: center;

p {

font-family: sans-serif;

font-size: 16px;

Types of CSS: There are three types of CSS which are given below.
Inline: Inline CSS contains the CSS property in the body section attached with the

element known as inline CSS.

Internal or Embedded: The CSS ruleset should be within the HTML file in the head

section i.e the CSS is embedded within the HTML file.

External: External CSS contains a separate CSS file that contains only style property

with the help of tag attributes.

CSS Key Features:

CSS specifies how HTML elements should be displayed on screens.

The Major key feature of CSS includes styling rules which are interpreted by the client

browser and applied to various elements.

Using CSS, you can control the color text, the style of fonts, spacing between elements,

how columns are sized, variation in display for different devices and screen size as well

as a variety of other effects.

Characteristics of CSS:

Maintenance: It is easy to maintain, changing in a single place will affect globally in

your web site. No need to change every specific place.

Time-saving: You can easily use any single CSS script at multiple places.

Support: CSS is supported by all the browsers and search engines.

Cache storing: CSS can store web applications locally with the help of offline cache so

you can see the web site when you are offline.

Native front-end: CSS contains a huge list of attributes and function that is helpful to

design the HTML page.

Selectors: In CSS, there are lots of selectors (ID selectors, Class Selectors, etc.) that will

be helpful to perform specific tasks.

Advantages of CSS:

CSS is compatible with all the devices.

With the help of CSS, website maintenance is easy and faster.

CSS support consistent and spontaneous changes.

CSS make the website faster and enhances search engine capabilities to crawl the

web pages

It holds a special feature that is the ability to re-position.

Disadvantages of CSS:

In CSS, there is a cross browsers issue if you design anything and check on chrome it

looks perfect but that does not mean it will look the same in the other browsers. Then

you have to add the script for that browser also.

There is a lack of security in CSS.

CSS is vulnerable, it is exposed to possibly being attacked.

CSS has a fragmentation issue.

CSS SYNTAX – 10-5-2023

The CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and
a value.

Syntax

selector { property: value }

h1 { color: blue }

This code tells the browser to render all occurrences of the HTML <h1> element in blue.

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma.

h1, h2, h3, h4, h5, h6 {color:blue}

Applying Multiple Properties

To apply more than one property separates each declaration with a semi-colon.
h1 { color:blue; font-family: arial, helvetica, "sans serif" }

Readability

You can make your CSS code more readable by spreading your style declarations across
multiple lines. You can also indent your code if you like. This doesn't affect how your code is
rendered - it just makes it easier for you to read.

h1 {
color: blue;
font-family: arial, helvetica, "sans serif";
font-size: 150%;
}

CSS Properties

Class: CSS classes give you extra flexibility for specifying which elements are to receive a
particular style.

CSS Class Syntax

You declare a CSS class by using a dot (.) followed by the class name. You make up the class
name yourself. After the class name you simply enter the properties/values that you want to
assign to your class.

.class-name{ property: value; }

 11-05-2023

CSS ID Syntax
The syntax for declaring a CSS ID is the same as for classes, except that instead of using a
dot, you use a hash (#).

#id-name{ property: value; }

Again, similar to classes, if you want to use the same id name for multiple elements, but each
with a different style, you can prefix the hash with the HTML element name.

p#intro { font-size: 2em; }

IDs vs Classes

Given classes and IDs are very similar, you may be wondering which one to use. This depends
on the situation.

Example: live

When to use classes

You should use classes when your style needs to be applied multiple times on
the same page. For example, you might have many <h1> elements that need
the same style applied.

When to use IDs

You should use IDs if only one element on the page should have the style
applied, and/or you need a unique identifier for that element.
Another useful thing about IDs is that you can use the Document Object
Model (DOM) to refer to them. This enables you to use JavaScript/DHTML
techniques to build a much more interactive web site

CSS Font Properties

Font-Family

CSS font properties enable you to change the look of your text. For example,
you can assign a font family, apply bold or italic formatting, change the size
and more.

Example:

The font-family property accepts a list of different font families. This is

because, not all users will have the same fonts installed on their computer.
Therefore, as a designer/developer, you can provide a list of fonts, starting
with your first choice, and ending with your last choice.

So, if the user doesn't have your first choice font, the second choice will be
used for that user. If they don't have the second choice, the third choice will be
used, and so on.

It's good practice to make your last choice a generic font family such
as serif or sans-serif
Font Size

The CSS font-size property is used for specifying the size of a font.
You can specify the font size as an absolute size, relative size, length, or
percentage. See below.
Also see the font-size-adjust property to ensure that any fallback fonts are
rendered at an appropriate size.

Syntax

font-size: <absolute-size> | <relative-size> | <length> |

<percentage>

Absolute-size: It is used to set the text to a definite size. Using absolute-

size, it is not possible to change the size of the text in all browsers. It is
advantageous when we know the physical size of the output.

❖ xx-small
❖ x-small
❖ small
❖ medium
❖ large
❖ x-large

font-size: medium|large|x-large|xx-large|xx-small|x-small|small

Relative-size: It is used to set the size of the text relative to its neighboring
elements. With relative-size, it is possible to change the size of the text in
browsers

❖ larger
❖ smaller
Font-size with pixels: When we set the size of text with pixels, then it
provides us the full control over the size of the text.

Font-size with em: It is used to resize the text. Most of the developers
prefer em instead of pixels. It is recommended by the World Wide Web
consortium (W3C). As stated above, the default text size in browsers is 16px.
So, we can say that the default size of 1em is 16px.

The formula for calculating the size from pixels to em is em = pixels/16.

Example: font-size-px-em

Length: Specifies an absolute font size using a valid length value (for
example, 18px, 1.5em, 14pt, etc). This value is independent of the user agent's
font table. Negative lengths are illegal.

Percentage: Using a percentage value specifies an absolute font size

relative to the parent element's font size

NOTE: If we do not define a font-size, then for the normal text such as
paragraphs, the default size is 16px, which is equal to 1em

CSS Text Properties

Text Color: The color property is used to set the color of the text. The color is
specified by

• a color name - like "red"

• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
Text Alignment: The text-align property is used to set the horizontal
alignment of a text.

A text can be left or right aligned, centered, or justified.

Example: Click Here

Text Align Last: The text-align-last property specifies how to align the last
line of a text.

Example: Click Here

Text Indent: The text-indent property specifies the indentation of the first
line in a text-block.

Letter Spacing: The CSS letter-spacing property determines the space in

between letters.

CSS Word Spacing: The way word-spacing works is that it

specifies additional space between each word. So a value of zero for example,
has no effect (normal spacing applies). Positive values increase the spacing
and negative values reduce the spacing.

Example for above 3 items

Text Decoration: The text-decoration property specifies the decoration

added to text.

Syntax : text-decoration: <text-decoration-line> || <text-decoration-style> ||

<text-decoration-color>

text-decoration-line: none / underline / Overline / line-through / underline overline; /

underline overline ;line-through;
text-decoration-color: red / #0000ff / rgb(0,255,0) / rgba(0, 255, 0, 0.5) / hsl(0, 100%,
50%) / hsla(0, 100%, 50%, 0.1);

text-decoration-style: solid/ double/ dotted/ dashed/ wavy/

Example

Text Transform

The CSS text-transform property is used to control capitalization of text. For

example, you can force text to be uppercase, lowercase, or title case
(capitalized).

Syntax

text-transform: none | capitalize | uppercase | lowercase | full-width

None: No effects are applied to the text.

Capitalize : First character of each word is rendered in uppercase. The

remaining characters are rendered as they are.

Uppercase: All characters are rendered in uppercase.

Lowercase: All characters are rendered in lowercase.

full-width: Puts all characters in fullwidth form. If the character does not have

a corresponding fullwidth form, it is left as is. This value is typically used to

typeset Latin characters and digits like ideographic characters.

 4. Height and Width Properties

The CSS height and width properties are used to set the height and width of an
element. The height and width properties do not include padding, borders, or
margins. It sets the height and width of the area inside the padding, border, and
margin of the element.

CSS Height and Width Properties Values

The CSS Height and Width properties may have the following values:
1. auto – This is the default value. The browser calculates the height and
width
2. length – Defines the height/width in px, cm etc.
3. % – Defines the height/width in percent of the containing block
4. initial – Sets the height/width to its default value
5. inherit – The height/width will be inherited from its parent value

CSS Height and Width Properties Examples

We can set the height and width of any element basically in two-unit
percentages and pixels.

Example: click here

Set max-width and min-heigth of an element

max-width: It is used to set the maximum width of the box. It’s effect can be
seen by resizing the browsers.

Example: Click Here

17-05-2023

4. Background

Background Color: The CSS background-color property is for setting the

background color of an element.
Syntax
background-color: <color>

The <color> data type allows for many different ways of specifying a color. For
example, you can use the hex value, rgba() functional notation, a named color, a
keyword such as transparent, or any of the other choices available.
Example: Clickhere

Background Image: To add a background image to an element, use

the background-image property.

Example: Click Here

Background Repeat: The background-repeat property is used to define how

the background image should be repeated. By its default value the background-
repeat is repeated both horizontally and vertically. If the "repeat-x" value is set,
the image will be repeated only horizontally. If the "repeat-y" value is set, the
image will be repeated only vertically. There are two other values: "space" and
"round". "Space" makes the image be repeated without clipping and "round"
makes the image be repeated without gaps.

Example: Click Here

Syntax

background-repeat: repeat | repeat-x | repeat-y | no-repeat |

space | round | initial | inherit;

Background Position: The CSS background-position property specifies the

starting position of a background-image.

If the default value is set, a background-position will be placed at the top-left

corner of an element. And if you set the background to be repeated, it will be
repeated both vertically and horizontally.

Example: Click Here

Background Attachment: The background-attachment property defines if
the background-image is fixed or it will scroll along with the rest of the page.

Syntax

background-attachment: scroll | fixed | local

Scroll: The "scroll" value is set, the background-image will scroll with the page.
This is the default value.

Fixed: The "fixed" value is applied, the background-image will remain fixed to the
viewport. Even if an element has a scrolling mechanism, the background doesn't
move with the page.

Local: The local value is set; the background-image will scroll with the element's
contents.

Example: ClickHere

background-Size: The background-size CSS property is used to set the size

of a background image of an element. The background image can be stretched
or constrained to fit into the existing space. It allows us to control the scaling of
the background image.

Syntax

Background-size: auto | length | cover | contain | initial | inherit;

Auto: This is the default value, which displays the background image in its
original size.

Length: It is used to set the width and height of the background image. This
value stretches the image in the corresponding dimension of the given
length. Its single value specifies the width of the image, and the height sets to
auto. If two values are given, the first value sets the width, and the second
value sets the height. It does not allow negative values

Percentage: This value defines the width and height of the background image
to the percentage (%) of the background positioning area. Negative values
are not allowed.

Cover: This value is used to resize the background image to cover the entire
container. Sometimes, it crops the little bit off one of the edges or stretches
the image. It resizes the image to ensure the element is completely covered.

Contain: Without stretching or cropping, it resizes the background image to

ensure the image is completely visible.

Initial: It sets the property to its default value.

Inherit: It inherits the property from its parent element.

Example : Click Here

[Link] PROPERTIES – 19/5/2023

CSS allows you to set styles for the border of any HTML element. It also
provides you with a way of setting border styles for one or more sides of an
element.

Borders on all Sides: To set border styles for all sides of an element, you
use the border-width, border-style, and border-color properties.

Example: Click Here

border-width, border-style, and border-color

The border Property

The border property is shorthand for setting border-width, border-style, and border-
color.

Example: Click Here

Border Styles: Borders can have the following styles.

Boarder-style: solid | dotted | dashed | double | groove |

ridge | inset | outset | hidden

Example: Click Here

Borders for Each Side: Exercise below Examples

border-bottom-color

border-bottom-style
border-bottom-width
border-left-color
border-left-style
border-left-width
border-right-color
border-right-style
border-right-width
border-top-color
border-top-style
border-top-width

Example : Click Here

Each Side Boarder Shorthand: The following properties provide you with
a more concise way of specifying border properties for each side.

border-bottom
border-left
border-right
border-top
Example: Click Here

Border Radius: You can give your borders rounded corners by using
the border-radius property.

Example: Click Here

6. Margin Properties - 20/5/2023

Margins define the space around the element. CSS margins are specified in a
similar way to borders - they can be set individually for each side, or all sides
at once.

Example: Click Here

Setting Margins for Each Side

If you don't want the margin settings to be applied to all four sides, or if you
want each side to have different margins applied, you can use the following
properties

❖ margin-top
❖ margin-right
❖ margin-bottom
❖ margin-left

Example: Click Here

Shorthand Margins Property

This method uses a shorthand property for setting margin-top, margin-

right, margin-bottom, and margin-left in the one place.

Example: click here

Variations
You don't need to provide different values for all four sides. You can provide
one, two, three, or four values.

If there is only one value, it applies to all sides. If there are two values, the top
and bottom margins are set to the first value and the right and left margins
are set to the second. If there are three values, the top is set to the first value,
the left and right are set to the second, and the bottom is set to the third. If
there are four values, they apply to the top, right, bottom, and left,
respectively.

margin:10px;

• All four sides have a margin of 10 pixels.

margin:10px 20px;

• Top and bottom have a margin of 10 pixels.

• Right and left have a margin of 20 pixels.

margin:10px 20px 30px;

• Top is 10px
• Left and right are 20px
• Bottom is 30px

margin:10px 20px 30px 40px;

• Top is 10px
• Right is 20px
• Bottom is 30px
• Left is 40px
 7. Padding Properties

Padding defines the space between the element's border and its content. CSS
padding is specified just like margins — it can be set individually for each side,
or all sides at once.

Padding on all Sides

This example uses the padding shorthand property to set the same padding on
all sides of an element.

Example: Click here

Setting Padding for Each Side

If you don't want the same padding settings to be applied to all four sides, or
if you want each side to have different padding, you can use the following
properties:

❖ padding-top
❖ padding-right
❖ padding-bottom
❖ padding-left

Shorthand Property

The padding property is shorthand for padding-top, padding-

right, padding-bottom, and padding-left.

Example: Click Here

Variations

Again, as with margin, you don't need to provide different values for all four
sides. You can provide one, two, three, or four values.

If there is only one value, it applies to all sides. If there are two values, the top
and bottom paddings are set to the first value and the right and left paddings
are set to the second. If there are three values, the top is set to the first value,
the left and right are set to the second, and the bottom is set to the third. If
there are four values, they apply to the top, right, bottom, and left,
respectively.

padding:10px;

• All four sides have padding of 10 pixels.

padding:10px 20px;

• Top and bottom have padding of 10 pixels.

• Right and left have padding of 20 pixels.

padding:10px 20px 30px;

• Top is 10px
• Left and right are 20px
• Bottom is 30px

padding:10px 20px 30px 40px;

• Top is 10px
 • Right is 20px
• Bottom is 30px
• Left is 40px

Auto-increment allows a unique number to be generated automatically when

a new record is inserted into a table. Often this is the primary key field that we
would like to be created automatically every time a new record is inserted.

8. CSS Lists

HTML lists can have a number of different styles applied using CSS. Here are
some of the commonly used ones.

List Style Type: The list-style-type property specifies the type of list item
marker.

Example: Click Here

list-style-image: The CSS list-style-image property is used to specify an

image to be used as a list marker's default contents.

The list-style-image property allows you to create your own custom bullets to
use in lists.

Example: Click Here

List Style Position: The CSS list-style-position property is used for

controlling the position of list items.

Syntax

list-style-position: inside | outside

Inside: Specifies that the ::marker pseudo-element is an inline element placed

immediately before where the ::before pseudo-element would be placed in
the list item.
Outside: Same as with inside, plus the position property on the marker
computes to marker.

Example: Click here

List - Shorthand property: The list-style property is a shorthand property.

It is used to set all the list properties in one declaration

Example: Click here

9. CSS Positioning

Use CSS positioning to specify how an element is positioned and where it

should be located on the page. For example, you can specify whether you
want the element positioned relative to its natural position in the page, in an
absolute position (taken out of the normal flow), in a fixed position, etc.

Relative Positioning: To perform relative positioning in CSS you

use position:relative; followed by the desired offset from
either top, right, bottom or left.

Example

Absolute Positioning: To perform absolute positioning in CSS you again

use the position property. Only, this time you use
use position:absolute; followed by the desired offset.

Example

Fixed Positioning: Fixed positioning allows you to fix the position of an

element to a particular spot on the page - regardless of scrolling
 10. CSS Float = 22-05-2023

The CSS float property is a positioning property. It is used to push an element to

the left or right, allowing other element to wrap around it. It is generally used with
images and layouts.

Elements are floated only horizontally. So it is possible only to float elements left
or right, not up or down

The float property can have one of the following values:

• left - The element floats to the left of its container

• right - The element floats to the right of its container
• none - The element does not float (will be displayed just where it occurs in
the text). This is default
• inherit - The element inherits the float value of its parent

Example: Click here

11. clearfix Hack

If an element is taller than the element containing it, and it is floated, it will
overflow outside of its container.

Then we can add overflow: auto; to the containing element to fix this
problem:

12. Layers
CSS gives you opportunity to create layers of various divisions. The CSS layers
refer to applying the z-index property to elements that overlap with each
other.

The z-index property is used along with the position property to create an
effect of layers. You can specify which element should come on top and
which element should come at bottom.

A z-index property can help you to create more complex webpage layouts

Example : Click Here

Layers with Opacity: You can use the opacity property to provide some
transparency between the layers.

Example: Click here

13. FLEXBOX

Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily
create layouts for complex applications and web pages. Flexbox layout gives
complete control over the direction, alignment, order, size of the boxes.

Cascading Style Sheets (CSS) is a simple design language intended to simplify the
process of making web pages presentable. CSS handles the look and feel part of a
web page.

Using CSS, you can control the color of the text, the style of fonts, the spacing
between paragraphs, how columns are sized and laid out, what background images
or colors are used, layout designs, variations in display for different devices and
screen sizes as well as a variety of other effects.

To determine the position and dimensions of the boxes, in CSS, you can use one of
the layout modes available –

❖ The block layout − This mode is used in laying out documents.

❖ The inline layout − This mode is used in laying out text.
❖ The table layout − This mode is used in laying out tables.
 ❖ The table layout − This mode is used in positioning the elements.

What is Flexbox?
In addition to the above-mentioned modes, CSS3 provides another layout mode
Flexible Box, commonly called as Flexbox.

Using this mode, you can easily create layouts for complex applications and web
pages. Unlike floats, Flexbox layout gives complete control over the direction,
alignment, order, size of the boxes.

Features of Flexbox
Following are the notable features of Flexbox layout –

❖ Direction − You can arrange the items on a web page in any direction such as
left to right, right to left, top to bottom, and bottom to top.
❖ Order − Using Flexbox, you can rearrange the order of the contents of a web
page.
❖ Wrap − In case of inconsistent space for the contents of a web page (in single
line), you can wrap them to multiple lines (both horizontally) and vertically.
❖ Alignment − Using Flexbox, you can align the contents of the webpage with
respect to their container.
❖ Resize − Using Flexbox, you can increase or decrease the size of the items in
the page to fit in available space.

Container
A Flexible Layout must have a parent element with the display property set to flex.

Direct child elements(s) of the flexible container automatically becomes flexible

items.

Basically, the flexbox properties define how flex items are sized, how they wrap, and
which direction they go in. The alignment properties define how the flex items are
aligned, both horizontally and vertically, within their container.

To use Flexbox in your application, you need to create/define a flex container using
the display property.
Syntax: display: flex | inline-flex

This property accepts two values.

❖ flex − Generates a block level flex container.

❖ inline-flex − Generates an inline flex container box.

FLEX

Now, we will see how to use the display property with examples.

On passing this value to the display property, a block level flex container will be
created. It occupies the full width of the parent container (browser).

Example: Click here

INLINE-FLEX

On passing this value to the display property, an inline level flex container will be
created. It just takes the place required for the content. Note:

Just change the Container Code above example

.container { display: inline-flex; border:3px solid black; }

Flex-Direction
The flex-direction property is used to specify the direction in which the elements of
flex container (flex-items) are needed to be placed.

The flex-direction property is used to specify the direction in which the elements of

usage −

Flex-direction: row | row-reverse | column | column-reverse

This property accepts four values −

❖ row − Arranges the elements of the container horizontally from left to right.
❖ row-reverse − Arranges the elements of the container horizontally from right
to left.
❖ column − Arranges the elements of the container vertically from left to right.
 ❖ column-reverse − Arranges the elements of the container vertically from right
to left.
❖

Now, we will take a few examples to demonstrate the use of the direction property.

ROW: On passing this value to the direction property, the elements of the container
are arranged horizontally from left to right.

Example: Click Here

Row-reverse: On passing this value to the direction property, the elements of the
container are arranged horizontally from right to left as shown below.

Note: Above example replace the Container css code

.container{

Display:inline-flex;
border:3px solid black;
flex-direction:row-reverse;

Flex-Wrap
Generally, in case of insufficient space for the container, the rest of the flex items will
be hidden as shown below.

The flex-wrap property is used to specify the controls whether the flex-container is
single-line or multi-line.

usage −

flex-wrap: nowrap | wrap | wrap-reverse

flex-direction: column | column-reverse
This property accepts the following values −

• wrap − In case of insufficient space for them, the elements of the container
(flexitems) will wrap into additional flex lines from top to bottom.
• wrap-reverse − In case of insufficient space for them, the elements of the
container (flex-items) will wrap into additional flex lines from bottom to top.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex-Wrap</title>
<!---->
<style>
.parent{
display: flex;
flex-direction: row;
height: 500px;
width: 700px;
border:2px solid gray;
/*flex-wrap: wrap;*/
/*flex-wrap:wrap-reverse;/*
/*flex-direction: column;*/

}
.child{ width:100px; height: 100px; }
#c1{ background-color: crimson; }
#c2{ background-color:aqua; }
#c3{ background-color:chartreuse; }
</style>
</head>
<body>
<div class="parent">
<div id="c1" class="child">1</div>
<div id="c2" class="child">2</div>
<div id="c3" class="child">3</div>
<div id="c1" class="child">4</div>
<div id="c2" class="child">5</div>
<div id="c3" class="child">6</div>
<div id="c1" class="child">7</div>
 <div id="c2" class="child">8</div>
<div id="c3" class="child">9</div>
</div>

</body>
</html>

On passing the value wrap to the property flex-wrap and the value column to the
property flex-direction, the elements of the container are arranged horizontally from
left to right

wrap (column)

On passing the value wrap to the property flex-wrap and the value column to the
property flex-direction, the elements of the container are arranged horizontally from
left to right

Above example change flex-direction:column

wrap-reverse (column)

On passing the value wrap-reverse to the property flex-wrap and the

value column to the property flex-direction, the elements of the container are
arranged horizontally from left to right

Justifying Contents
Using the property justify-content, you can align the contents along the main axis
by distributing the extra space as intended. You can also adjust the alignment of the
flexitems, in case they overflow the line.

justify-content: flex-start | flex-end | center | space-between | space-around|

space-evenly;

This property accepts the following values −

• flex-start − The flex-items are placed at the start of the container.

• flex-end − The flex-items are placed at the end of the container.
 • center − The flex-items are placed at the center of the container, where
the extra space is equally distributed at the start and at the end of the
flex-items.
• space-between − The extra space is equally distributed between the
flex-items.
• space-around − The extra space is equally distributed between the flex
items such that the space between the edges of the container and its
contents is half as the space between the flex-items.

flex-start
On passing this value to the property justify-content, the flex-items are
placed at the start of the container.

flex-end
On passing this value to the property justify-content, the flex-items are
placed at the end of the container.

On passing this value to the property justify-content, the flex-items are placed at
the center of the container, where the extra space is equally distributed at the start
and at the end of the flex-items.

space-between
On passing this value to the property justify-content, the extra space is
equally distributed between the flex items such that the space between any
two flex-items is the same and the start and end of the flex-items touch the
edges of the container.

space-around
On passing this value to the property justify-content, the extra space is equally
distributed between the flex-items such that the space between any two flex-items
is the same. However, the space between the edges of the container and its contents
(the start and end of the flex-items) is half as the space between the flex items.

space-evenly
On passing this value to the property justify-content, the extra space is
equally distributed between the flex-items such that the space between any
two flex-items is the same (including the space to the edges).

Flexbox - Align Items 1-6-2023

The align-items property is same as justify content. But here, the items were
aligned across the cross access (vertically).

Usage –

align-items: flex-start | flex-end | center | baseline | stretch;

This property accepts the following values −

• flex-start − The flex items were aligned vertically at the top of the
container.
• flex-end − The flex items were aligned vertically at the bottom of the
container.
• flex-center − The flex items were aligned vertically at the center of the
container.
• stretch − The flex items were aligned vertically such that they fill up the
whole vertical space of the container.
• baseline − The flex items were aligned such that the baseline of their
text align along a horizontal line.

flex-start: On passing this value to the property align-items, the flex items were
aligned vertically at the top of the container .
flex-end: On passing this value to the property align-items, the flex-items are
aligned vertically at the bottom of the container.
Center: On passing this value to the property align-items, the flex-items are aligned
vertically at the center of the container.

Stretch: On passing this value to the property align-items, the flex-items are aligned
vertically such that they fill up the whole vertical space of the container.

Baseline: On passing this value to the property align-items, the flex-items are
aligned such that the baseline of their text aligns along a horizontal line.

Example for Above all

Flexbox - Align Content

In case the flex-container has multiple lines (when, flex-wrap: wrap), the align-
content property defines the alignment of each line within the container.

Usage –
align-content: flex-start | flex-end | center | space-between | space-around |
stretch;
This property accepts the following values −

• stretch − The lines in the content will stretch to fill up the remaining space.

• flex-start − All the lines in the content are packed at the start of the container.

• flex-end − All the lines in the content are packed at the end of the container.

• center − All the lines in the content are packed at the center of the container.

• space-between − The extra space is distributed between the lines evenly.

• space-around − The extra space is distributed between the lines evenly with

equal space around each line (including the first and last lines)

stretch: On passing this value to the property align-content, the lines will stretch to
fill up the remaining space.
 flex-start: On passing this value to the property align-content, all the lines are
packed at the start of the container.

flex-end: On passing this value to the property align-content, all the lines are
packed at the end of the container.

Center: On passing this value to the property align-content, all the lines are packed

at the center of the container.

space-around: On passing this value to the property align-content, the extra space

is distributed between the lines evenly with equal space around each line (including

the first and last lines).

space-between: On passing this value to the property align-content, the extra

space is distributed between the lines evenly, where the first line will be at the top

and the last line will be at the bottom of the container

Above all Example

Flex Order 2-6-2023

The flex-order property is used to define the order of the flexbox item.

The following example demonstrates the order property. Here we are creating six
colored boxes with the labels one, two, three, four, five, six, arranged in the same
order, and we are reordering them in the order one, two, five, six, three, four, using the
flex-order property.

Example: click Here

- ve ordering: You can also assign –ve values to the order

flex-basis
We use the flex-basis property to define the default size of the flex-item before the
space is distributed.

Example: Click Here

Flexbox - Align Self
This property is similar to align-items, but here, it is applied to individual flex items.

This property accepts the following values −

❖ flex-start − The flex item will be aligned vertically at the top of the
container.
❖ flex-end − The flex item will be aligned vertically at the bottom of the
container.
❖ flex-center − The flex item will be aligned vertically at the center of
the container.
❖ Stretch − The flex item will be aligned vertically such that it fills up the
whole vertical space of the container.
❖ baseline − The flex item will be aligned at the base line of the cross
axis.
Example: Click Here

LINKS WITH CSS – 6-5-2023

Styling Links - Example

Links or hyperlinks are an essential part of a website. It allows visitors to navigate
through the site. Therefore styling the links properly is an important aspect of
building a user-friendly website.

A link has four different states — link, visited, active and hover. These four states of a link
can be styled differently through using the following anchor pseudo-class selectors.

❖ a:link — define styles for normal or unvisited links.

❖ a:visited — define styles for links that the user has already visited.
❖ a:hover — define styles for a link when user place the mouse pointer over it.
❖ a:active — define styles for links when they are being clicked.

You can specify any CSS property you'd like e.g. color, font, background, border, etc.
to each of these selector to customize the style of links, just like you do with the
normal text.
a:link { /* unvisited link */
color: #ff0000;
text-decoration: none;
border-bottom: 1px solid;
}

a:visited { /* visited link */

color: #ff00ff;
}

a:hover { /* mouse over link */

color: #00ff00;
border-bottom: none;
}

a:active { /* active link */

color: #00ffff;
}

Note: In general, the order of the pseudo classes should be the following —
:link, :visited, :hover, :active, :focus in order for these to work properly.

Removing the Default Underline from Links - Example

If you don't like the default underline on links, you can simply use the CSS text-
decoration property to get rid of it. Alternatively, you can apply other styling on links
like background color, bottom border, bold font, etc. to make it stand out from the
normal text a little better.

The following example shows how to remove or set underline for different states of a
link.

a:link, a:visited {
text-decoration: none;
}

a:hover, a:active {
text-decoration: underline;
}
Making Text Links Look Like Buttons - Example
You can also make your ordinary text links look like button using CSS. To do this
we need to utilize few more CSS properties such as background-
color, border, display, padding, etc.

a:link, a:visited {
color: white;
background-color: #1ebba3;
display: inline-block;
padding: 10px 20px;
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;
}

a:hover, a:active {
background-color: #9c6ae1;
border-color: #7443b6;
}

Creating Navigation Menus Using Lists- example

HTML lists are frequently used to create horizontal navigation bar or menu that
typically appear at the top of a website. But since the list items are block elements,
so to display them inline we need to use the CSS display property.

One common use for display: inline-block is to display list items horizontally instead
of vertically.

CSS Tables
When you create an HTML Table without any styles or attributes, browsers display
them without any border. With CSS you can greatly improve the appearance your
tables.

CSS provides several properties that allow you to control the layout and presentation
of the table elements.

Adding Borders to Tables

The CSS border property is the best way to define the borders for the tables.

Now, we will set a black border for the <table>, <th>, and <td> elements.

By default, browser draws a border around the table, as well as around all the cells,
with some space in-between, which results in double border. To get rid of this double
border problem you can simply collapse the adjoining table cell borders and create
clean single line borders.

Collapsing Table Borders - Example

There are two distinct models for setting borders on table cells in
CSS: separate and collapse.

In the separate border model, which is the default, each table cell has its own distinct
borders, whereas in the collapsed border model, adjacent table cells share a
common border. You can set the border model for an HTML table by using the
CSS border-collapse property.

table {
border-collapse: collapse;
}

th, td {
border: 1px solid black;
}

Adjusting Space inside Tables

th, td {
padding: 15px;
}
Table Width, Height and Layout

By default, a table will render just wide and tall enough to contain all of its contents.

However, you can also set the width and height of the table as well as its cells
explicitly using the width and height CSS property.

table {
width: 100%;
}

th {
height: 40px;
}

Layout : A table expands and contracts to accommodate the data contained

inside it. This is the default behavior. As data fills inside the table, it continues to
expand as long as there is space. Sometimes, however, it is necessary to set a fixed
width for the table in order to manage the layout.

You can do this with the help of CSS table-layout property. This property defines the
algorithm to be used to layout the table cells, rows, and columns. This property takes
one of two values:

auto — Uses an automatic table layout algorithm. With this algorithm, the widths of
the table and its cells are adjusted to fit the content. This is the default value.

fixed — Uses the fixed table layout algorithm. With this algorithm, the horizontal
layout of the table does not depend on the contents of the cells; it only depends on
the table's width, the width of the columns, and borders or cell spacing. It is normally
faster than auto.

table {
width: 300px;
table-layout: fixed;
}

Handling Empty Cells: In tables that uses separate border model, which is
default, you can also control the rendering of the cells that have no visible content
using the empty-cells CSS property.
This property accepts a value of either show or hide. The default value is show, which
renders empty cells like normal cells, but if the value hide is specified no borders or
backgrounds are drawn around the empty cells.

Example: click here