CSS Default Values Reference

HTML உறுப்புகளுக்கான இயல்புநிலை CSS உலாவி மதிப்புகள்

Default CSS Values for HTML Elements

கீழே உள்ள அட்டவணை அனைத்து HTML உறுப்புகளுக்கான இயல்புநிலை CSS உலாவி மதிப்புகளைக் காட்டுகிறது.

💡 உதவிக்குறிப்பு:

இந்த இயல்புநிலை மதிப்புகளை அறிந்து கொள்வது CSS ஐ மேம்படுத்தும் போது உதவுகிறது, ஏனெனில் உலாவி ஏற்கனவே பயன்படுத்தும் நடத்தைகளை நீங்கள் அறிந்து கொள்ள வேண்டும்.

CSS Default Values Reference Table

Element Default CSS Value Try it
a:link color: (internal value);
text-decoration: underline;
cursor: auto;
a:visited color: (internal value);
text-decoration: underline;
cursor: auto;
address display: block;
font-style: italic;
b font-weight: bold;
blockquote display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
body display: block;
margin: 8px;
code font-family: monospace;
div display: block;
em font-style: italic;
fieldset display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
h1 display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
h2 display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
h3 display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
h4 display: block;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
h5 display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
h6 display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
hr display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
i font-style: italic;
img display: inline-block;
li display: list-item;
mark background-color: yellow;
color: black;
ol display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
p display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
pre display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
table display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
strong font-weight: bold;
sub vertical-align: sub;
font-size: smaller;
sup vertical-align: super;
font-size: smaller;
ul display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;

📝 குறிப்பு:

"(internal value)" என்பது உலாவியின் உள் மதிப்பைக் குறிக்கிறது, இது வெவ்வேறு உலாவிகளில் மாறுபடலாம். "None" என்பது அந்த உறுப்புக்கு இயல்புநிலை CSS பாணி இல்லை என்று பொருள்.

Important Default CSS Values

Heading Elements (h1-h6):
display: block;
font-weight: bold;
margin-top/bottom: varies by level
Paragraph (p):
display: block;
margin-top: 1em;
margin-bottom: 1em
Anchor Links (a):
color: (internal value);
text-decoration: underline;
cursor: pointer
Lists (ul, ol):
display: block;
margin: 1em 0;
padding-left: 40px
Body Element:
display: block;
margin: 8px

Why Understanding Default Values is Important

இயல்புநிலை CSS மதிப்புகளைப் புரிந்துகொள்வது முக்கியமானது, ஏனெனில்:

Simple CSS Reset Example

/* Reset margins and padding for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set consistent font and line-height */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Remove default list styles */
ul, ol {
    list-style: none;
}

/* Remove text decoration from links */
a {
    text-decoration: none;
    color: inherit;
}

Exercise

❓ பின்வரும் HTML உறுப்புகளில் எது இயல்புநிலையாக "display: block;" CSS மதிப்பைக் கொண்டுள்ளது?

span
✗ தவறு! span உறுப்பு "display: inline;" கொண்டுள்ளது
img
✗ தவறு! img உறுப்பு "display: inline-block;" கொண்டுள்ளது
div
✓ சரி! div உறுப்பு இயல்புநிலையாக "display: block;" கொண்டுள்ளது
a
✗ தவறு! a உறுப்பு "display: inline;" கொண்டுள்ளது