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.

  Notepad 👉File Save = Ctrl + s 👉File Save As = Ctrl + Shift + s N:B   ফাইল সেভ করার পর .html দিতে হবে।   HTML Tag 👉<p></p> ...

 


Notepad

👉File Save = Ctrl + s
👉File Save As = Ctrl + Shift + s

N:B ফাইল সেভ করার পর .html দিতে হবে।  

HTML Tag

👉<p></p> = write a paragraph.
👉<b></b> = make text bold.
👉<i></i> = make text italic.
👉<h1></h1> = Heading 1
👉<h2></h2> = Heading 2
👉<h3></h3> = Heading 3
👉<h4></h4> = Heading 4
👉<h5></h5> = Heading 5
👉<h6></h6> = Heading 6
👉<strong></strong> = make text Strong.
👉<a href=""></a> = anchor tag
👉<img src="" alt=""/> = image tag
👉<li></li> = list tag
👉<ol><li></li></ol> = ordered list tag
👉<ul><li></li></ul> = unordered list tag
👉<input type="Button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week" = Input tag
👉<title></title> = title tag
👉<link rel="shortcut icon" href="favicon.ic" type="image/x-icon"> = favicon tag
👉<br> = Line brake element
👉<hr> = Thematic break (horizontal rule) element
👉<small></small> = Small text tag

Tag with openings and closings

<pi></pi>
<li></li>
<h1></h2>

Tags With Attributes

<img src="" alt=""/>
<a href=""></a>
<input type=""/>

Tags With Closing

<br>
<hr>

Container Tags

<div></div>
<ul></ul>
<form></form>

Doctype

<!DOCTYPE html>
এতে সদস্যতা: মন্তব্যসমূহ (Atom)