CSS Class for beginer
How to select a style sheet on html
<link rel="stylesheet" href="css/style.css">
add link to the html head section: like below
<head>
<title> ❤️ Sumaiya's personel site </title>
<link rel="stylesheet" href="css/style.css">
</head>
To change all Color in H1 tag or others, please go to
h1{
color:#66BFBF
}
How to debug or diagnose the problem - go to inspec and see the problem at CONSOLE section like below
rules is that always -HTML inline rules pick 1st compare than html external rules.
for example:
That means: body style color (INLINE TAG) should be selected first compare to STYLE tag (External tag) color
<style>
body{
background-color: red;
}
</style>
</head>
<body style="background-color: white">
<table cellspacing="20">
Now we are learning how to change the background color by using CLASS.
In HTML we are using class attribute to define in CSS
<img class="Profile" src="PROFILE SUMIAYA.png" alt="Borkha images carton" width="200">
<img class="fire" src="https://em-content.zobj.net/source/skype/289/fire_1f525.png" alt="fire">
in CSS
.Profile{
background-color: blue;
}
.fire{
background-color: chocolate;
}
How to add ICON in tab bar
go to www.favicon.cc for making icon and download your icon, after that you just link in CSS.
<link rel="icon" href="favicon (3).ico">
</head>
- What is DIV (Div is a content divider to make different dimensions.)
How to make a cloud on web site
Understanding Block property:
Please see why the background color goes to red in all text area?
Because of the block property, it goes right to left of red color
How to decorate the underline: in a particular word.
a web developer:
if we use below HTML and CSS then it looks like below:
<p> I am </p>
<p class="web"> web </p>
<p> developer </p>
However, using <SPAN> makes you more accurate like:
<p> I am <span class="web"> web </span> developer </p>
.web{
text-decoration: underline;
}
Difference between INLINE, BLOCK INLINE-BLOCK, NONE display Property.:
- Here you may see when I apply a normal paragraph in line property:
it shows up in one single line.
<SPAN> when I apply block property it shows up in block like sentences
Now we will see in the 2nd photo how to do it in INLINE+BLOCK, it gives you block-wise sentences but shows in the same single line.
Now showing you in 3rd photo how to NONE display property work, it shows like the word vanishes and there is no position showing
You may hide the word and it shows the word's hidden position, see the 4th photo
Position
Absolute Position:
The cool thing is that you may notice the red color space is filled up automatically for this absolute positioning.
now making a corner to corner challenge for using absolute div
see below RED div acts like a child:
it was now moving thorough small container:
Now the beauty is that we can move the goods through small container
If you want to fix the position, then the fixed element does not move.
See the below where yellow DIV not moving, it willl help you to fix some elements like side bar .
How to center all the text and everything:
HOW TO MAKE GAP on WEB SITE
How to cloud Floating
Finally
FONT:
You may see the different types of font we are using on different computer
If some computers do not install a particular font, then the next font will show automatically.
Now how ensure that all font will showing same in all computer, go to google font and embedded few font and copy the link
Copy and paste the HTML
Make sure it will written - preconnect
Then copy and paste the google CSS font
Finally- Wala lovely font
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="icon" href="favicon (1).ico">
<head>
<img src="" alt="">
<title>Mehedi Hasan</title>
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="CSS - My Site Images/cloud.png" alt=" cloud">
<h1> I'm Mehedi Hasan</h1>
<p> A <span class="web"> web </span>Designer</p>
<img Class="bottom-cloud" src="CSS - My Site Images/cloud.png" alt=" cloud">
<img src="CSS - My Site Images/mountain.png" alt=" cloud">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
<a> </a>
</body>
</html>
body{
margin: 0;
text-align:center;
}
h1{
margin top: 0;
}
.top-container{
background-color: #E3FDFD;
position:relative;
padding-top:100px;
}
.middle-container{
background-color: blue;
width:200px;
height: 200px;
}
.bottom-container{
background-color: brown;
width:200px;
height: 200px;
}
.web{
text-decoration: underline;
}
.bottom-cloud {
position:absolute;
left:300px;
bottom:300px;
}
.top-cloud{
position:absolute;
right:300px;
top:50px;
}
How to Add font-family
body{
margin: 0;
text-align:center;
font-family:sans-serif;
Espicial font
body{
margin: 0;
text-align:center;
font-family:verdana, sans-serif;
CSS SAFE FONT means most of the web pages users can see the same font.
Otherwise, it can see different web fonts on different browser.
Font-stack gives you data on which font is using most in Windows or mac
google font
copy link and paste to html and CSS
To generate random sentence - https://loremipsum.io/generator/?n=5&t=s
Here CSS does not work if you copy and paste to the Sacramento font link.
it would be - sans-serif on the last.
font-family: 'Sacramento', sans-serif;
To download thousands of png images
for little bit of animation - https://giphy.com/
FONT SIZE: 16x = 100% = 1em
90px= 90px/16px= 5.625px X 100=562.5%
em = 562.5/100=5.625em
font-size: 5.62em;
If you want to make % like below, you may receive very zoom
if you using rem like
it could rem, which gives better size, R means root em
body{
margin: 0;
text-align:center;
font-family: 'Merriweather', serif;
font-size: 200%;
}
h1{
font-size: 5.6rem;
Finally, if you set Mergin margin: 50px auto 0 auto ;
font-size: 5.625rem;
margin: 50px auto 0 auto ;
font-family: 'Sacramento', sans-serif;
How to set margin for LEFT RIGHT TOP BOTTOM
it is called clockwise, for example - TOP 100px right auto bottom 100px left auto
.skill-row{
width: 50%;
margin:100px auto 100px auto ;
How to text allign: text-align: center;
text-align: center;
text-align: left;
Change the line height:line-height: 2;
line-height: 2;
Change the image WIDTH
.SKILL-IMG{
width: 25%;
How to float text around the image?
see below answer-
float: left;
NOW THE QUESTION IS HOW TO MAKE GAP BETWEEN IMAGE AND TEXT:
margin-right: 30PX;
.SKILL-IMG{
width: 25%;
float: left;
margin-right: 30PX;
how to make line height to all web site text
p{
line-height: 2;
}
how to make a border and if you add 6px means it its height will be 6px
hr{
border: dotted #EAF6F6 6px;
}
how to redesign the border
hr{
border: dotted #EAF6F6 6px;
border-bottom:none;
width:4%;
margin:100px auto ;
how to display paragraph and centerd
like below
the answer is below
Just remember: margin 40px means top, auto means= left and right and 60px means bottom. you can practice on below:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
.contact-message{
width: 40%;
margin: 40px auto 60px;
}
CSS button generator:
https://css3buttongenerator.com/
How to change the padding color margin
like below:
how to change all anchor tag (a) text color?
a{
color: #11999E;
}
how to make space like below text
a{
color: #11999E;
font-family: 'Merriweather', serif;
margin: 10px 20px;
}
text-decoration means deleting the underline from <a> anchor tag
a{
color: #11999E;
font-family: 'Merriweather', serif;
margin: 10px 20px;
text-decoration: none;
}
How you can change the hover state, that mean of you hover your mouse to any button, it will change its color
like the below LinkedIn button turned to white.
Llastly, how to remove space on the top and bottom margins, like the below problem.
to change margin property in minus (-) tendency, like margin-20px
.bottom-container{
margin: 40px auto;
background-color: #66bfbf;
padding: 50px 0 20px;
margin-bottom: -20px;