CSS basic concepts for beginners web-development series

 CSS:- cascading style sheet Basic concepts for beginners 


Why Learn CSS:- CSS is a very demanded skill in the world of web development. If you are successfully able to master CSS, you can customizing your website as per your liking.

CSS basic concepts for beginners web-development

Your first line of CSS:- Create a .CSS file inside your directory and add it to your HTML add the following line to your CSS

body {

    background-color: red;

    background-image: url('./images/background-img.jpg');

    background-repeat: space;


background-size: Property contain some value:---

cover:-- File & no empty space remains

contain:-- File & image is fully visible

auto:- Display in original size

{{width }}:-- Set width & height will be set automatically 




Red in Hexa:- ff0000 -- Here compare with (rgb) ff means-red, 00-not use green, 00-not-use blue,


rgba:- red green blue alpha..


background shorthand 

A single Property to set multiple background Properties 


margin: 4px 6px 8px 7px; Clockwise, in which 4px top, 6px-Right, 8px bottom, 7px left..


margin: 14px 16px; In which 14px-->top-bottom, 16px-->right-left;


Setting Border:-


border-width: 2px;

border-style: solid;

border-color: red;


margin-collapse:-  

When two margin from different element overlap, the equivalent margin is the greater of the two, this is called margin collapse..


.box1 {

    margin: 30px;

    height: 40px;

}


.box2 {

    margin: 40px;

    height: 60px;

}

Result:- margin between them is collapse to the bigger margin.

------------------------------------------------

Box-sizing:- content


Display and Fonts:::---

The CSS display Property is used to determine whether an element is treated as a block/inline element & the layout used for is

Types:-

display:block;=---- ye pura width ko gherta hai

display:inline;--- jitni chahiye utna width ko gherta hai

display:inline-block;

display:none va visivility hidden:--


display:inline;

Takes only the space required by the element. No linebrakes before and after Setting margin/Padding (top-dottom for only) or width/height not allowed. Example::-- Span is takes by-default inline block..


display: block;

Takes full space available in width and leaves a newline before and after the element. Example:--- Div has by-default block level display...


display: inline-block;

Similar to inline but setting height, width margin and padding is allowed, element can set next to each other..


display: none; vs visibility: hidden;

with display:none, the element is removed from the document flow.. ITs space is not blocked..

with visibility: hidden; the element is hidden but its space is reserved.


text-align Property:--

Used to set the horizontal alignment of a text 


text-align: center;

text-align: right;

text-align: left;


text-decoration: underline; /// for linking

text-decoration: underline dotted;

text-decoration: underline dotted red;

text-decoration: green wavy underline;

text-decoration: overline;

text-decoration: line-through;

text-decoration: none;


text-transform: capitalize; 

text-transform: lowercase;

text-transform: none;

text-transform: uppercase;

text-transform: inherit;

text-transform: initial;

text-transform: unset;


line-height Property::


line-height: 


web safe fonts:

These fonts are universally installed across browsers..


Google fonts add on your website..


Font Properties:--

font-size

font-style

font-varient

font-weight


font-style: italic;

font-style: normal;

font-style: oblique;

font-style: oblique 40deg;



Generic families:-- 

Broad class of similar fonts Example serif, sans-serif, just like when we say fruit, it can be any fruit. When we say serif it can be any serif font


font-family:  Specific [ banana ke banana hota hai, means Specific]

generic-family:  Generic [ fruit k ander bahut se fruit aate hai kuch iss tarike se smj lo]



Chapter 5 Size, Position & Lists


There are more units for describing size other than px, there are rem, em, vw, vh, percentages etc..


What wrong with pixels:-- Pixels "px" are relative to the viewing device. For a device with size 1920*1080, 1px is 1 unit out of 1080/1920.


Relative lengths:- These units are relative to the other length Property, following are some of the most commonly used relative length..


em:- Unit relative to the parent font size.. em means " My parent element's font size" ///


rem:- Unit relative to the root font size (<html> tag)


vw:- unit relative to the 1% viewport width.


vh:- unit relative to 1% viewport height


%:- unit relative to the parent element.


-----------


min/max-height/width Property:--

CSS has a min-height, max-height, min-width, max-width Property.. If the content is smaller than the minimum height, minimum height will be applied.


Position:- in CSS:

static:- by default, here not work left, top, bottom, right and z-index;


If you want to give Position to any value or div or any content, then you need to apply first Position, which can be Position: relative, Position: absolute, Position: sticky, etc..


position: relative;  here you can apply top, bottom, left, right and z-index.. 

 

Post a Comment

Previous Post Next Post