Scribd
Upload
11 views41 pages

Introduction to CSS Basics and Usage

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of HTML elements across various media. It allows for efficient styling and maintenance of web pages, supports various selectors for targeting elements, and can be applied through external, internal, or inline methods. CSS also provides extensive options for color specification, including predefined names, RGB, HEX, HSL, and their respective alpha variations.

Uploaded by

sameermadabhavi232
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views41 pages

Introduction to CSS Basics and Usage

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of HTML elements across various media. It allows for efficient styling and maintenance of web pages, supports various selectors for targeting elements, and can be applied through external, internal, or inline methods. CSS also provides extensive options for color specification, including predefined names, RGB, HEX, HSL, and their respective alpha variations.

Uploaded by

sameermadabhavi232
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Introduction to CSS

What is CSS?

● CSS stands for Cascading Style Sheets


● CSS describes how HTML elements are to be displayed on screen, paper, or in other media
● CSS saves a lot of work. It can control the layout of multiple web pages all at once
● External stylesheets are stored in CSS files

Why Use CSS?


● CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML pages.
● Easy Maintenance: To make a global change simply change the style, and all elements in all the
webpages will be updated automatically.
● Search Engines: CSS is considered a clean coding technique, which means search engines won’t have
to struggle to “read” its content.
● Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far
better look to your HTML page in comparison to HTML attributes.
● Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using this
we can view offline websites
CSS is used to define styles for your web pages, including the design, layout and variations in display for
different devices and screen sizes.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for
web developers. Development of large websites, where fonts and color information were added to every single
page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS Syntax

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

CSS Syntax

The selector points to the HTML element you want to style.


The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly
braces.

Example

In this example all <p> elements will be center-aligned, with a red text color:

p{
color: red;
text-align: center;
}
Example Explained
● p is a selector in CSS (it points to the HTML element you want to style: <p>).
● color is a property, and red is the property value
● text-align is a property, and center is the property value

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:

● Simple selectors (select elements based on name, id, class)


● Universal Selector(Selects all elements on the page)
● Attribute selectors (select elements based on an attribute or attribute value)
● Pseudo-class selectors (Selects elements based on their state or position, such as :hover for hover
effects).
● Combinator selectors Combine selectors to specify relationships between elements,
● Pseudo-elements selectors (select and style a part of an elementsuch as ::before or ::after)
1)Simple Selectors
Simple selectors contains the below classes.
● Simple Selector ● Description

● Selects HTML elements based on


● Element Selector
their tag names.

● Id Selector ● Targets an HTML element with a


● specific id attribute.

● Selects elements with a particular


● Class Selector
class attribute.

a)The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
b) The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

The CSS rule below will be applied to the HTML element with id="para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
c) The CSS class Selector

The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with class="center" will be red and center-aligned:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>

You can also specify that only specific HTML elements should be affected by a class.

Example

In this example only <p> elements with class="center" will be red and center-aligned:

[Link] {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class.

Example

In this example the <p> element will be styled according to class="center" and to class="large":

<p class="center large">This paragraph refers to two classes.</p>


2)The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

*{
text-align: center;
color: blue;
}
Example:<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
3)The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
o group selectors, separate each selector with a comma.

Example

In this example we have grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color: red;
}

4)CSS Attribute Selector


The attribute selector [attribute] is used to select the elements with a specified attribute or attribute value.
Example:[href] {
background-color: lightgreen;
color: black;
font-family: monospace;
font-size: 1rem;
}

5)CSS Pseudo-Class Selector:It is used to style a special type of state of any element. For example- It is
used to style an element when a mouse cursor hovers over it.

h1:hover{
background-color: aqua;
}
How to add CSS
CSS is added to HTML pages to format the document according to information in the style sheet. There are
three ways to insert CSS in HTML documents.
1. Inline CSS
2. Internal CSS
3. External CSS

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

● External CSS
● Internal CSS
● Inline CSS

1)External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the
head section.

Example

External styles are defined within the <link> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "[Link]" file looks:

"[Link]"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value (20) and the unit (px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;

2)Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.

Example

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3)Inline CSS

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS
property.

Example

Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use
this method sparingly.

**CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

1)CSS predefined Color Names

In CSS, a color can be specified by using a predefined colorname:CSS/HTML support 140 standard color
names. For example:
1)<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
2)set the color of borders:
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

2)CSS RGB Colors

An RGB color value represents RED, GREEN, and BLUE light sources.

In CSS, a color can be specified as an RGB value, using this formula:


rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set
to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).for example:
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>

3)CSS RGBA colors

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity
for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
For example:
<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>

4)CSS HEX Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal
integers specify the components of the color.

In CSS, a color can be specified using a hexadecimal value in the form:


#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the
lowest value (00).
To display black, set all values to 00, like this: #000000.
To display white, set all values to ff, like this: #ffffff.
For example:
<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>

5)CSS HSL Colors

HSL stands for hue, saturation, and lightness.

In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value. 0% means a shade of gray, and 100% is the full [Link] can be
described as the intensity of a color.100% is pure color, no shades of gray.50% is 50% gray, but you can still see
the color.
Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is [Link] lightness of a color
can be described as how much light you want to give the color, where 0% means no light (black), 50% means
50% light (neither dark nor light) and 100% means full lightness (white).
For example:
<h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>
<h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>

6)CSS HSLA colors:HSLA color values are an extension of HSL color values with an alpha channel - which
specifies the opacity for a [Link] HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)


The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
For example:
<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>

7)Background Color in CSS


It is also possible to put in any background color to your HTML element using the style attribute and color code as the value of that
attribute. Here is an HTML code that shows the use of background-color values in different elements.

: <h3 style="background-color:steelblue">Welcome to the world of CSS colors.</h3>

8)Text Color in CSS


It is also possible to set the color of your text for different HTML elements by using the style attribute followed by the "color: value"
of CSS. Here is an HTML code that shows how to implement the same:

Example: <p style="color:darkblue">Welcome to the world of CSS colors.</p>


It is to be noted that, in case you write a wrong color code for your text color, it will automatically change itself to black, which is its
default color.

9)Border Color in CSS


The border colors can be set using the style attribute followed by border: value; Here is an example showing the implementation:

<p style="border:1px solid dodgerblue; padding:5px">Welcome to the world of CSS colors.</p>


**CSS Backgrounds

CSS background sets the background of elements. It is used to define the background effects for elements in
single line. There are lots of properties to design the background.

● background-color
● background-image
● background-repeat
● background-attachment
● background-position
● background (shorthand property)

1)CSS background-color

The background-color property specifies the background color of an element.

Example

The background color of a page is set like this:

body {
background-color: lightblue;
}
With CSS, a color is most often specified by:
● a valid color name - like "red"
● a HEX value - like "#ff0000"
● an RGB value - like "rgb(255,0,0)"

Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The
lower value, the more transparent:
<head>
<style>
div {
background-color: green;
}

[Link] {
opacity: 0.1;
}
[Link] {
opacity: 0.3;
}
[Link] {
opacity: 0.6;
}
</style>
</head>
<body>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>

<div class="third">
<h1>opacity 0.6</h1>
</div>

<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>

2)CSS background-image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Example:Set the background image for a page:


body {
background-image: url("[Link]");
}
3)CSS background-repeat

By default, the background-image property repeats an image both horizontally and [Link] the image is
repeated only horizontally (background-repeat: repeat-x;), the background will look better:
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

To repeat an image vertically, set background-repeat: repeat-y;


CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-repeat property:
Example Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
4)CSS background-position

The background-position property is used to specify the position of the background [Link]
background-position are right top

Example

Position the background image in the top-right corner:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

5)CSS background-attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not
scroll with the rest of the page):

Example

Specify that the background image should be fixed:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
6)CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is
called a shorthand property.
Instead of writing:

body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

we can use the shorthand property background:

Example

Use the shorthand property to set the background properties in one declaration:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
CSS Fonts
CSS fonts offer a range of options to style the text content within HTML elements. It gives you the
ability to control different aspects of fonts, including font family, font size, font weight, font style, and
more.
There are many font properties in CSS which are mentioned and briefly discussed below:
● CSS font-family Property: The font-family property specifies the font of an element.
● CSS font-style Property: If we want to give design to any type of text then we can make use of CSS
font-style property.
● CSS font-weight Property: The font-weight property of the CSS is used to set the weight or thickness
of the font being used with the HTML Text.
● CSS font-variant Property: The font-variant property is used to convert all lowercase letters into
uppercase letters.
● CSS font-size Property: The font-size property in CSS is used to set the font size of the text in an
HTML document.
● CSS font-stretch Property: The font-stretch property in CSS is used to set the text wider or narrower.
● CSS font-kerning Property: This property is used to control the usage of the Kerning Information that
has been stored in the Font

1)CSSfont-family:we use the font-family property to specify the font of a [Link] ensure maximum
compatibility between browsers/operating systems. Start with the font you want, and end with a generic family
(to let the browser pick a similar font in the generic family, if no other fonts are available). The font names
should be separated with a comma.
example: "Times New Roman", Times, serif;Arial, Helvetica, sans-serif;"Lucida Console", "Courier New",
monospace;
example:
.p1 {
font-family: "Times New Roman", Times, serif;
}
2)CSS font-style: It is used to specify the font style of an HTML element. It can be “normal, italic or oblique”.
Syntax: font-style: style name;

3)CSSfont-weight: It is used to set the boldness of the font. Its value can be “normal, bold, lighter, bolder”.
Syntax:font-weight: font weight value;

4)CSS font-variant: It is used to create the small-caps effect. It can be “normal or small-caps”.
Syntax:font-variant: font variant value;

5)CSS font-size: It is used to set the font size of an HTML element. The font-size can be set in different ways
like in “pixels, percentage, em or we can set values like small, large” etc.
Syntax:font-size: font size value;
6)The CSS Font Property(shorthand property)To shorten the code, it is also possible to specify all the
individual font properties in one [Link] font property is a shorthand property for:

● font-style
● font-variant
● font-weight
● font-size/line-height
● font-family
Example:Use font to set several font properties in one declaration:
<html>
<head>
<style>
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<h1>The font Property</h1>
<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>
<p class="b">This is a paragraph. The font is set to italic, small-caps and bold, the font size is set to 12
pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>
</body>
</html>

CSS Text Properties


It is possible to assign various CSS text properties in your HTML element using the CSS text properties listed below:

CSS Text Property Description

color The color property can be applied to set the color in your text.

direction The direction property can be applied to set the direction of your text.

letter-spacing The letter-spacing property can be applied to add or subtract space between letters,
which will form a word.

text-decoration The text-decoration property can be applied for underlining, overlining, and
strikethrough text.

text-shadow The text-shadow property can be applied for setting the text-shadow on your text.

text-transform The text-transform property can be applied to capitalize text or convert text to
uppercase or lowercase letters.

word-spacing The word-spacing property can be applied to add or subtract space between different
words in your sentence.

text-indent The text-indent property can be applied to indent the text of your paragraph.

text-align The text-align property can be applied to align text in your document.

white-space The white-space property can be applied to control flow, as well as to the formatting of
your text.

Let us discuss these in detail and see how to implement them and how it looks in the browser.

CSS Text Color


The color property of CSS is implemented for assigning colors to your texts. Three different approaches can specify these
colors:

● By using the color name, such as red, aqua, blue


● By using the HEX value, such as #ff0000, #ffff00
● By using the RGB value, such as rgb(255,0,0), rgb(255,255,0)
Here is a code snippet of how to implement:

Example:

Copy Codep {
color: red;
}

body {
color: aqua;
}
CSS Text Alignment
This property is implemented to specify a horizontal alignment in your text. Text alignment can be of these four values.

1. left
2. right
3. center or
4. justify

Example:

Copy Codep {
text-align:left;
}

body {
text-align: center;
}

h2 {
text-align: right;
}
It is to be noted that when the text-align property is assigned with a justify value, the line is stretched to fit the page where
the right and the left margins become straight.

CSS Text Decoration


This property of CSS is implemented to add or remove decorations from your text. When the text-decoration value is set to
none, it is often employed for removing underlines from links, which looks something like this:

Example:

Copy Codea {
text-decoration: none;
}
Other code snippets are:

Example:

Copy Codeh2 {
text-decoration: line-through;
}

p{
text-decoration: overline;
}

body {
text-decoration: underline;
}
CSS Text Transformation
This CSS property is implemented for specifying the uppercase as well as the lowercase letters of your text. The
transformation can be either converting every text to lowercase or upper case or capitalize the starting letter of every word.

Example:

Copy [Link] {
text-transform: uppercase;
}

[Link] {
text-transform: lowercase;
}

[Link] {
text-transform: capitalize;
}

CSS Text Indentation


The text-indent property of CSS is implemented to specify the indentation of the initial line of your text.

Example:

Copy Codep {
text-indent: 40px;
}
CSS Line Height
This CSS line-height property is applied to assign space between lines:

Example:

Copy [Link] {
line-height: 0.6;
}

[Link] {
line-height: 1.5;
}
CSS Letter and Word Spacing
The letter-spacing property is implemented for specifying the space involving the characters within your HTML text. And the
word-spacing property is implemented for specifying the space involving the words between your texts.

Example:

Copy Codeh2 {
letter-spacing: 2px;
}

h3 {
letter-spacing:3px;
}

h1 {
word-spacing: 10px;
}
CSS Text Shadow
The text-shadow property of CSS allows including shadow to your text. Here is a code snippet:

Example:

Copy Codeh2 {
text-shadow: 2px 1px gray;
}
Here, in the example above, the first position value designates the horizontal shadow (2px), and the second parameter
value shows the vertical shadow (1px). The last value designates the color of your shadow. Note that space separates each
of these values.

CSS Lists:
The List in CSS specifies the listing of the contents or items in a particular manner i.e., it can either be
organized orderly or unorder way, which helps to make a clean webpage. It can be used to arrange the huge with
a variety of content as they are flexible and easy to manage. The default style for the list is borderless.
HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

● unordered lists (<ul>) - the list items are marked with bullets
● ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

● Set different list item markers for ordered lists


● Set different list item markers for unordered lists
● Set an image as the list item marker
● Add background colors to lists and list items

All CSS List Properties

Property Description

list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker

list-style-positio Specifies the position of the list-item markers (bullet points)


n

list-style-type Specifies the type of list-item marker


1)Different List Item Markers(for ordered and unordered lists)

The list-style-type property specifies the type of list item marker.


The following example shows some of the available list item markers:
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

2)An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example
ul {
list-style-image: url('[Link]');
}
3)Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).
"list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a
list item will be aligned vertically. This is default:

● Coffee - A brewed drink prepared from roasted coffee beans...


● Tea
● Coca-cola

"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part of the list item,
it will be part of the text and push the text at the start:

● Coffee - A brewed drink prepared from roasted coffee beans...


● Tea
● Coca-cola

Example
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}
4)List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example
ul {
list-style: square inside url("[Link]");
}
5)Styling List WithColors

We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect
the individual list items:

Example
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
CSS Tables:
A table in CSS is used to apply the various styling properties to the HTML Table elements to arrange the data in
rows and columns, or possibly in a more complex structure in a properly organized manner. Tables are widely
used in communication, research, and data analysis. The table-layout property in CSS can be utilized to display
the layout of the table. This property is basically used to sets the algorithm that is used to layout <table>cells,
rows, and columns.
1)Table Borders:To specify table borders in CSS, use the border property.

The example below specifies a solid border for <table>, <th>, and <td> elements:
Example
table, th, td {
border: 1px solid;
}

2)Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border:

Example
table {
border-collapse: collapse;
}
3)CSS Table Size
Table Width and Height

The width and height of a table are defined by the width and height properties.

Example
table {
width: 100%;
}

th {
height: 70px;
}
4)CSS Table Alignment
Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

Example
td {
text-align: center;
}
Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or
<td>.
By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

5)CSS Table Style


a)Table Padding

To control the space between the border and the content in a table, use the padding property on <td> and <th>
elements:
Example
th, td {
padding: 15px;
text-align: left;
}
b)Hoverable Table

Use the :hover selector on <tr> to highlight table rows on mouse over:

Example
tr:hover {background-color: coral;}
c)Striped Tables

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

Example
tr:nth-child(even) {background-color: #f2f2f2;}

d)Table Color

The example below specifies the background color and text color of <th> elements:

Example
th {
background-color: #04AA6D;
color: white;
}
***CSS Box Modeling

All HTML elements can be considered as [Link] CSS, the term "box model" is used when talking about
design and [Link] CSS box model is essentially a box that wraps around every HTML element. It consists
of: content, padding, borders and margins. The image below illustrates the box model:

Explanation of the different parts:

● Content - The content of the box, where text and images appear
● Padding - Clears an area around the content. The padding is transparent
● Border - A border that goes around the padding and content
● Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders,
padding, margins, and the actual content.</p>
<div>This text is the content of the box.</div>
</body>
</html>

Display Positioning
1)CSS Layout :The display Property

The display property is used to specify how an element is shown on a web [Link] HTML element has a
default display value, depending on what type of element it is. The default display value for most elements
is block or [Link] display property is used to change the default display behavior of HTML elements.

CSS Syntax:display: value;


The display Property Values

The display property has many values:


Value Description

inline Displays an element as an inline element

block Displays an element as a block element

contents Makes the container disappear, making the


child elements children of the element the
next level up in the DOM

flex Displays an element as a block-level flex


container

grid Displays an element as a block-level grid


container

inline-block Displays an element as an inline-level block


container. The element itself is formatted as
an inline element, but you can apply height
and width values
inline-flex Displays an element as an inline-level flex
container

inline-grid Displays an element as an inline-level grid


container

Example:
body {
display: inline;
}

p{
display: inherit;
}

Block-level Elements

A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the
left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

● <div>
● <h1> - <h6>
● <p>
● <form>
● <header>
● <footer>
● <section>
Inline Elements:An inline element DOES NOT start on a new line and only takes up as much width as
necessary.

This is an inline <span> element inside a paragraph.


Examples of inline elements:

● <span>
● <a>
● <img>

2)CSS Layout - The position Property:The position property specifies the type of positioning method used
for an element.

There are five different position values:

● static
● relative
● fixed
● absolute
● sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not
work unless the position property is set first. They also work differently depending on the position value.

1)position: static;

HTML elements are positioned static by [Link] positioned elements are not affected by the top, bottom,
left, and right [Link] element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:

This <div> element has position: static;


Example
[Link] {
position: static;
border: 3px solid #73AD21;
}

2)position: relative;An element with position: relative; is positioned relative to its normal [Link] the
top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from
its normal position. Other content will not be adjusted to fit into any gap left by the element.
Example
[Link] {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
3)position: fixed;An element with position: fixed; is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to
position the element.

A fixed element does not leave a gap in the page where it would normally have been located.
Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:
Example
[Link] {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
This <div> element has position: fixed;
4)position: absolute;An element with position: absolute; is positioned relative to the nearest positioned
ancestor (instead of positioned relative to the viewport, like fixed).However; if an absolute positioned element
has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.
Here is a simple example:

This <div> element has position: relative;


This <div> element has position: absolute;
Example
[Link] {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
[Link] {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

5)position: sticky;An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative
until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Example
[Link] {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
6)Positioning Text In an Image

How to position text over an image:


CSS Gradients

CSS gradients display smooth transitions between two or more specified [Link] defines three types of
gradients:

● Linear Gradients (goes down/up/left/right/diagonally)


● Radial Gradients (defined by their center)
● Conic Gradients (rotated around a center point)

1)CSS Linear Gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render
smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient
effect.

Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

a)Direction - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:

Example
#grad {
background-image: linear-gradient(red, yellow);
}

b)Direction - Left to Right


The following example shows a linear gradient that starts from the left. It starts red, transitioning to yellow:
Example
#grad {
background-image: linear-gradient(to right, red , yellow);
}

c)Direction - Diagonal
You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.
The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red,
transitioning to yellow:

Example

#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
d)Using Angles

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined
directions (to bottom, to top, to right, to left, to bottom right, etc.). A value of 0deg is equivalent to "to top". A
value of 90deg is equivalent to "to right". A value of 180deg is equivalent to "to bottom".

Syntax
background-image: linear-gradient(angle, color-stop1, color-stop2);

The following example shows how to use angles on linear gradients:

Example

#grad {
background-image: linear-gradient(180deg, red, yellow);
}
e)Using Multiple Color Stops

The following example shows a linear gradient (from top to bottom) with multiple color stops:
Example
#grad {
background-image: linear-gradient(red, yellow, green);
}

The following example shows how to create a linear gradient (from left to right) with the color of the rainbow
and some text:

Example

#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
f)Using Transparency

CSS gradients also support transparency, which can be used to create fading effects.
To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba()
function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1
indicates full color (no transparency).

The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning
to full color red:

Example
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
g)Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients:


Example

A repeating linear gradient:

#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
2)CSS Radial Gradients

A radial gradient is defined by its [Link] create a radial gradient you must also define at least two color stops.

Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.


a)Radial Gradient - Evenly Spaced Color Stops (this is default)
The following example shows a radial gradient with evenly spaced color stops:

Example
#grad {
background-image: radial-gradient(red, yellow, green);
}

b)Radial Gradient - Differently Spaced Color Stops


The following example shows a radial gradient with differently spaced color stops:

Example
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
c)Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
Example
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
d)Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

● closest-side
● farthest-side
● closest-corner
● farthest-corner

Example

A radial gradient with different size keywords:

#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
e)Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients:

Example

A repeating radial gradient:


#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
3)CSS Conic Gradients

A conic gradient is a gradient with color transitions rotated around a center [Link] create a conic gradient you
must define at least two colors.

Syntax
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

By default, angle is 0deg and position is [Link] no degree is specified, the colors will be spread equally
around the center point.

a)Conic Gradient: Three Colors

The following example shows a conic gradient with three colors:

Example

A conic gradient with three colors:

#grad {
background-image: conic-gradient(red, yellow, green);
}
b)Conic Gradient: Three Colors and Degrees

The following example shows a conic gradient with three colors and a degree for each color:

Example

A conic gradient with three colors and a degree for each color:

#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
c)Create Pie Charts

Just add border-radius: 50% to make the conic gradient look like a pie:

Example
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}

Shadows
1)CSS Shadow Effects

With CSS you can add shadow to text and to elements.


In these chapters you will learn about the following properties:

● text-shadow
● box-shadow

CSS Text Shadow

The CSS text-shadow property applies shadow to text.


In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

Example
h1 {
text-shadow: 2px 2px;
}
Text shadow effect!
Example
h1 {
text-shadow: 2px 2px red;
}
Multiple Shadows

To add more than one shadow to the text, you can add a comma-separated list of shadows.
The following example shows a red and blue neon glow shadow:

Text shadow effect!


Example
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Border around text!
Example
h1 {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
2)CSS box-shadow Property

The CSS box-shadow property is used to apply one or more shadows to an element.

Specify a Horizontal and a Vertical Shadow

In its simplest use, you only specify a horizontal and a vertical shadow. The default color of the shadow is the
current text-color.

Example

Specify a horizontal and a vertical shadow:

div {
box-shadow: 10px 10px;
}

3)Specify a Color for the Shadow

The color parameter defines the color of the shadow.

Example

Specify a color for the shadow:

div {
box-shadow: 10px 10px lightblue;
}
4)Add a Blur Effect to the Shadow

The blur parameter defines the blur radius. The higher the number, the more blurred the shadow will be.
Example

Add a blur effect to the shadow:

div {
box-shadow: 10px 10px 5px lightblue;
}

CSS Animations
What are CSS Animations?

An animation lets an element gradually change from one style to another.


You can change as many CSS properties you want, as many times as you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.

the following animation properties are:

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties:

Property Description

@keyframes Specifies the animation code

animation A shorthand property for setting all the animation properties

animation-delay Specifies a delay for the start of an animation

animation-direction Specifies whether an animation should be played forwards,


backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to complete
one cycle

animation-fill-mode Specifies a style for the element when the animation is not
playing (before it starts, after it ends, or both)

animation-iteration-count Specifies the number of times an animation should be played

animation-name Specifies the name of the @keyframes animation

animation-play-state Specifies whether the animation is running or paused

animation-timing-function Specifies the speed curve of the animation

1)The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current
style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
The following example binds the "example" animation to the <div> element. The animation will last for 4
seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow":

Example
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */


div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

The animation-duration property defines how long an animation should take to complete. If
the animation-duration property is not specified, no animation will occur, because the default value is 0s (0
seconds).
In the example above we have specified when the style will change by using the keywords "from" and "to"
(which represents 0% (start) and 100% (complete))
2)Delay an Animation

The animation-delay property specifies a delay for the start of an animation.

3)Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an animation should run.

4)Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property specifies whether an animation should be played forwards, backwards or in
alternate cycles.
The animation-direction property can have the following values:

● normal - The animation is played as normal (forwards). This is default


● reverse - The animation is played in reverse direction (backwards)
● alternate - The animation is played forwards first, then backwards
● alternate-reverse - The animation is played backwards first, then forwards

5) Animation Shorthand Property

The example below uses six of the animation properties:

Example
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

CSS 3D Transforms
CSS Transform Properties

The following table lists all the 3D transform properties:

Property Description

transform Applies a 2D or 3D transformation to an element

transform-origin Allows you to change the position on transformed elements

transform-style Specifies how nested elements are rendered in 3D space


perspective Specifies the perspective on how 3D elements are viewed

perspective-origin Specifies the bottom position of 3D elements

backface-visibility Defines whether or not an element should be visible when not facing the screen

CSS 3D Transforms Methods

With the CSS transform property you can use the following 3D transformation methods:

● rotateX()
● rotateY()
● rotateZ()

The rotateX() method rotates an element around its X-axis at a given degree:

Example
#myDiv {
transform: rotateX(150deg);
}

The rotateY() method rotates an element around its Y-axis at a given degree:

Example
#myDiv {
transform: rotateY(150deg);
}

CSS Transitions
CSS transitions allows you to change property values smoothly, over a given duration.
the following properties of CSS transistions :
The following table lists all the CSS transition properties:

Property Description

transition A shorthand property for setting the four transition properties


into a single property

transition-delay Specifies a delay (in seconds) for the transition effect


transition-duration Specifies how many seconds or milliseconds a transition
effect takes to complete

transition-property Specifies the name of the CSS property the transition effect
is for

transition-timing-function Specifies the speed curve of the transition effect

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

● the CSS property you want to add an effect to


● the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

The following example shows a 100px * 100px red <div> element. The <div> element has also specified a
transition effect for the width property, with a duration of 2 seconds:

Example
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

The transition effect will start when the specified CSS property (width) changes value.
Now, let us specify a new value for the width property when a user mouses over the <div> element:

Example
div:hover {
width: 300px;
}

Notice that when the cursor mouses out of the element, it will gradually change back to its original style.

a)Change Several Property Values

The following example adds a transition effect for both the width and height property, with a duration of 2
seconds for the width and 4 seconds for the height:

Example
div {
transition: width 2s, height 4s;
}
b)Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:

● ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
● linear - specifies a transition effect with the same speed from start to end
● ease-in - specifies a transition effect with a slow start
● ease-out - specifies a transition effect with a slow end

c)Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition effect.
The following example has a 1 second delay before starting:

Example
div {
transition-delay: 1s;
}

d)Transition + Transformation

The following example adds a transition effect to the transformation:

Example
div {
transition: width 2s, height 2s, transform 2s;
}

CSS Floats:
The float CSS property is used to position the elements to the left, right, of its container along with permitting
the text and inline elements to wrap around it. The float property defines the flow of content in the page. The
remaining elements will be part of the flow if the element is removed from the normal flow of the content. This
property is ignored by the absolutely positioned elements. It can be written in a CSS file or can be directly
specified in the style of an element.
Syntax:
float: none|left|right|initial|inherit;
Property values:
● none: This is the default value & the element does not float.
● left: Element floats on the left side of the container.
● right: Element floats on the right side of the container.
● initial Element will be set to its default value.
● inherit: Element inherits floating property of its parent property.
left: The element will be positioned to the left side of its containing block.
<html>
<body>
<div class="GFG"
style="font-size:40px;
color:#006400;
float:left;">
hello India!!
</div>
</body>
</html>

You might also like