आज इस आर्टिकल में हम आपको CSS Tutorial in Hindi के बारे में बताने जा रहे है.
CSS क्या है?
CSS की full form- Cascading Style Sheets है और
इसका इस्तेमाल HTML डॉक्यूमेंट को style देने के लिए इस्तेमाल किया जाता है.
CSS की मदद से हम अपने webpage को एक अलग लुक दे सकते है और इसकी मदद से हमारा page browser पर कैसे दिखना चाहिए यह सब हम CSS में describe कर सकते है. CSS के feature की मदद से हम कई webpage को एक जैसा लुक दे सकते है जिससे हमें बार बार उन चीजो की style ना देना पड़े और इसकी मदद से हम अपने webpage के loading टाइम को कम कर सकते है.
हम आपको नीचे सिंपल डॉक्यूमेंट और अलग से style sheet का इस्तेमाल किये हुए प्रोजेक्ट का एक छोटा सा डेमो दिखा रहे है जिससे आपको CSS का मतलब आसानी से समझ आ जाएगा.
Simple HTML Document (Without CSS)
<!DOCTYPE html>
<html>
<head>
<title>CSS Introduction</title>
</head>
<body>
<h1>RJ Beat- Pro Tutorial in Hindi</h1>
<h2>What is HTML</h2>
<p>Hypertext Markup Language is the standard markup language for creating web pages and web applications. With Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web</p>
<h2>What is CSS</h2>
<p>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<h2>What is JavaScript</h2>
<p>JavaScript, often abbreviated as JS, is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm</p>
</body>
</html>
Output>>>>>>
ऊपर हमने आपको बिना CSS के HTML document दिखाया है अब हम आपको internal CSS का इस्तेमाल करके CSS का छोटा सा डेमो दिखाएंगे और इसको attach करने के तरीकों के बारे में आपको next tutorials में बताएँगे.
Simple HTML Document (With CSS)
<!DOCTYPE html>
<html>
<head>
<title>CSS Introduction</title>
<style type="text/css">
h1{
width: 100%;
height: auto;
background-color: skyblue;
text-align: center;
}
h2{
background-color: green;
padding-left: 10px;
}
p{
font-size: 20px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>RJ Beat- Pro Tutorial in Hindi</h1>
<h2>What is HTML</h2>
<p>Hypertext Markup Language is the standard markup language for creating web pages and web applications. With Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web</p>
<h2>What is CSS</h2>
<p>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<h2>What is JavaScript</h2>
<p>JavaScript, often abbreviated as JS, is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm</p>
</body>
</html>
Output>>>>>>>
तो इस प्रकार हम CSS का इस्तेमाल करके किसी भी डॉक्यूमेंट को style और एक layout दे सकते है.
इसके अलावा CSS से हम किसी भी डॉक्यूमेंट को उसके width के हिसाब किस प्रकार
show करना है उसके बारे में भी describe कर सकते है.
