Inline, Block, Inline-block elements 👉 Inline -  An inline element only takes up as much width as necessary. Here are the inline elements i...


Inline, Block, Inline-block elements

👉 Inline - An inline element only takes up as much width as necessary.







👉 Inline-block - display: inline-block allows setting a width and height on the element.

display: inline-block, the top and bottom margins/paddings are respected

display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

CSS Box model


Explanation of the different parts:

  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent

Pseudo class hover, focus, visited, first child, nth child 

<style>
Selector:hover {
style-name : style-value;
}
</style>

Pseudo-element before after

<style>
Selector::before{
style-name : style-value;
}
Selector::after{
style-name : style-value;
}
</style>

The position Property

There are five different position values:
  • static
  • relative
  • fixed
  • absolute
  • sticky

  Set Google Fonts 👉 First add External CSS   < head > < link  rel ="stylesheet"  href ="style.css" > < ...

 


Set Google Fonts

👉 First add External CSS  
<head>
<link rel="stylesheet" href="style.css">
</head>

👉 Second get the web link of font from google font, To embed a font, copy the code into the <head> of your HTML


👉 Apply font-family On style.css



body {
  font-family: "Poppins", sans-serif;
  font-family: "Varela Round", sans-serif;
}

Put Container Side by Side 

HTML

<div class="flex-container">

  <div class="flex-child magenta">
    Flex Column 1
  </div>
  
  <div class="flex-child green">
    Flex Column 2
  </div>
  
</div>

CSS

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
}


Box Shadow

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

Github  git   --version    Github after changing code   git   add .  git commit -m"first commit"  git push     


Github

 git  --version  

Github after changing code 

 git  add . 
git commit -m"first commit" 
git push  
 

  Types Of CSS 👉 Internal / Embedded -  An internal CSS is defined in the  <head>  section of an HTML page, within a  <style>  ...

 




Types Of CSS

👉 Internal / Embedded - An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
👉 External - To use an external style sheet, add a link to it in the <head> section of each HTML page
👉 Inline - An inline CSS uses the style attribute of an HTML element

Style

<style>
Selector {
style-name : style-value;
}
</style>

CSS Units

Absolute Lengths





Relative Lengths



Browser Support


#id vs .class

#

id selector: styles the element with the specified id
N:B you cannot have more than one element with the same id in an HTML document.

•

class selector: styles the element with a specific class name

N:B 👉Multiple HTML elements can share the same class name.
       👉HTML elements can also contain more than one class.

<span></span> =  The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
এতে সদস্যতা: পোস্টগুলি (Atom)