Introduction to CSS

CSS stands for Cascading Style Sheet which is used to design and control the HTML elements.

There are 3 ways to insert CSS :
1. External CSS –> In this, we create .css file and write all css there and then connect it with HTML file using <link> tag.
<link rel="stylesheet" type="text/css" href="style.css">

2. Internal CSS –> In this, we add <style> tag inside the <head> tag of HTML and write all CSS there.
3. Inline CSS –> In this, we write CSS inside the element tag.
<p style="color: green; font-size: 18px;"> paragraph </p>

Cascading Style Sheet Tutorial For Beginner

CSS Basics

Comments
/* .....css code..... */

Selectors

The CSS selectors are used to find and select the HTML elements you want to style.

Element selector –> It selects HTML elements based on the name of elements or tags. Example
p{ text-align: center; color: red;}

Id selector –>It selects HTML elements for matching id, which is mostly unique. ( # ) symbol is used before id of element. Example
#home-btn{color: blue;}

Class selector –> It selects HTML elements for matching class name, which can be used for multiple elements. ( . ) symbol is used before class name of element. Example
.home-btn{ color: blue; }

Note :- id > class > elements

Box Model

When we set the width and height properties of an element with CSS, we just set the width & height of the content area. To calculate the full size of an element, we must also add padding, borders and margins.

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

CSS Units

CSS units are used to define length in width, height, margin, padding, font-size.
1. Absolute – It is independent of anything.
2. Relative – It is dependent on something.

Absolute Unit In CSS
cm, mm, inch, px, pt, pc

Relative Unit in CSS
em, rem, vh, vw, %

Em –> em is relative to the size of it’s direct parent, for example if we give 1em it means it will take size same of its parent but if we give 2em it means it will take double the size of its parent.
Rem –> rem is only relative to root (html / tag) size provided by the browser.
Vh –> It is view port height. Example 1vh means 1% of viewport height.
Vw –> It is view port width. Example 1vw means 1% of viewport width.
% –> relative to parent.

Overflow

The overflow in CSS is used when content is larger than the size of the container.
By default overflow is visible.

overflow: visible –> content comes out of the container.
overflow: hidden –> extra content will not visible. The content that can be fitted inside the div, only that much content can be seen.
overflow: scroll –> All the content will be fit inside the div and have a scroll bar to see all the content inside.
overflow-x: hidden –> It hides scroll bar of x-axis.
overflow-y: scroll –> It shows scroll bar of y-axis.
overflow: auto –> It don’t have scrollbar when content is less but, if content is more than its container size then automatically scrollbar is added.

CSS Variables

It is also known as custom properties which allow us to store values in one place and reuse them throughout our CSS.

CSS
/* :root selector sets global and accessible everywhere */
:root {
  --main-color: #3498db;
  --font-size: 16px;
  --padding: 1rem;
}
/* we can use these on any page */
body {
  color: var(--main-color);
  font-size: var(--font-size);
  padding: var(--padding);
}

Display

In HTML every element is in rectangular box and the behavior of that rectangular box is depends on the display property.
There are 4 main value of the display property:-

display: block –> It always starts with new line. Its always takes full width and we can set it’s height and & width.
display: inline –> Inline don’t starts from new line. It takes necessary width and we can’t set height & width.
display: inline-block –> Inline-block don’t starts from new line. It takes only necessary width and we can set height and width.
display: none –> none will hide the whole element.

Position

Position defines the position of an element on a webpage.
There are four type of position value:-

Static –> By default every element in HTML contains position: static, with static we can not use top, bottom, left, right property.

Relative –> When we use relative it means, the element will move around its current position. For example, If we use relative for an element position, then if we use top: 10px; left: 10px then that element will move 10px from left and left but do not release its current position space.

Absolute –> In absolute it starts calculation from its nearest parent position, if it can not find the any positioned element then it start calculation from body. In absolute, the element release its space and other element will takes it released space.

Fixed –> In fixed, it will start calculation from viewport and it will released its space and other element will takes released space. The fixed element will get fixed in on viewport no matter whether we scroll the webpage or not, It will be fixed to its defined position.

Scroll to Top