What is CSS?

Cascading style sheets (CSS) is a sort of web language that is used to design the layout of a
website. It's a term for describing how a document looks and is formatted, encompassing
features like the layout, colors, and fonts. It's commonly used to style HTML-based web
pages; nowadays, every web page employs CSS because it's so simple to use and the code
is so dependable.

Why should CSS be used?

CSS allows the user to focus on one thing at a time, allowing them to focus on the
appearance and structuring. The division can improve content accessibility and provide
programmers more flexibility. CSS can also be used to control the layout of a website,
reducing the size, clutter, and load time of online pages. Also, without CSS, a webpage can
become cluttered with codes that the user won't understand, slowing down the website's
performance; therefore, CSS can help enhance the website's performance.

CSS properties

1. Display

There are numerous potential values for display, but only four are most usually utilized.

- block: Stylesheets in browsers set several HTML elements to this display mode. <div>,
<ul>, and text blocks like <p> are among them. By default, block-level elements take up
as much space as possible, and they cannot be displayed on the same horizontal line as
other display modes, such as other block elements. (Unless they are floated, that is.)

Block elements allow you to customize the element's width and height, which is why they're
commonly employed in layouts.

-inline: The inline mode tightly wraps several HTML elements around them and is the
default for all elements with no other display values set. On the same line as inline
elements, elements can be inserted side by side. Consider the <strong> tag, which makes
elements bold, the <em> tag, which makes italics, and the <a> tag, which allows you to
link to other websites. Inline elements include all of the above. The width and height of an
inline element cannot be changed.

inline-block: This is a single display value that incorporates both block and inline element
characteristics. You can customize the element's height and width, and it can be placed on
the same horizontal line as other elements.

-none: The element is hidden from the website and isn't visible. Additional options display
when you hover over navigation menus in CSS Dropdown menus. The logic is that items are
initially given a display value of none, which is then changed to block when the user hovers
over them.

2. Width and Hight: When designing a website, the width and height attributes are used in
conjunction with display: block and display: inline to set the width and height of HTML
elements. The following are common width and height units:

> px – Pixels

>em- A measuring unit in which 1 em equals the current font size.

>rem- Same measurement as them, but without the inheritance issue, it makes life much
easier.

> %- percentages

>auto-I'll explain why this unit is so useful below.

When creating responsive websites, characteristics like max-width, min-width, max-height,

and min-height become quite useful. One example of how auto and max-width can be used
to ensure that images fit securely and snugly into available space is as follows:

Img{

Max-width: 100%

height:auto:}

3.Margin and Padding

Things that will undoubtedly occur are margins and paddings. Understanding how these
things function will come in handy while writing CSS.
The spacing between items on your website are determined by margins and paddings. They
are quite comparable and use the same units as the previously described Width and Height.

The only distinction between margins and paddings is the area over which they exert
control. Paddings influence areas within borders, whereas margins affect areas outside of
borders. The following box model can be helpful:

In most cases, margins are written as follows:

div{

margin-top: 20px;

margin-bottom: 20px;

margin-right: 10px;

margin-left: 10px

They can be written in shorthand to make the lines of codes easier to read and understand.
Shorthands are usual practice, and you should be familiar with them. Here's a basic
rundown:

div{

margin: 20px 10px 20px 10px;

 /* This shorthand refers to TOP, Right, Bottom, Left. Its easier to picture a clock at 12, 3,
6 and 9 respectively */

margin: 20px 10px 20px;

/* This refers to Top, Left and Right, Bottom */

margin: 20px 10px;

/* This refers to Top and Bottom, Left and Right */

margin: 20px;

/* This refers to 20px worth of margin on all 4 sides */

-Extra tip : To center an element with a display value of block, utilize auto margins on the
left and right. It is written as follows:

div {

margin: 0 auto;

4. Border

Borders, well, they're just that. I'm guessing you don't need me to explain what borders
are.

You must look after three different properties of borders:

> border-width -the border's width and height are measured in the same units.

> border-style - the border's design The most common values are solid and dashed.

> border-color -The border's color It is possible to utilize both hex and RGB values.

You could declare the boundary shorthand in this way instead of writing the full version:

Borders, like margins and paddings, refer to all four sides. If you simply want to apply
borders to one or two sides, I recommend using border-top, border-bottom, border-left, or
border-right.
div{

border: 1px solid black;

/* border width, style and color */

5. Floats

Floats are an essential component of today's website. If your browser window is larger than
800px and you see two columns of text side by side, a sidebar / content combination like
what you see on my site, you've noticed floats in action. Navigation objects are another
popular usage for floats.

In a nutshell, float merely positions the targeted HTML content's edge at the edge of one of
the parent container's sides. The edge of your initial floated content will be used for
subsequent floats. 

Floats have three basic qualities that you may see frequently:

> Left

> Right

> none - Removes the float

6. Clearing Floats

Floats are quite handy, but if they are not removed properly, they can become a headache.
Two types of issues can arise in general:
There are three major ways to get rid of floats:

-clear: The Clear property accepts three arguments. Right, left, or both Clear: left; clears
any floats on the left side, clear: right; clears floats on the right side, and clear: both; clears
all floats elements, as you would have guessed.

-overflow: hidden To counteract the problem, overflow: hidden; is applied to the parent
element.

- clearfix: Clearfix has most likely been mentioned in tutorials. It's also set to the parent
element to avoid float issues. Because there is content following the floats, the clearfix hack
forces the parent element to self-clear.

7. Color
The term "color" refers to the appearance of the text. As with border colors, it is assigned a
#hex or RGB value.

8. Background

The HTML element's background is referred to as the backdrop. Background, like many
other CSS properties, has a shortcut.

From left to right, these are the explanations for the background properties:

>background-color: The backdrop color. It accepts a #hex or a RGB value.

> background-image: URL(URI). Takes your image's route. If the image is in the same
folder, follow the instructions above.

Just type the file name before the image.png to go down one folder. css/image.png, for
instance.

Type the file name with ".../" to go up to one folder. .../css/image.png is a good example.

>background- repeat: If the width exceeds the background size if you want the
background to repeat. Repeat, repeat-x, and repeat-y are some of the other options.

>background-position: The background's location with relation to the HTML element. X

and Y are the two values required here, with X representing the amount of offset from the
left and Y representing the amount of offset from the top. Takes unit values (like width and
height) or left, center, right and top, center, bottom for left and right, respectively.

body {

background :transparent image-URL('image.png') left top no-repeat;

/* All background definitions are an option, but at least one must be stated. The above
are default values given to the background if you have left anything undefined */

9. Font

Fonts refer to the appearance of text on your website in general. There are a couple of
things to keep an eye out for. Font, like all other attributes, has a shorthand. It's worth
noting that the font shorthand declaration appears only once in the entire CSS file. In other
situations, the varied qualities are commonly used:
From left to right, below are the explanations for the font properties:

>Font-style: The font's style. Italic or normal values are both acceptable. The default is
normal. Font shorthand has an optional property.

>Font-variant: a typeface variation Normal and tiny caps are acceptable values. The
default is normal. This is an optional property in font shorthand that is rarely utilized.

>Font-weight: Font size and weight decides whether or not text is bold. Normal, bold,
bolder, or 100-900 are all suitable values. Font shorthand has an optional property.

> Font size: the font size Takes the same value as width and height.

>line-height: decides how much space is available above and below the text. Good
readability is critical. It accepts the same values as font as well as a unitless value. When a
unitless value is specified, the line height is a multiple of the value.

>font-family: You can use this field to indicate your preferred typefaces and font stack.

body {

font: italic small-caps bold 20px/1.5 "Proxima Nova", helvetica, arial, sans-serif;

/* font shorthand */

That's it. The 9 CSS properties listed above are the ones you must be familiar with. Now all
you have to do is save this page as a backup in case you forget any of the important CSS
properties.