CSS with Bharath

There are three ways you can style a html document.

In-line CSS - Styling is done inside the tag by passing attributes
Internal/Embedded CSS - <style> </style> tag is added seperately in the html doc and styling will be written.
External CSS - Seperate .css file is created and is linked in head tag by <link rel="stylesheet" href="">

Most commonly used way to style a html is External CSS.

Selectors

Selector	Syntax	Other Comments
Element	Tag name p,h1...
Class	.
ID	#
Universal Selector(all elements)	&
Element.Classname	tag/elementname.classname(Selects an element with particular class.) p.classname	Can be used in vice-versa i.e. classnamespacep selects all the paragraphs with specified class.
Element,Element	elename,elename eg: div,p

Specificity order in CSS: element < class < ID < In-Line Styling(<!important)

If you have 2 same selectors in css say class and class, the class which is last will style. Because css works from top to bottom!

Borders

This will specify Style, Width and Color of an elements border.

Border Properties

border-style: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden
*Unless you select a border-style, other border properties can not be seen.
border-width: Similar to margins and paddings, you can give width on every side you want.
Eg: border-width=50px 30px 30px 50px which is top 50, right 30, bottom 30, keft 50.
border-color: Set color to your border. border-color:red;
You can also have particular color on each side of the border. <border-color:red(top) blue(right) green(bottom) yellow(left)>
border-whichside(TRBL)-style:solid/dotted/... allows you to have specific style on the sides of the border. <border-right-style:dotted border-top-style:solid;
SHORTHAND OF ABOVE 3 PROPERTIES:
border: width style color;
Border Radious: To change the edges of the border.
border-radious=5px;

Padding and Margin

Usually, when an element is created, padding and margins are applied by default.
Margin is the spacing that is applied outside the element where as padding is the spacing that is applied on the element.

Styling Margins and paddings:
element{
padding:50px 0px; -This adds 50 on the top, 50 on the bottom and 0 on the left, 0 on the right! (OR)
padding:50px 10px 45px 5px; -This adds 50 on the top, 45 on the bottom and 5 on the left, 10 on the right!
(When 4 values are present,1st value starts from top and turns clock-wise.) You can also have negative values to move the text further! :)}

The Box-Model

By default, every element on the browser will have paddings and margins as discussed above. Similarly browser also has some padding and margin.
Consider you want to increase width of an article by 300px, when you do it by width=300px, the width overflows in the browser and gives user a scroller to move right.
So fix this issue start css by following syntax.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
When you put this in your css, you need to customize every element from scartch since we've removed pre-applied css for the browser.

Exact way to calculate height and width of an element is:
Total width of an element=width + left padding + right padding + left border + right border + left margin + right margin
Total height of an element=height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

pixels-em-rem

It is good to use pixels, but the problem when you assign some pixels to an element is, they does not change even when we try to change in browser font settings.

Instead using em and rem will help user change font settings from the browser.
Using em:By default, all the html elements size is 16px. when you use em=1 it means 1x16px since html is the parent element.
Similiary when em=2 it is 2x16. If you have multiple parent elements for an element, em muultiplies all the parent elements pixels too.
For example, parents are html,header,h1 with each having 2em each respectively. If the child element is p with em=3, it means that the size will be 3x2x2x2x16px. Which is very huge font.
So this avoid this parent font size inheretance, we use "rem". Rem does not inherit anything from its parents except html.
Using rem:As we know html font-size is 16px, 1rem=16px. To have 24px, 1.5rem=24px.
To avoid this confusing calculation of rem to pixels, Change the html font-size=62.5% so that 1rem=10px.25px=2.5rem. This will ease our calculation.

CSS Code for styling a button is shown in below text area!

In-line and block elements in CSS

You can't add height and width to an inline elements.
If you add margin or padding to an inline element, only left and right margin applies not the top and bottom one!
When you add multiple inline elements, everything is gonna be on the same line.

To fix this,

you can add a css: display:block; This will stack all the inline elements downwards.
Or if you want them on the same line but you want to add margins and paddigs, the css will be:
display:inline-block; the combination of inline and block.
display:none; disappears element on the page
*display:flex/inline-flex; is flexible to change inline to block and block to inline.
When you use flex, you use justify-content:right/left/center(works similar to text-alignment).

To convert block level elements to inline, use display:flex. When you add display:flex to a parent element, all its child elements become flexible items.

By default, when display flex is used, items as alligned in x-axis, to change it to y-axis, use flex-direction:row/column.

when display:flex, you can use
justify-content: center/flex-start/flex-end
justify-content:space-around, add space to items on all sides.
justify-content:space-between adds space between items equally.
When you have multiple items on a flex container, you can use:

align-items:center/flex-start/flex-end/stretch(fills in the conrainer)/;

align-content:center/stretch/space-between/space-around/flex-end/flex-start

To Perfectly center a item, use both justify-content and align-items to center

Align items vs justify content: AI works vertically, JC works horizontally.

If you wish to interchange items in its position, say 1st flex box on 3rd, 3rd on 2nd and so forth,
use order:num; where num is the position you want to change to.

Flex-basis:%; works similar to width.

flex-wrap:no-wrap/wrap -> Wwraps the content to the next line if browser size gets reduced!

Pseduo Classes and Elements

Pseduo Class

This defines a special state of an element.
Syntax: selector:pseudo-class{property:value;}

For buttons divs and p:
btn:hover{ background:blue;}

For links:
a:link(for a link) a:visited(for links opened)

For inputs (mainly):
inp:focus{background:blue;}
Tooltip Hover: Used when you use display:none for a block and when you hover on it, block will be displayed.

Pseduo Element

Other CSS Properties

text-align:justify;-Everyline will have equal width and left and right margins are straight. Just like in news papers.
text-decoration:none,overline(above the text),underline,line-through(on the line); - usually used to remove underlines from anchor tag.
text-tranform:uppercase,lowercase,capitalize;
text-indent:50px;-used to add space at the start of a paragraph
text-shadow: 2px 2px;(h,v)
text-shadow: 2px 2px 5px(h,v,blureffect)
text-shadow: 2px 2px 5px red;(horiz,vert,blureffect,color)
letter-spacing/word-spacing:5px or -5px; to add gap b/w letters of a word or words.
line-height:5px or -5px; add gap b/w lines of a paragraph.
whitespace:nowrap;-never brings text of a para to a new line.

CASCADING STYLE SHEETS(CSS) BULLETS

HomePage