What i s CSS?

CSS i s a language that we use to style an HTML document.

It describes how elements will be displayed.
CSS stands for Cascading Style Sheets. CSS files are stored with . css extension.
CSS f i l es can be used in three ways Inline CSS, Internal CSS and External CSS.

Why CSS?
CSS saves a lot of t ime and work.
Using CSS we can apply write once use many t imes approache.
We can easily change the style of multiple elements by changing the style in the
stylesheet.
We can create s ingle style sheet and can use on multiple HTML documents.
I t i s used to design the layout of HTML document.

How t o add CSS i n HTML?

We can add CSS in three ways: Inline CSS, Internal CSS and External CSS
Inline CSS written in the opening tag in HTML by using style attribute.
Internal CSS i s written in the head tag of HTML by using style tag.
External CSS i s written in the external f i l e with . css extension.
I t i s used to display the data or content on the web browser.

Types o f CSS
There are mainly three types of CSS, Inline CSS, Internal CSS and External CSS.
Inline CSS written in the opening tag in HTML by using style attribute and we can
write our CSS for every element of HTML.
Internal CSS is written in the head tag of HTML by using style tag. This
stylesheet i s included in the HTML f i l e.
External CSS is written in the external file with . css extension. And this i s
almost the same as Internal CSS but this is a different CSS f i l e.

Font & Text Properties

Font properties are used to add different styles on the fonts.
Font properties are used to change the style, s i ze, weight, etc. of the font.
Font styling adds a good impact on thereaders, that' s why we use different font
styling properties.
Text properties are used to format text styles.

Different font-properties
[font-style ,font-variant ,font-weight ,font-size/line-height ,font-family]

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text.
It is also important to choose the correct color and text size for the font.

font- family
font- family property is used to specify the font of a text.
In CSS there are five generic font families:
Serif fonts have a small stroke at the edges of each letter. They create a sense of
formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They create a modern
and minimalistic look.
Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.
Cursive fonts imitate human handwriting.
Fantasy fonts are decorative/playful fonts.

font- size
font- s i ze property i s used to specify the s i ze of text.
Being able to manage the text size is important in web design. However, you should
not use font size adjustments to make paragraphs look like headings, or headings
look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs.

font- weight
font- weight property set, how bold or thin character in the text should be
displayed.
font-weight property values are bold , normal , thin ,300 ,800 ,500 etc..

line- height
The l ine- height property specifies the space between the fonts.

font-style

The font-style property is mostly used to specify italic text.

This property has three values:

normal - The text is shown normally

italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)

Font Variant:
The font-variant property specifies whether or not a text should be displayed in a
small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters.
However, the converted uppercase letters appears in a smaller font size than the
original uppercase letters in the text.

Small-caps
normal

Font Shorthand method:

The font property is a shorthand property for:
font-style
font-variant
font-weight
font-size/line-height
font-family
Note: The font-size and font-family values are required. If one of the other values
is missing, their default value are used.

Different text- properties

Color
color property i s used to set the color of the text.

Background- color
This property i s used to set the background- color on the text.
Text- align & text-align-last

text- al ign property i s used to set the alignment of a text. We can al ign a text
in l eft, r ight, center, and justify.
The text-align-last property specifies how to align the last line of a text.

Text- transform
text- transform property i s used to specify uppercase and lowercase, and
capitalize letters in a text.

Text- decoration
text- decoration properties are used to decorate text in one declaration
Text-decoration-line : property is used to add a decoration line to text
Text-decoration-color : property is used to set the color of the decoration line.
Text-decoration-style :property is used to set the style of the decoration line.
Text-decoration-thickness:property is used to set the thickness of the decoration
line.
Text-decoration:The text-decoration property is a shorthand property for:
text-decoration-line (required)text- decoration-color (optional text-decoration-
style (optional) text-decoration-thickness (optional)

Word- spacing
word- spacing property i s used to specify the space between the words in a text.

Text- shadow
text- shadow property i s used to add the the shadow effect to the text

colors:
As the name defines colors are used to set the colors on the text.
In CSS basically, we can set colors in four types of value: color by name, color by
RGB and RGBA value, and color by HEX value & HSL & HSLA colors

Color by name:
In this CSS color property, we will use the color name to set color on the text.
In this we can use predefined color names like: red, green, blue, purple, orange,
etc.

Color by RGB &RGBA

In this color property we will use RGB value to set the color.
RGB color value represents RED, GREEN, and BLUE. And rgb value can be from 0 to 255
.
We can set rgb value by using this: rgb( red, green, blue)
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.

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):

Color by HEX
In this color property, we will use HEX value to set the color.
HEX defines the hexadecimal value of the color and we can set using # r rggbb or #
000000 .
In rrggbb, rr for Red, gg for green and bb for blue. OR we can also use these
values f rom 0 to 255 .

Color by hsl & hsla

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
color.
Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is
white