Complete CSS Idea and Explanation 2024

CSS

CSS stands for Cascading Style Sheets. CSS is working as design instruction for a webpage. That means we can design a webpage with CSS. Here design means, like color, font size, font family or decide where the page element is showing, how showing, or even hide an element. 

CSS can be used in three ways

Inline CSS

Inline CSS means, we style the html element inside the html tag with style attribute. 

Inline CSS is most prioritized compared to internal and external CSS. 

Example:

<h2 style=”color:red;”> This is the line </h2>

Then output will be:

Internal CSS

Internal CSS is inside the html file. It’s wrapped with a style tag, and this style tag is ideally written inside the head tag. And internal CSS has higher priority compared to external CSS, but less priority than inline CSS. Let’s see example of internal CSS:

    <style>

        h2{

            font-size: 40px;

        }

    </style>

Then output will be:

External CSS

External CSS file is most widely used compared to inline and internal CSS. In the external file CSS system, an extra file is created. The external file extension is css and generally it’s name is style. So the file name with extension should be like this “style.css”. This external file is linked with the html file with a link tag.

The link tag should like this “<link rel=”stylesheet” href=”style.css”>”

’

The href attribute contains the source location of the external file. Here style.css in the root location that’s why it’s directly added. 

This external CSS priority is most low, but it’s use mostly because all CSS are contained in one CSS file, that’s why it’s easy to handle/modify.

Let’s know about CSS rules now:

For doing CSS two type rules basically. For inline CSS, we not need to select a selector, we just put the CSS inside the tag with this format:

<tag style=”property:value;property:value;”>

For internal and external CSS rules are the same. We need to select a selector and add the CSS for the selector. Let’s see:

Selector{

property:value;

}

Here selector can be a tag, class, id or anything on html element. And property is which value I want to change, then value is the change parameter.

Like my selector is h2 tag, and I want to change font size, then my property is font-size, and value is how much size I want, like here I want font size will be 20px.

Then the CSS will be:

      h2{

            font-size: 20px;

        }

This rule use in both internal and external system inside.

Now here i discuss some important property and value, also there output.

CSS Comment:

For comment in CSS, we use this syntax:

/*

Comment here

*/

CSS Color:

color: red;  /*It’s change the text color, here text color will be red*/

background-color: red;  /*It’s change the background color*/

Color can be used in 3 ways, RGB, HEXA and HSL mode. Most of the time HEXA code is used. Also for special cases RGBA and RGB are used. But the HSL format is not popular.

Example:

HEX format #ffffff.

RGB format rgb(255, 99, 71)

RGBA format rgba(255, 99, 71, 0.5)
HSL format hsl(0, 100%, 50%)

CSS Border :

For making a border we can use border properties:

border: 1px solid #000; 

/*Here 1px is the border width, border style solid, color is #000*/

There are different border style, like:

dotted – dotted border

dashed – dashed border

solid – solid border

double – double border

groove – grooved border. The effect depends on the border-color value

ridge – 3D ridged border. The effect depends on the border-color value

inset – 3D inset border. The effect depends on the border-color value

outset – 3D outset border. The effect depends on the border-color value

none – no border

hidden – hidden border

Border can be circle with border-radius property. Example:

border-radius: 5px;

CSS Backgrounds:

For giving background in any html element, CSS Background property is used. 

There are several background property, like – 

background-color

background-image

background-repeat

background-attachment

background-position

background

If I want to give a color as background , then the property like be –

background-color: #000;

If want to give image as background, then

background-image: url(source);

For control background repeat –

background-repeat: repeat-x; //for horizontal repeat control

background-repeat: repeat-y; //for vertical repeat control

background-repeat: no-repeat;  //for off repeat 

For background attachment scroll/fixed type:

background-attachment: scroll;

background-attachment: fixed;

For image position in background image:

background-position: center;

background-position: left;

background-position: right;

Only background property is shorthand property. We can use all background properties in background property. It’s like:

background: #ffffff url(“img source”) no-repeat right top;

CSS Margin:

Margin used to give space to an element. It’s also used to give space between two elements. 

Margin properties can be used in three ways-

margin-top

margin-right

margin-bottom

margin-left

Also in shorthand we can write – 

margin: top right bottom left;

Note: We can not put any content in the margin space.

CSS Padding:

CSS Padding property used to give space to an element in the innerside. Mean, margin taking space from outside, other hand padding taking space from inside.

Padding also written in this way –

padding-top

padding-right

padding-bottom

padding-left

In shorthand:

padding: top right bottom left;

Note: Inside padding, put content is possible.

Difference between Margin and Padding:

There are lot of difference, like:

CSS Width:

Width property used to give a specific width range to a html element. We can give the width as px or %. 

Like:

width: 100px;

width: 50%;

Also, auto value applicable for width. 

CSS Height:

Height is used to give specific height to an element. Height also write in px or %.

Like –

height: 100px;

height

CSS Text

There are lots of CSS text related property to change the design of text, like:

font-size: 15px; //Change the font size

font-family: arial; //Change the font family

Font-style: italic; //Change the font style

text-decoration: underline; //Change text decoration, like underline, overline

text-transform:capitalize; //Change text transform like capitalize, uppercase

letter-spacing: 2px; //Change space between alphabet

word-spacing: 3px; //Change space between word

line-height: 15px; //Change the line height

text-shadow: 2px 2px;  //Change the line height

font-weight: bold;  //Change the font weight

CSS min() function

width: min(50%, 500px); // here CSS will work for max-width: 500px, others time 50% of the screeen

width: max(50%, 500px); // here CSS will work for min-width: 500px, others time 50% of the screeen