CSS - Cascading StyleSheet , Cascade basic meaning is override( repaint ) on existing style. Have you think when you use paragraph tag and button in html file and open in browser by default color of paragraph is black and button background-color is grey and some border has been added . How this style added because we not added styling these element then who is responsible for these styling , that is user-agent means your browser (client) .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>click me</button>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem laboriosam modi sunt labore reprehenderit repellendus quibusdam at ex placeat eum?</p>
</body>
</html>
Run code in browser and inspect button then you see default styling set by your browser (user agent) .
button {
appearance: auto;
font-style: ;
font-variant-ligatures: ;
font-variant-caps: ;
font-variant-numeric: ;
font-variant-east-asian: ;
font-variant-alternates: ;
font-variant-position: ;
font-variant-emoji: ;
font-weight: ;
font-stretch: ;
font-size: ;
font-family: ;
font-optical-sizing: ;
font-size-adjust: ;
font-kerning: ;
font-feature-settings: ;
font-variation-settings: ;
text-rendering: auto;
color: buttontext;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;
cursor: default;
box-sizing: border-box;
background-color: buttonface;
margin: 0em;
padding-block: 1px;
padding-inline: 6px;
border-width: 2px;
border-style: outset;
border-color: buttonborder;
border-image: initial;
}
same thing happening with paragraph tag. Default style added by your browser .
But the question arise is this value has been changed or not ? - No this all property value never ever changed but cascade (override) this property value is possible .
<button style="background-color: red;">click me</button>
we just cascade of button background-color: buttonface; to background-color: red; . So now we easily understand basic thing about CSS what and what’s working .
CSS : style a web page
Three ways have to style web page . Each styling way is unique and interesting and different use cases .
Inline CSS
Inernal CSS
External CSS
Inline CSS
it is one of way to syle webpage , it is easy to write css in exact in element tag .
Inline css has high specificity most powerful styling method it can be override all CSS .
structure :
<p style="property:value; property:value;">
Content inside paragraph.
</p>
style: It is attribute where css has written .
property : It is key where you define which style apply (e.g : color, background-color etc.)
value : It is value of property where you define what value keep (#3ed4f2, red etc.)
example :
<p style="color: red;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem laboriosam modi sunt labore reprehenderit repellendus quibusdam at ex placeat eum?</p
color: we define in code override color property with red .
Generally developer use this method for small style and unique style of particular element but all style done through inline css is not better approach .
Internal CSS
Internal CSS is one of method to style web page . To use this you need to follow some rule of Internal CSS <style> tag inside HTML Document <head> tag , inside <style>…</style> we select our element and define property and value .
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
background-color: rgb(21, 140, 155);
}
p {
color: rgb(113, 17, 30);
}
</style>
</head>
<body>
<button>click me</button>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem laboriosam modi sunt labore reprehenderit repellendus quibusdam at ex placeat eum?</p>
</body>
</html>
External CSS
External CSS is one of method to style web page . To use this you need to follow some rule of External CSS create .css extention file and link that with html file .
style.css
.btn {
background-color: rgb(21, 140, 155);
}
#para-1 {
color: rgb(113, 17, 30);
}
span {
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<button class="btn">click me</button>
<p id="para-1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem laboriosam modi sunt labore reprehenderit repellendus quibusdam at ex placeat eum?</p>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</span>
</body>
</html>
id: it is way select item and use for uniqness (means any selector use same name id one time) . But if you use same id selector with multiple element then you not got any error but in industry this is rule so follow it .
class: it is way select multiple items with class .
ID :
------------------------- Bad Practise ❌ -----------------------------
<p id="para-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, placeat?</p>
<p id="para-1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam, reiciendis.</p>
------------------------- Good Practise ✅ -----------------------------
<p id="para-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, placeat?</p>
<p id="para-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam, reiciendis.</p>
CLASS :
<p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, placeat?</p>
<p class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam, reiciendis.</p>
💥💥 I hope you understand basics of css , Internal , Inline and External CSS .