Paris
Paris is known for art, architecture, food, and history.
W3.CSS konteynerlar
Konteyner klassi
w3-container klassi W3.CSS’dagi eng foydali klasslardan biri.
U HTML elementiga chap va o‘ng tomondan 16px ichki bo‘shliq (padding) qo‘shadi.
Bu veb-sahifa bo‘ylab kontentga bir xil bo‘shliq va tekislash beradi.
London
London is the capital of England.
Misol
<div class="w3-container w3-blue">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
O‘zingiz sinab ko‘ring »
Konteynerlar bir xil bo‘shliq hosil qiladi
Konteyner bo‘lmasa, kontent ota elementining chetigacha cho‘zilib ketishi mumkin.
w3-container bilan kontent bir xil gorizontal bo‘shliqqa ega bo‘ladi.
w3-container’siz
w3-container bilan
Misollar
<div class="w3-container">
<p>The w3-container class is an important w3.CSS class.</p>
<p>Containers provide correct margins, padding, alignments, and more, to most HTML elements.</p>
</div>
O‘zingiz sinab ko‘ring »
Rang qo‘shish uchun shunchaki w3-color klassini qo‘shing:
<div class="w3-container w3-red">
O‘zingiz sinab ko‘ring »
Konteynerlar ko‘pchilik HTML elementlari bilan ishlaydi
w3-container klassini ko‘plab HTML elementlari bilan ishlatish mumkin.
Masalan:
<div><header><footer><section><article><form>
W3.CSS HTML elementlariga emas, klasslarga uslub beradi.
Demak, w3-container klassi <div>, <section> yoki <article> elementlarida bir xil ishlaydi.
U sarlavhalar <h1> va paragraflar <p> kabi boshqa elementlarda ham ishlaydi.
Header va footer’lar
Konteynerlar sahifaning yuqori qismi (header) va quyi qismi (footer) uchun qulay.
My Website
Welcome
This is the main content of the page.
Misol
<header class="w3-container w3-teal">
<h1>My Website</h1>
</header>
<div class="w3-container">
<h2>Welcome</h2>
<p>This is the main content of the page.</p>
</div>
<footer class="w3-container w3-teal">
<p>Copyright 2026</p>
</footer>
O‘zingiz sinab ko‘ring »
Bo‘limlar va maqolalar
Konteynerlar kontent bo‘limlarini guruhlash uchun ham qulay.
Travel Guide
Discover some of Europe's most popular destinations.
Misol
<section class="w3-container w3-light-grey">
<h2>Travel Guide</h2>
<p>Discover some of Europe's most popular destinations.</p>
</section>
<article class="w3-container">
<h3>Paris</h3>
<p>Paris is known for art, architecture, food, and history.</p>
</article>
O‘zingiz sinab ko‘ring »
Konteynerlar va ranglar
Rangli bo‘limlar yaratish uchun w3-container klassini W3.CSS rang klassi bilan birga ishlating.
News
Latest stories and updates.
Misol
<div class="w3-container w3-indigo">
<h2>News</h2>
</div>
<div class="w3-container w3-pale-blue">
<p>Latest stories and updates.</p>
</div>
O‘zingiz sinab ko‘ring »
Konteynerning ichki bo‘shlig‘i (padding)
w3-container klassi chap va o‘ng tomondan 16px ichki bo‘shliq qo‘shadi.
U yuqori va pastki ichki bo‘shliq qo‘shmaydi.
Menda yuqori va pastki ichki bo‘shliq yo‘q
Misol
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
O‘zingiz sinab ko‘ring »
Odatda konteynerning standart ichki bo‘shlig‘ini o‘zgartirishingizga to‘g‘ri kelmaydi, chunki HTML sarlavhalari va paragraflarining o‘z yuqori va pastki tashqi bo‘shliqlari (margin) bor:
Sarlavha
Konteyner ichidagi paragraf.
Misollar
<div class="w3-container w3-blue">
<h2>A Heading</h2>
<p>A paragraph inside a container.</p>
</div>
O‘zingiz sinab ko‘ring »
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
O‘zingiz sinab ko‘ring »
Qo‘shimcha vertikal bo‘shliq kerak bo‘lganda konteynerni padding klassi bilan birga ishlating:
Ko‘proq bo‘shliq
Bu konteynerda qo‘shimcha yuqori va pastki ichki bo‘shliq bor.
Misol
<div class="w3-container w3-blue w3-padding-32">
<h2>More Space</h2>
<p>This container has extra top and bottom padding.</p>
</div>
O‘zingiz sinab ko‘ring »
Konteynerlar yordamida sahifa yaratish
Konteynerlar to‘liq veb-sahifaning asosiy bo‘limlarini tashkil qilishi mumkin.
City Guide
Explore Copenhagen
Discover architecture, food, canals, and Scandinavian design.
Misol
<header class="w3-container w3-black">
<h1>City Guide</h1>
</header>
<section class="w3-container w3-padding-32">
<h2>Explore Copenhagen</h2>
<p>Discover architecture, food, canals, and Scandinavian design.</p>
<button class="w3-button w3-teal">Explore</button>
</section>
<footer class="w3-container w3-light-grey">
<p>City Guide</p>
</footer>
O‘zingiz sinab ko‘ring »
Eslatma
Ko‘plab veb-sahifalar <header> va <footer> elementlari o‘rniga <div> elementlaridan foydalanadi.
W3.CSS bu elementlarni bir xil tarzda qayta ishlaydi.
Header’larga uslub berish
w3-container klassidan header’larga uslub berish uchun foydalanish mumkin:
Misollar
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
O‘zingiz sinab ko‘ring »
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
O‘zingiz sinab ko‘ring »
W3.CSS <div> va <header> elementlarini bir xil tarzda qayta ishlaydi.
Footer’larga uslub berish
w3-container klassidan footer’larga uslub berish uchun foydalanish mumkin:
Misollar
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
O‘zingiz sinab ko‘ring »
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
O‘zingiz sinab ko‘ring »
W3.CSS <div> va <footer> elementlarini bir xil tarzda qayta ishlaydi.
Maqolalar va bo‘limlar
w3-container klassidan <article> va <section> elementlariga uslub berish uchun foydalanish mumkin:
Misol
<div class="w3-container">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</section>
O‘zingiz sinab ko‘ring »
Eslatma
W3.CSS <div>, <article> va <section> elementlarini bir xil tarzda qayta ishlaydi.
Konteynerlarning burchaklarini yumaloqlash mumkin:
Misol
<div class="w3-container w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!