CSS Notes
Cascading Style Sheets (CSS) is a stylesheet language used to describe
the presentation and formatting of an HTML document. That is, it defines
the look and feel of websites by styling fonts, colors, etc.
CSS Syntax
A CSS rule has three main parts: selector, property, and value.
selector {
property1: value1;
property2: value2;
}
Explanation of Syntax:
Selector: The HTML element (tag) you want to style.
Property: The property name whose value you want to set.
Value: The value that you want to set for the property.
Example: h1 {
color:red;
font-size:12px;
}
Explanation of Example:
h1 is the selector .
color:red; is a CSS declaration, where color is the property, and blue
is the value given.
font-size:12px; is another declaration, where font-size is the
property, and 12px is the value given.
Types of CSS (How to add CSS to HTML?)
There are 3 different ways to add CSS styles to an HTML document:
1. Inline CSS: It adds the style directly to an HTML element (tag), using
the style attribute. It is useful for styling a single element without
affecting the rest of the page.
Example: <body>
<p style="color: blue; font-size: 16px;">
Welcome to My Page!
</p>
</body>
gs/css/pg-1
2. Internal CSS: The style rules are placed within the <style> tag
inside the <head> section of the HTML document. It is useful for
styling a single HTML page.
Example: <head>
<style>
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p> Welcome to My Page! </p>
</body>
3. External CSS: It stores the style in a separate file with
a .css extension (e.g., [Link]). This file is linked within
the <head> section of the HTML document using the <link> tag. It is
useful for styling an entire website.
Example: <!-- In html file -->
<head>
<link rel="stylesheet" href="[Link]" type="text/css">
</head>
<body>
<p> Welcome to My Page! </p>
</body>
/* In [Link] file */
p {
color: red;
font-size: 20px;
}
Precedence Order of CSS (from highest to lowest)
1. Inline CSS (style="..." directly in HTML elements)
2. Internal CSS (<style> tag in the <head>)
3. External CSS (<link rel="stylesheet" href="[Link]">)
CSS comments
Comments are used to explain the code. They are ignored by the browser,
hence not displayed in the web page. They start with /* and end with */.
Example:
/* This is a comment */
p {
color: red; /* This is also a comment */
gs/css/pg-2
}
CSS Selectors
Selectors are used to select the HTML tags you want to style. Few
Selectors are:
(a) element name (e.g., h1) (b) id (#idName) (c) class
(.className) (d) universal (*) (e) grouping selector
(a) Element Selector: It selects and applies style to all elements of a
specific type.
Example: p {
font-size: 16px;
} /* font size for all paragraphs will be
16px*/
(b) id Selector: It uses the unique id of an HTML element to select the
specific element. It applies style to the single element having the
specified id. Use a hash (#) character before the id name in the CSS
rule.
Example: #para1 {
text-align: center;
color: red;
}
Here, the CSS rule will be applied only to the HTML element with
id="para1".
(c) class Selector: It uses the class name to select the HTML elements.
It applies styles to all HTML elements having the specified class name.
Use a period (.) before the class name in the CSS rule.
Example: .school {
text-align: center;
color: red;
}
Here, all HTML elements with class="school" will be red and center-
aligned.
(d) Universal Selector (*): It selects all HTML elements in the page and
applies the same style universally.
Example: * {
color: blue;
} /*color of every text on the page will be
blue*/
gs/css/pg-3
(e) Grouping Selector: It selects all the HTML elements with the same
style definitions. It minimizes the code. To group selectors, separate
each selector with a comma.
Example: h1, h2, p {
text-align: center;
scolor: red;
} /*same style will be applied to h1, h2, and p
elements*/
Few CSS properties
color: Sets the color of text.
Values: keyword name, hexadecimal code, rgb value
Example: <h1 style="color: blue;"> Hello ! </h1>
<h1 style="color: #ff0000;"> Hello ! </h1>
<h1 style="color: rgba(40, 140, 220, 0.5);"> Hello ! </h1>
Hexadecimal colors are a way of representing colors using a
hexadecimal number system, commonly used in web design and computer
graphics.
It uses the #RRGGBB format, where RR means red, GG means green, and
BB means blue. Each color can range from 00 to FF (0 to 255 in
decimal). These values represent the intensity of each color
component, from darkest (00 means 0) to brightest (FF means 255).
Each color is a fusion of these 3 primary colors. The '#' symbol
indicates that it's a hexadecimal color code.
Example: #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure
blue.
font-family: Specifies the font for the text. It can list multiple
fonts as fallbacks. If the browser doesn't support the first font, it
tries the next.
Values: specific font names ("Arial", "Times"), generic families
("serif", "sans-serif"), inherit
Example: <h1 style="font-family:'Consolas','Times New Roman';">
Hello! </h1>
font-size: Sets the size of the text.
Values: xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger, length, %, inherit
Example: <h1 style="font-size: 25px;"> Hello! </h1>
gs/css/pg-4
font-weight: Sets how thick or thin characters in text should be
displayed.
Values: normal, bold, bolder, lighter, 100 to 900 (from thin to thick
characters), inherit
Example: <h1 style="font-weight: bold;"> Hello! </h1>
<h1 style="font-weight: 500;"> Hello! </h1>
font-style: specifies the font style for the text.
Values: normal, italic, oblique, inherit
Example: <h1 style = "font-style:oblique;"> Hello! </h1>
text-align: Aligns text horizontally within an element.
Values: left, right, center, justify.
Example: <h1 style="text-align: center;"> Hello! </h1>
text-decoration: Adds decoration to text. Also sets color, style,
thickness of line. It is a shorthand property for - text-decoration-
line(required), text-decoration-color, text-decoration-style, text-
decoration-thickness.
Values for line: none, underline, overline, line-through
Example: <h1 style="text-decoration: underline dotted red"> Hello!
</h1>
text-transform: Controls the letters (text).
Values: none, capitalize, uppercase, or lowercase.
Example: <h1 style="text-transform: capitalize; "> hello! </h1>
line-height: Sets the distance between lines.
Values: normal, length, %, number
Example: <h1 style="line-height:2.5;"> Hello! </h1>
letter-spacing: Increase or decrease the space between characters.
Values: normal, length
Example: <h1 style="letter-spacing:15px;"> Hello! </h1>
background-color: Sets the background color of an element.
Values: keyword name, hex code, rgb value
gs/css/pg-5
Example: <h1 style="background-color: #ff00ff"> Hello! </h1>
background-image: Set a background-image for an element.
Value: url (url means path of the image to be used)
Example: <body style="background-image: url('[Link]');">
<h1> HELLO ! </h1>
</body>
width / height: Sets the width / height of an element. It does not
include padding, borders, or margins.
Values: auto, length, %
Example: <img src="[Link]" style="width: 400px; height: 300px;">
margin: Creates space around elements, outside of any borders. It's a
shorthand property for all four sides.
Values: auto, length, %
Example 1: <h1 style="border:solid; margin:250px;
background:rgb(221, 53, 81)"> Hello! </h1>
Here, it will set margin for all 4 sides of <h1> element
Example 2: margin: 10px 5px 15px 20px;
Here, margin is set for top, right, bottom, left respectively.
Example 3: margin: 10px 5px 15px;
Here, top margin is 10px, right & left margins are 5px, bottom margin
is 15px.
Example 4: margin: 10px 5px;
Here, top and bottom margins are 10px, right and left margins are
5px.
NOTE: Negative values are allowed.
padding: Defines space between an element's content and its border.
Values: length, %
Example: <h1 style="padding: 25px; background: pink;"> Hello! </h1>
It will set padding for all 4 sides
NOTE: Negative values are not allowed. Different values can be given
to different sides, as used in margin above.
gs/css/pg-6
border: It is a shorthand to set border-width, border-style, and
border-color, which sets the thickness, style and color of an
element's border respectively.
NOTE: border-width, border-style and border-color can also be used
separately.
If you only specify the border property without any style value,
it will make the border invisible.
For example, <p style="border: 15px;"> Hello !</p> will have no
border as style is not mentioned.
To create a visible border, you must specify at least one border-
style value. The border-style property can have from one to four
values (each for different sides). border-width and border-color
are optional.
Values of border-style: dotted, dashed, solid, double, none.
Example: <h1 style="border: dotted"> Hello! </h1>
<h1 style="border: solid, 5px, blue; padding: 15px"> Hello!
</h1>
NOTE: For using different styles for each side. Refer to margin
example.
border-radius: It defines the radius of the element's corners. It is
used to add rounded borders to an element.
Values: length, %
Example: <h1 style="border:solid; border-radius:15px;"> Hello! </h1>
justify-content: It is used to align items horizontally along
the main axis of a flexbox or grid container.
To use it, apply the display property to the parent container element
(which must have display: flex or display: grid).
In a flex container, the flex items are aligned horizontally by
default, which is left to right.
In a grid container, the grid items are aligned in inline direction
by default, which is left to right.
Flex Values: flex-start, flex-end, center, space-between, etc.
Grid values: start, end, center, stretch, space-between, etc.
Example: <head>
<style>
#main {
gs/css/pg-7
display: flex;
justify-content: center;
border: solid 1px;
}
#main div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color: coral">1</div>
</div>
</body>
align-items: It is used to align items vertically along the cross
axis within a flex or grid container.
In a flexbox container, the items are aligned on the cross axis,
which is vertical by default.
In a grid container, the grid items are aligned in the block
direction, which is downward by default.
Flex values: stretch, flex-start, flex-end, center, etc.
Grid values: normal, start, end, center, etc.
Example: <head>
<style>
#container {
display: grid;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div style="background-color: aqua;">BLUE</div>
</div>
</body>
gs/css/pg-8
display: It specifies the display behavior of an element, that is, how
an element is rendered on a webpage and how it interacts with the
surrounding elements.
Values: block, inline, flex, grid, etc.
block: These elements start on a new line and occupy the full
available width of its parent container. They also allow you to set
height, width, padding, and margins on all sides.
Few block level tags - <div>, <p>, <h1> to <h6>
Example:
<div style="display:block; height:100px; background:cyan;"> Hello!
</div>
inline: These elements do not start on a new line and only take up as
much width as its content requires. You cannot set a specific width or
height for them.
Few inline tags - <span>, <a>, <img>
Example:
<div style="display:inline; background: cyan;"> Hello! </div>
flex: This defines a block-level flex container, enabling a one-
dimensional layout model for aligning and distributing space among
flex items.
Example:
<head>
<style>
.container {
display: flex;
justify-content: center; /*main axis -
horizontally*/
align-items: center; /*cross axis -
vertically*/
height: 100px;
background-color: rgb(241, 248, 55);
}
h1{
background-color: #eb7676;
margin: 10px;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="item">1</h1>
<h1 class="item">2</h1>
<h1 class="item">3</h1>
</div>
gs/css/pg-9
</body>
grid: This defines a block-level grid container, allowing for a two-
dimensional layout model with rows and columns, offering precise
control over element placement and sizing.
Example:
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 50px;
}
.item {
background-color: #ee2525;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1 class="item">1</h1>
<h1 class="item">2</h1>
<h1 class="item">3</h1>
</div>
</body>
NOTE: Other than the above ones there are other display values also.
position: Used to control the placement of elements on a webpage. It
determines how an element is positioned within its container and
relative to other elements.
Values: static, relative, absolute, fixed, sticky.
Example:
<h1 style="position: fixed; right: 100px; background: cyan;"> Hello!
</h1>
NOTE: Static is default position and top, right, bottom, and left
properties have no effect on statically positioned elements.
float: Used to position elements to the left or right within their
container, allowing other content to wrap around them.
Values: left, right, etc.
Example:
<p><img src="[Link]" style="float:right; width: 250px;"> Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. </p>
gs/css/pg-10
opacity: Sets the transparency of an element.
Values: Values between 0 (fully transparent) and 1 (fully opaque).
Example: <h1 style="opacity:0.5; background: cyan;"> Hello! </h1>
transform: It applies a 2D or 3D transformation to an element. It
allows to rotate, scale, skew, or translate an element.
Values: translate(x,y), etc.
scale(x,y), etc.
rotate(angle), etc.
skew(ax, ay), etc.
Example:
<h1 style = "transform: rotate(10deg); scale:2; background-
color:cyan; width: 100px; margin: auto;"> Hello! </h1>
visibility: Sets whether an element is visible or not.
Values: visible, hidden, etc.
Example: <h1 style="background-color: red; visibility: hidden">
Hello! </h1>
<h1 style="background-color: red"> Hello! </h1>
overflow: Sets how content is handled when it overflows its
container.
Values: visible, hidden, scroll, or auto.
Example:
<h1 style="width: 100px; height: 170px; overflow: scroll">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
</h1>
NOTE: The overflow property only works for block elements with a
specified height.
z-index: It specifies the stack order of an element (which element
should be placed in front of, or behind, the others).
z-index accepts integer values. Higher values bring elements closer
to the viewer, while lower values push them further back. Negative
values are also allowed.
gs/css/pg-11
Values: Values are integers (e.g., 1, 2, -1).
NOTE: z-index only works on elements having position property and
flex items (elements that are direct children of display: flex
element).
box-shadow: It attaches one or more shadow effect to the edges of an
element.
You can apply multiple shadows by separating them with commas.
The shadow is defined by the X and Y offsets (which position the
shadow), a blur radius, a spread radius, and a color.
By default, the value is set to none, meaning no shadow is applied.
Syntax: box-shadow: h-offset v-offset blur-radius spread-radius
color
NOTE: Here, h-offset and v-offset are compulsory. Other properties
are optional. There are other properties also.
Example: <body>
<h1 style="box-shadow: 5px 10px 18px red">Hello !</h1>
</body>
transition: Transitions are used to create smooth animations between
two states of an element.
It is done by changing CSS properties over a specified duration.
Transitions can animate properties like color, size, and position.
Use selectors and pseudo-classes (e.g., :hover) to trigger
transitions.
Key transition properties include transition-property, transition-
duration, transition-timing-function, and transition-delay.
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.
Syntax: transition: (property name)|(duration)|(timing function)|
(delay);
Example: <head>
gs/css/pg-12
<style>
div{
width: 100px;
height: 100px;
background-color: red;
transition:background-color 2s linear 1s, width 2s
linear 1s;
}
div:hover {
width: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<h1> Hello! </h1>
</div>
</body>
Here, transition is applied to two properties – background-color and
width.
Few CSS Units
CSS units define the size of HTML elements. A whitespace cannot appear
between the number and the unit. However, if the value is 0, the unit
can be omitted.
There are two types of units: Absolute and Relative.
Absolute units
Have fixed values and do not change based on the viewport or parent
elements. Not responsive; sizes remain fixed regardless of screen
size or resolution.
Few Absolute Units: cm(centimeter), mm(millimeter), in(inch),
px(pixel), etc.
NOTE: Pixels (px) are relative to the viewing device. For low-dpi
devices, 1px is one device pixel (dot) of the display. For printers and
high resolution screens 1px implies multiple device pixels.
Relative Units
Relative units are measured in relation to other elements or viewport
of the screen. Highly responsive; adjust dynamically based on window
gs/css/pg-13
size or parent element. These units define lengths relative to other
length properties.
Few Relative Units: em, rem, vw(viewport width), vh(viewport height),
%(percentage), etc.
NOTE: Viewport is the area of the web page in which the content is
visible to the user. Viewport does not have the same size, it varies
with the variation in screen size of the devices on which the website
is visible. For a laptop, the viewport has a larger size as compared
to a smartphone or tablet.
Pseudo-classes
A pseudo-class is used to define a special state of an element.
For example, it can be used to style an element when a user moves the
mouse over it.
Pseudo-class names are not case-sensitive.
Pseudo-classes are identified by a colon (:) after the selector,
followed by the pseudo-class name.
Syntax: selector:pseudo-class {
property: value;
}
Example: <head>
<style>
button:hover {
background-color: lightblue;
color: white;
}
</style>
</head>
<body>
<button> Hover over me! </button>
</body>
Few CSS Pseudo-classes
:hover: Applies styles when the user's mouse pointer hovers over the
element.
:focus: Applies styles when the element has focus, such as when a
form input is selected.
gs/css/pg-14
:active: Applies styles when the element is being activated,
typically when a button is clicked and held.
:visited: Applies styles to links that the user has already visited.
:link: Applies styles to unvisited links.
:first-child: Selects the first child element of its parent.
:nth-child(n): Selects the n-th child element of its parent.
NOTE: a:hover MUST come after a:link and a:visited in the CSS definition
in order to be effective. And a:active MUST come after a:hover in the
CSS definition in order to be effective.
Centering an Image
The most common methods are:
Method 1: Using margin: auto (for block-level images)
In this method, convert the <img> element into a block-level element and
set its margin to auto. Also define a width for the image.
Example:
<head>
<style>
img{
display: block;
margin: auto;
width: 50%; /*Optional: set a width for the image
*/
}
</style>
</head>
<body>
<img src="[Link]" alt="Image">
</body>
NOTE: Can also use margin-left: auto; margin-right: auto; instead of
margin: auto. Also note that this method won’t directly work for
vertical centering.
Method 2: Using text-align: center
As the text-align property works on block-level elements, wrap
your <img> tag within a <div> or a <p> tag.
gs/css/pg-15
Example:
<div style="text-align: center;">
<img src="[Link]" alt="Image" style="width:700px;
height:500px;">
</div>
Method 3: Using Flexbox
Flexbox is a way to center items, both horizontally and vertically. Set
the display property of the container as flex.
Example:
<head>
<style>
.flex-container {
display: flex;
justify-content: center; /*Centers horizontally */
align-items: center; /*Centers vertically*/
}
</style>
</head>
<body>
<div class="flex-container">
<img src="[Link]" alt="Description">
</div>
</body>
Method 4: Using Grid
Using Grid is another way to center items, both horizontally and
vertically. Set the container as grid.
Example:
<head>
<style>
.grid-container {
display: grid;
place-items:center; /*centers both horizontally &
vertically*/
}
</style>
</head>
<body>
<div class="grid-container">
<img src="[Link]" alt="Description">
</div>
</body>
CSS Grid
gs/css/pg-16
Grid
CSS Grid Layout is used to design web layouts with rows and columns.
It makes it easier to design a responsive layout structure, without
using float or positioning.
Real-Life Example
Chessboard: Imagine the website is like a chessboard. Each square on the
board is a space where you can put something, like a picture or text.
With a grid, you can decide which square gets what!
The same way, on a website, we arrange content in rows and columns using
grids.
CSS Grid Components
A grid always consists of:
Grid Container: A grid container contains one or more grid items
arranged in columns and rows. An element becomes a grid container
when its display property is set to grid.
Grid Items: The items inside the container, i.e., the grid.
Few Grid Properties
display: This property sets up the container as a grid.
grid-template-columns: It defines the number of columns in your grid
layout, and it can define the width of each column.
Values: auto, length, percentage, etc.
grid-template-rows: It specifies the number of the rows in a grid
layout, and it can define the height of each row.
Values: auto, length, percentage, etc.
gap: It is used to define the space between rows and columns in a
grid layout.
Values: length, percentage, etc.
If a single value is provided, it applies to both row and column
gaps. If two values are provided, first value sets row gap, and the
second sets column gap.
gs/css/pg-17
It is a shorthand property for the row-gap and the column-gap
properties.
Example 1: gap: 10px 30px; /* Sets 10px gap for rows and 30px
gap for columns*/
Example 2: .grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
}
Here, .grid-container is the class name of <div> element.
grid-template-columns:repeat(3, 1fr) creates three equal columns
(repeat(3, 1fr)), ensuring that the images are distributed evenly
across three columns.
The 'fr' unit stands for "fraction". This unit automatically divides
the available space into fractions. Here, 1fr will take 1 fraction of
the available space for each column.
CSS Flexbox
Flexbox (Flexible Box Layout)
Flexbox is a layout method for arranging items either in rows or
columns.
Flexbox makes it easier to design a flexible responsive layout
structure, without using float or positioning.
It aligns items efficiently, distributing space within a container,
even when their sizes are dynamic or unknown.
Real-Life Examples
Packing a Suitcase: Imagine you’re packing a suitcase. Flexbox helps
decide how much space each item (your clothes, shoes, and books) will
take. You can push some items to one side or let them stretch to fill
the empty spaces.
Flexbox vs. Grid
Flexbox should be used for one-dimensional layout, either with rows
OR columns.
Grid should be used for two-dimensional layout, with rows AND columns
both.
CSS Flexbox Components
gs/css/pg-18
A flexbox always consists of:
Flex Container: The parent (container) <div> element. It holds all
the items you want to arrange.
Flex Items: These are the contents (items) inside the container.
(e.g., your blog posts, images, etc.). By default, flexbox items are
arranged in a row.
Few Flex Properties
flex-direction: It specifies the direction of the main axis in a flex
container. Row is the default value i.e., items are placed side by
side horizontally.
Values: row, column, row-reverse, column-reverse
flex-wrap: It specifies whether the flex items should wrap or not, if
there is not enough room for them on one flex line.
Values: nowrap, wrap, wrap-reverse
flex-flow: It is a shorthand property for setting both the flex-
direction and flex-wrap properties.
min-height: It sets the minimum height of an element. It prevents the
element's height from becoming smaller than the specified value. If
the content inside the element exceeds the min-height, the element
will expand to accommodate it.
Values: length in px, vh, etc.
flex-grow: It specifies how much the item will grow relative to the
rest of the flex items inside the same container.
Values: number (default is 0)
Example:<head>
<style>
.flex-container {
display: flex;
background-color: rgba(40, 192, 219, 0.48);
padding: 10px;
}
.flex-item {
background-color: #4c58af;
color: white;
margin: 5px;
padding: 20px;
text-align: center;
flex: 1;
}
gs/css/pg-19
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
Gradient Colors
Gradient color allows for smooth transitions between two or more colors.
Gradients require at least two color stops. These are the colors you
want to transition between. You can add more color stops to create
complex gradients.
Types of Gradients
Linear Gradient: The colors blend in a straight direction. Direction can
be specified (top to bottom, left to right, diagonal, or an angle). If
no direction is specified, the default transition is top to bottom.
Syntax: background-image:linear-gradient(direction,color-stop1,color-
stop2,..);
Example 1:
<body style="background-image: linear-gradient(to right, red, orange,
yellow, green, blue, indigo, violet);"> RAINBOW COLORS! </body>
Example 2:
<body style="background: linear-gradient(45deg, red, yellow)"> HELLO!
</body>
Radial Gradient: The colors radiate from a central point, creating a
circular or elliptical blend. That is, it starts from center and goes to
[Link] can define the shape (circle or ellipse), size, and position
of the gradient. By default shape is ellipse, size is farthest-corner,
and position is center.
Syntax: background-image: radial-gradient(shape size position start-
color, ..., last-color);
Example 1:
<body style="background-image:radial-gradient(red, yellow, cyan);">
HELLO! </body>
gs/css/pg-20
Here, it will take default values for shape, size, position.
Example 2:
<body style="background-image: radial-gradient(circle closest-side at
70%, red, yellow);">HELLO !</body>
Conic Gradient: A conic gradient is a gradient with color transitions
rotated around a center point. By default, angle is 0deg and position is
center. If no degree is specified, the colors will be spread equally
around center point.
Syntax:
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
Example 1:
<div style="height: 200px; width: 200px; background-image: conic-
gradient(red, yellow, green, blue, black); border-radius: 50%;"> </div>
Example 2:
<body style="background-image: conic-gradient(red 45deg, yellow 90deg,
cyan 210deg);">HELLO !</body>
Importing Custom Fonts
Importing Custom Fonts
To use a custom font, import a font from Google Fonts or any external
source into the CSS file.
The @import rule or <link> tag will be added in the <head> section of
the HTML document.
After importing the font, you can apply it to any element using the
font-family property in your CSS.
Example:
<html>
<head>
<link href="[Link]
family=Edu+NSW+ACT+Hand+Pre:wght@400..700&display=swap"
rel="stylesheet" />
<style>
h1 {
font-family: "Edu NSW ACT Hand Pre";
font-style: normal;
font-weight: 200;
}
gs/css/pg-21
</style>
</head>
<body>
<h1> Importing fonts from google fonts using <link> tag </h1>
</body>
</html>
-------------------------------------
x----------------------------------------
gs/css/pg-22