Complete Alphabetic List of CSS Properties and Their Values with Explanations

Description:

This post will cover CSS properties and their values. Before reading this blog, it is highly recommended that you are familiar with CSS Colors, CSS Units and Basics of CSS. Another prerequisite is that you must have basic knowledge of HTML to learn CSS.

CSS properties and their values make up about 80% of the CSS language. We will learn a complete website development and design after completing this course.

The Table of content is given below

Introduction
Explain in Details
Final Lines

Headlines.

We have already learned the basics of CSS. CSS colors and units as mentioned above. So focus again, CSS is just a "styling language". So the look, responsiveness and style of the entire website is covered by CSS. To do this, first we select an HTML element (tag) then we add a CSS property and value to style it. What is a CSS selector, what is a CSS property and what is the value of properties are explained in the previous post.

Explain in Details.

We will use a div tag and inline-css here so that we don't have to select html tag by class or id each time. CSS using methods explanation can be found in "basics of css" Post.

Background

CSS has five background properties such as background-attachment, background-color, background-image, background-repeat and background-position. We could also use just one property 'background' to cover the above five properties but this explanation would become long. So we will learn about CSS background in a separate post. Now the example is given below.


 <div style="
    background: red;
 ">This is example div</div>

This is example div

Border

The border property is used to define the border of an element. It has many other properties and values which will be explained in detail later. An example of this is as follows.


 <div style="
    background: red;
    border: 2px solid aqua;
 ">This is example div</div>

This is example div

Bottom

The bottom property is used along with other CSS properties, which we will explain later.

Color

Color is already explained in css color post . The example is as follows.


 <div style="
    background: red;
    color: blue;
 ">This is example div</div>

This is example div

Cursor

The cursor property specifies whether or how to display the mouse cursor when pointing to an element. There are many values of cursor property. Hover the mouse to check result. The example is as follows.


 <div style="
    background: red;
    cursor: alias;
 ">This is example alias</div>

 <div style="
    background: red;
    cursor: all-scroll;
 ">This is example div</div>

 <div style="
    background: red;
    cursor: auto;
 ">This is example auto</div>

 <div style="
    background: red;
    cursor: cell;
 ">This is example cell</div>

 <div style="
    background: red;
    cursor: zoom-out;
 ">This is example zoom-out</div>

 <div style="
    background: red;
    cursor: col-resize;
 ">This is example col-resize</div>

 <div style="
    background: red;
    cursor: context-menu;
 ">This is example context-menu</div>

 <div style="
    background: red;
    cursor: copy;
 ">This is example copy</div>

 <div style="
    background: red;
    cursor: crosshair;
 ">This is example crosshair</div>

 <div style="
    background: red;
    cursor: default;
 ">This is example default</div>

 <div style="
    background: red;
    cursor: e-resize;
 ">This is example e-resize</div>

 <div style="
    background: red;
    cursor: ew-resize;
 ">This is example ew-resize</div>

 <div style="
    background: red;
    cursor: grab;
 ">This is example grab</div>

 <div style="
    background: red;
    cursor: grabbing;
 ">This is example grabbing</div>

 <div style="
    background: red;
    cursor: help;
 ">This is example help</div>

 <div style="
    background: red;
    cursor: move;
 ">This is example move</div>

 <div style="
    background: red;
    cursor: n-resize;
 ">This is example n-resize</div>

 <div style="
    background: red;
    cursor: ne-resize;
 ">This is example ne-resize</div>

 <div style="
    background: red;
    cursor: nesw-resize;
 ">This is example nesw-resize</div>

 <div style="
    background: red;
    cursor: pointer;
 ">This is example pointer</div>

 <div style="
    background: red;
    cursor: progress;
 ">This is example progress</div>

 <div style="
    background: red;
    cursor: no-drop;
 ">This is example no-drop</div>

 <div style="
    background: red;
    cursor: none;
 ">This is example none</div>

 <div style="
    background: red;
    cursor: not-allowed;
 ">This is example not-allowed</div>

 <div style="
    background: red;
    cursor: ns-resize;
 ">This is example n-resize</div>

 <div style="
    background: red;
    cursor: ns-resize;
 ">This is example n-resize</div>

 <div style="
    background: red;
    cursor: nw-resize;
 ">This is example nw-resize</div>

 <div style="
    background: red;
    cursor: nwse-resize;
 ">This is example nwse-resize</div>

 <div style="
    background: red;
    cursor: row-resize;
 ">This is example row-resize</div>

 <div style="
    background: red;
    cursor: s-resize;
 ">This is example s-resize</div>

 <div style="
    background: red;
    cursor: se-resize;
 ">This is example se-resize</div>

 <div style="
    background: red;
    cursor: sw-resize;
 ">This is example sw-resize</div>

 <div style="
    background: red;
    cursor: text;
 ">This is example text</div>

 <div style="
    background: red;
    cursor: vertical-text;
 ">This is example vertical-text</div>

 <div style="
    background: red;
    cursor: w-resize;
 ">This is example w-resize</div>

 <div style="
    background: red;
    cursor: wait;
 ">This is example wait</div>

 <div style="
    background: red;
    cursor: zoom-in;
 ">This is example zoom-in</div>

This is example alias

This is example div

This is example auto

This is example cell

This is example zoom-out

This is example col-resize

This is example context-menu

This is example copy

This is example crosshair

This is example default

This is example e-resize

This is example ew-resize

This is example grab

This is example grabbing

This is example help

This is example move

This is example n-resize

This is example ne-resize

This is example nesw-resize

This is example pointer

This is example progress

This is example no-drop

This is example none

This is example not-allowed

This is example n-resize

This is example nw-resize

This is example nwse-resize

This is example row-resize

This is example s-resize

This is example se-resize

This is example sw-resize

This is example text

This is example vertical-text

This is example w-resize

This is example wait

This is example zoom-in

Content

Content property is used with pseudo-elements. We will learn pseudo-elements incoming posts.

Clear

The "clear" property controls the forward flow of floated elements. The "clear" property specifies what should happen to the element that is with a floating element. The example is as follows.


 <div style="
    background: red;
    float: left;
 ">This is example div 01</div>
 <div style="
    background: red;
    clear: left;
 ">This is example div 02</div>

This is example div 01

This is example div 02

In the above example we used two properties like 'floaat' and 'clear'. Next we will define 'float' but for now this is just an example. You may not understand it yet, but don't worry. Everything will be fine at the end of this course.

Direction

CSS direction property define the direction of content of an element. It has two property like "ltr" stands for left-to-right and "rtl" stands for right-to-left. The example is as follows.


 <div style="
    background: red;
    direction: ltr;
 ">This is example ltr</div>
 <div style="
    background: red;
    direction: rtl;
 ">This is example rtl</div>

This is example ltr

This is example rtl

Display

CSS display property is very popular, useful and important. It also has many values which can be explained in a separate post. The example is as follows.


 <div style="
    background: red;
    display: none; /* fully disappeared from display */
 ">This is example div</div>

Font

CSS font property is used to set text(font) color, style, face etc. This Property can be described separately. The example is as follows.


 <div style="
    background: red;
    font-family: cursive;
    font-style: italic;
 ">This is example div</div>

This is example div

Height

The CSS height property defines the height (vertical length) of any HTML elements. Its value can be in different units as explained in the css unites post. The example is as follows.


 <div style="
    background: red;
    height: 20px;
 ">This is example div</div>

This is example div

Left

The left property is used along with other CSS properties, which we will explain later.

Line Height

The CSS line-height property specifies the vertical length (height) of each line of an element. The example is as follows.


 <div style="
    background: red;
    line-height: 10px;
 ">This is example 1 line first
   <br>
   This is example 1 line second</div>
 <br>
 <div style="
    background: black;
    line-height: 30px;
    color: white;
 ">This is example 2 line first
   <br>
   This is example 2 line second</div>

This is example 1 line first
This is example 1 line second

This is example 2 line first
This is example 2 line second

Letter Spacing

CSS letter-spacing specifics space (distance) between each alphabet of a word. The example is as follows.


 <div style="
    background: red;
    letter-spacing: 0px;
 ">This is example of 0px (0 = normal in this case) letter-spacing</div>
 <br>
 <div style="
    background: red;
    letter-spacing: 10px;
 ">This is example of 0px letter-spacing</div>

This is example of 0px (0 = normal in this case) letter-spacing

This is example of 10px letter-spacing

List Style

list-style Specifies a list with different styles. It also has other properties and will be detailed later.

Margin

The CSS margin property creates space around (outside) an element. We use it when we want to keep two elements away from each other. The example is as follows.


 <div style="
    background: red;
    margin: 10px;
 ">This is example div</div>

This is example div

Look at the red block above. It is more inside than the other. Because the margin adds space around the red block and so the red block is away from the walls of the parent box.

There are four properties of margin. We will discus them later in details.

Max and Min

CSS max-property stands for maximum and min-property for minimum. These are prefixes of width and height like height max-width. We use them with responsive values like auto, 100%, -webkit-fill-available, max-content or min-content. The example is as follows.


 <div style="
    background: red;
    width: auto;
    max-width: 400px;
    min-width: 200px;
 ">This is example div</div>

This is example div

Outline

An outline is a line drawn around elements, outside the borders, to make the element "stand out". It also has multiple properties and values so that will be explained later. The example is as follows.


 <div style="
    background: red;
    border: 2px black solid;
    outline: 5px ridge cyan;
 ">This is example div</div>

This is example div

Overflow

The overflow property define how overflowed content should be printed. It has multi-values. We will explain it later. The example is as follows.


 <div style="
    background: red;
    padding: 5px;
    max-width: 300px;
    max-height: 300px;
    overflow: auto; /* auto will add scrollbar if content overflowed */
 ">
<h2>What is Mr. Downloader and how it works?</h2>
Mr. Downloader is a completely free tool for downloading (extracting) videos from YouTube.. There are many tools available for downloading YouTube videos but those tools cannot handle all YouTube videos. Our Tools is the first tool that allows you to download all YouTube videos in multiple ways as Direct (force to Download), Converted (Other videos or audio formates) and Backup (Orignal server Provided link) downloading options. It is highly recommended to know about the downloading options mentioned above before starting to use this tool. First copy the correct video link of any YouTube and paste it in the input field, then the URL will be processed and the result will be displayed. Once the download links appear, you can download the videos according to the guide below.</div>

What is Mr. Downloader and how it works?

Mr. Downloader is a completely free tool for downloading (extracting) videos from YouTube.. There are many tools available for downloading YouTube videos but those tools cannot handle all YouTube videos. Our Tools is the first tool that allows you to download all YouTube videos in multiple ways as Direct (force to Download), Converted (Other videos or audio formates) and Backup (Orignal server Provided link) downloading options. It is highly recommended to know about the downloading options mentioned above before starting to use this tool. First copy the correct video link of any YouTube and paste it in the input field, then the URL will be processed and the result will be displayed. Once the download links appear, you can download the videos according to the guide below.

Padding

The CSS padding property is similar to the margin property. The main difference between these properties is that margin adds space outside the element while padding adds space inside the element. We will discuss both in detail later.

Position

The position property is an important CSS property. It defines the positioning behavior of an element. The position property has five positioning methods such as absolute, fix, relative, static and sticky. It has some interesting features. We will discuss it in coming posts.

Resize

The resize property is used to define whether or not a element resizable by user. The example is as follows.


 <div style="
    background: red;
 ">This is example div and it cannot be resized...</div>
<br>
 <div style="
    background: red;
    resize: auto;
    overflow: auto;
">This is example div and it can be resized because of CSS Resize property...</div>

This is example div and it cannot be resized...

This is example div and it can be resized because of CSS Resize property...

This property required the overflow property to work for all html elements, except the 'textarea' element which by default has a resize property of 'auto' however you can prevent it from resizing with ' resize: none' can be specified. This property has these values none, both, horizontal, vertical.

Right

The right property is used along with other CSS properties, which we will explain later.

Text-align

The Text-align CSS property sets the horizontal alignment of inline content such as text and images within its parent block element, such as a heading or paragraph. The example is as follows.


 <div style="
    background: red;
    text-align: center; 
">This is example div</div>

This is example div

Its has these values left, right, center, justify.

Text-decoration

This property is used to decorate texts. It also has other properties and values and will be studied later. The example is as follows.


 <div style="
    background: red;
    text-decoration: underline; 
">This is example div</div>

This is example div

Text-indent

The text-indent CSS property specifies the indentation in the first line of text within an element. It can be define as length or percentage. The example is as follows.


 <div style="
    background: red;
    text-indent: 80px;
">This is example div</div>
            
 <div style="
    background: red;
    text-indent: 50%;
">This is example div</div>

This is example div

Text- Property has other related properties too like text-justify, text-overflow, text-shadow and text-transform. We will discuss these later.

Top

The top property is used along with other CSS properties, which we will explain later..

Transform

The Transform CSS property applies a transformation to an element in 2D or 3D space such as translate, rotate, scale, etc. It is a long topic and some complicated but very important. We will be discussed later with fresh mind.

Transition

The transition property is also an interesting property and has some other properties and values, so it will be studied in detail later. The example is as follows.


 <style>
.div-trans-test{
    background: red;
    transition: linear 1s;
}
.div-trans-test:hover{
    background: white;
}
</style>
<div class="div-trans-test">This is example div</div>

This is example div

Move cursor on above example div and check how transition work.

Vertical-align

This vertical-align CSS property controls the vertical alignment of boxes created by inline-level elements (typically text and images). This property is very use full for special text and icon rendering. It will be discussed in detail later. The example is as follows.


 <div style="
    background: red;
 ">This is example div
    <span style="vertical-align: super;">SupExample</span>
 </div>

This is example div SupExample

It has these values baseline, sub, super, top, text-top, middle, bottom, text-bottom, length (as 50px) and percentage (as 5%).

Visibility

The visibility CSS property specifies whether an element is visible on screen or not. This is whether boxes created by an element are rendered or not. Its has three values like visible, hidden and collapse.

White-space

The white-space CSS property specifies how whitespace such as spaces, tabs, and newline characters are handled within elements. Will be explained later.

Width

The width CSS property defines the width of an element's content area. This content does not include padding, borders or margins. It can be define in units. The example is as follows.


 <div style="
    background: red;
    width: 80%; 
">This is example div</div>

This is example div

Word-break

This property define how words will be break at end of line or how words will jumped to next line. It has four values as normal (default), keep-all, break-all and break-word. The examples are as follows.


 <div style="
    background: red;
    word-break: keep-all;
">It is list of 5 longest word of English: Pneumonoultramicroscopicsilicovolcanoconiosis, Hippopotomonstrosesquippedaliophobia, Floccinaucinihilipilification, Incomprehensibility and Xenotransplantation</div>

It is list of 5 longest word of English: Pneumonoultramicroscopicsilicovolcanoconiosis, Hippopotomonstrosesquippedaliophobia, Floccinaucinihilipilification, Incomprehensibility and Xenotransplantation


 <div style="
    background: red;
    word-break: break-all;
">It is list of 5 longest word of English: Pneumonoultramicroscopicsilicovolcanoconiosis, Hippopotomonstrosesquippedaliophobia, Floccinaucinihilipilification, Incomprehensibility and Xenotransplantation</div>


 <div style="
    background: red;
    word-break: break-word;
">It is list of 5 longest word of English: Pneumonoultramicroscopicsilicovolcanoconiosis, Hippopotomonstrosesquippedaliophobia, Floccinaucinihilipilification, Incomprehensibility and Xenotransplantation</div>

Word-spacing

The word-spacing CSS property sets the spacing between words in text content. It is similar to letter spacing except that it increases or decreases the spaces between words which is indicated by its name 'word-spacing'.

Word-wrap

The word-wrap has two values as normal which is default and second is break-word which is similar to to word-break: break-all;.

z-index

The z-index property specifies the stacking and layering order of an element. An element with a higher z-index is always in front of an element with a lower z-index. It only works with relative, fixed, absolute or sticky value of css property 'position' and with direct flex items (with 'flex' value of css 'display' property as display: flex;). Without using z-index on positional elements, the last read element will overlap on top.

Final Lines.

We have reviewed all CSS properties and studied some of them and some properties marked as "to be studied or discussed later" means that these Properties have a large scope and can be explained separately from this article. We will study these abandoned properties one by one in detail in upcoming posts.

Posted by Mnzr chauhan

««« Thanks again for reading our blog. If you have any questions, feel free to ask. Your support is enough for us to share this post with your friends. And a good comment for our hard work. »»»

Thank you ツ

Loading...Please wait.

Complete Alphabetic List of CSS Properties and Their Values with Explanations

Description:

Headlines.

Explain in Details.

Background

Border

Bottom

Color

Cursor

Content

Clear

Direction

Display

Font

Height

Left

Line Height

Letter Spacing

List Style

Margin

Max and Min

Outline

Overflow

What is Mr. Downloader and how it works?

Padding

Position

Resize

Right

Text-align

Text-decoration

Text-indent

Top

Transform

Transition

Vertical-align

Visibility

White-space

Width

Word-break

Word-spacing

Word-wrap

z-index

Final Lines.

Posted by Mnzr chauhan

Post a Comment

0 Comments

Translate

Searches

Popular Posts

Official Page...

Labels

Contact Form

Loading...
Please wait.