<h2 style="text-align: justify;">Kh&oacute;a học n&agrave;y d&agrave;nh cho ai?</h2>
<p style="text-align: justify;">Kh&oacute;a học <strong>X&acirc;y dựng giao diện với HTML &amp; CSS</strong> n&agrave;y d&agrave;nh cho:</p>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Những bạn mới bắt đầu bước v&agrave;o học lập tr&igrave;nh web. Kh&oacute;a học n&agrave;y l&agrave; cơ sở để tạo ra những trang web chuy&ecirc;n nghiệp, đẹp mắt v&agrave; tương th&iacute;ch tr&ecirc;n nhiều loại thiết bị v&agrave; m&ocirc;i trường kh&aacute;c nhau.</li>
<li style="font-weight: 400;" aria-level="1">C&aacute;c bạn học vi&ecirc;n đ&atilde; c&oacute; những kiến thức cơ bản về HTML v&agrave; CSS nhưng vẫn bất lực trong việc sử dụng kết hợp ch&uacute;ng với nhau để tạo ra một trang web chuy&ecirc;n nghiệp, hiện đại v&agrave; đẹp mắt.</li>
<li style="font-weight: 400;" aria-level="1">C&aacute;c bạn học thiết kế nhưng muốn mở rộng kỹ năng của m&igrave;nh với những hiểu biết sơ lược về x&acirc;y dựng giao diện web th&ocirc;ng qua HTML5 v&agrave; CSS3</li>
</ul>
<p style="text-align: justify;"><span style="font-weight: 400;">Đơn giản, dễ hiểu, thực tế, v&agrave; thực h&agrave;nh trực tiếp ngay sau khi học với nhiều ứng dụng, gi&uacute;p bạn nhanh ch&oacute;ng tiếp cận v&agrave; triển khai ngay được ứng dụng thực tế.<br /></span></p>
<h2 style="text-align: justify;">Để bắt đầu kh&oacute;a học, bạn cần g&igrave;?</h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Kh&oacute;a học n&agrave;y được thiết kế d&agrave;nh cho người mới bắt đầu, v&igrave; vậy bạn sẽ kh&ocirc;ng cần phải c&oacute; bất cứ kinh nghiệm n&agrave;o về lập tr&igrave;nh trước khi bắt tay v&agrave;o học. Kh&oacute;a học n&agrave;y:</span></p>
<ul style="text-align: justify;">
<li style="font-weight: 400; text-align: justify;" aria-level="1"><span style="font-weight: 400;">KH&Ocirc;NG đ&ograve;i hỏi bạn phải c&oacute; kiến thức trước về lập tr&igrave;nh hay thiết kế</span></li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><span style="font-weight: 400;">KH&Ocirc;NG nhất thiết phải c&agrave;i đặt c&ocirc;ng cụ nặng với dung lượng lớn. Bạn kh&ocirc;ng cần mua bất cứ phần mềm n&agrave;o - ch&uacute;ng ta sẽ sử dụng tr&igrave;nh editor miễn ph&iacute;, nhẹ v&agrave; tốt nhất với chi ph&iacute; bằng 0.</span></li>
</ul>
<p style="text-align: justify;">Tất cả những g&igrave; bạn cần l&agrave;:</p>
<ul style="text-align: justify;">
<li style="font-weight: 400; text-align: justify;" aria-level="1"><span style="font-weight: 400;">Một thiết bị m&aacute;y t&iacute;nh (Windows, Mac hoặc Linux) hoặc thậm ch&iacute; l&agrave; một chiếc m&aacute;y t&iacute;nh bảng.</span></li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><span style="font-weight: 400;">T&acirc;m thế sẵn s&agrave;ng <strong>chăm chỉ, nỗ lực</strong> v&agrave; <strong>thực hiện</strong> theo <strong>đ&uacute;ng lộ tr&igrave;nh</strong> đ&atilde; đề ra trong kh&oacute;a học.</span></li>
</ul>
<h2 style="text-align: justify;">Giới thiệu&nbsp;</h2>
<p style="text-align: justify;"><span style="font-weight: 400;">HTML l&agrave; viết tắt của HyperText Markup Language (ng&ocirc;n ngữ sử dụng thẻ đ&aacute;nh dấu văn bản) d&ugrave;ng để m&ocirc; tả cấu tr&uacute;c của c&aacute;c trang Web v&agrave; tạo ra c&aacute;c loại t&agrave;i liệu c&oacute; thể xem được tr&ecirc;n tr&igrave;nh duyệt.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">CSS (viết tắt của Cascading Style Sheets) l&agrave; ng&ocirc;n ngữ định dạng được sử dụng để m&ocirc; tả c&aacute;ch tr&igrave;nh b&agrave;y trang Web, bao gồm m&agrave;u sắc, bố cục v&agrave; ph&ocirc;ng chữ. N&oacute; cho ph&eacute;p hiển thị nội dung tương th&iacute;ch tr&ecirc;n c&aacute;c loại thiết bị c&oacute; k&iacute;ch thước m&agrave;n h&igrave;nh kh&aacute;c nhau như m&agrave;n h&igrave;nh lớn, m&agrave;n h&igrave;nh nhỏ hay m&aacute;y in.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">CSS độc lập với HTML v&agrave; c&oacute; thể được sử dụng với bất kỳ ng&ocirc;n ngữ đ&aacute;nh dấu dựa tr&ecirc;n XML n&agrave;o.<br /></span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Về cơ bản c&oacute; thể n&oacute;i HTML c&oacute; vai tr&ograve; tạo khung xương cho website c&ograve;n CSS c&oacute; vai tr&ograve; trang điểm v&agrave; đắp da thịt cho website đ&oacute;. Đ&acirc;y l&agrave; hai th&agrave;nh phần kh&ocirc;ng thể thiếu để tạo l&ecirc;n một website mượt m&agrave; v&agrave; đẹp đẽ.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Kh&oacute;a học n&agrave;y sẽ cung cấp cho người học những kiến ​​thức từ cơ bản đến những kh&aacute;i niệm n&acirc;ng cao tổng hợp về HTML v&agrave; CSS. Đ&acirc;y l&agrave; kh&oacute;a học với rất nhiều b&agrave;i tập v&agrave; v&iacute; dụ gi&uacute;p người học chủ động v&agrave; hiểu c&aacute;ch x&acirc;y dựng giao diện website tĩnh khi sử dụng HTML v&agrave; CSS. Mục ti&ecirc;u của kh&oacute;a học n&agrave;y l&agrave; gi&uacute;p bạn th&agrave;nh thạo lập tr&igrave;nh HTML v&agrave; CSS từ số 0. Kh&oacute;a học sẽ cung cấp cho bạn c&aacute;c kh&aacute;i niệm về thẻ HTML, thuộc t&iacute;nh, thuộc t&iacute;nh của HTML, CSS. C&aacute;ch tạo ra một trang web từ HTML v&agrave; CSS, c&aacute;ch cắt giao diện website từ c&aacute;c file thiết kế dạng figma hoặc Photoshop. <br /></span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Sau kh&oacute;a học n&agrave;y, bạn ho&agrave;n to&agrave;n c&oacute; thể n&acirc;ng cao kỹ năng của m&igrave;nh hơn nữa với c&aacute;c kh&oacute;a học n&acirc;ng cao của TEK4.VN như: lập tr&igrave;nh PHP, lập tr&igrave;nh NodeJS, lập tr&igrave;nh JavaScript,... để c&oacute; thể x&acirc;y dựng website một c&aacute;ch ho&agrave;n thiện với đầy đủ t&iacute;nh năng v&agrave; th&agrave;nh phần.</span></p>
<p style="text-align: justify;">...</p>
<p style="text-align: justify;">Với kh&oacute;a học n&agrave;y bạn ho&agrave;n to&agrave;n c&oacute; thể thiết kế v&agrave; x&acirc;y dựng bất kỳ trang web n&agrave;o m&agrave; bạn c&oacute; thể nghĩ ra, chứ kh&ocirc;ng chỉ sao ch&eacute;p dự &aacute;n kh&oacute;a học.</p>
<p style="text-align: justify;">V&igrave; vậy, để trở th&agrave;nh một lập tr&igrave;nh vi&ecirc;n tự tin v&agrave; độc lập, c&oacute; khả năng x&acirc;y dựng trang web của ri&ecirc;ng bạn trong tương lai, bạn sẽ học:</p>
<ol>
<li>C&aacute;c nguy&ecirc;n tắc cơ bản của HTML, CSS. Bao gồm flexbox hiện đại v&agrave; CSS Grid!</li>
<li style="text-align: justify;">C&aacute;ch thiết kế c&aacute;c trang web đẹp, bằng c&aacute;ch học một khung thiết kế web m&agrave; ch&uacute;ng t&ocirc;i đ&atilde; tạo chỉ d&agrave;nh cho kh&oacute;a học n&agrave;y. N&oacute; bao gồm c&aacute;c hướng dẫn dễ sử dụng cho c&aacute;c kh&iacute;a cạnh thiết kế như kiểu chữ, m&agrave;u sắc, h&igrave;nh ảnh, khoảng c&aacute;ch,...</li>
<li style="text-align: justify;">C&aacute;ch sử dụng c&aacute;c th&agrave;nh phần trang web v&agrave; mẫu bố cục đ&atilde; được thiết lập để tạo ra c&aacute;c thiết kế chuy&ecirc;n nghiệp.</li>
<li style="text-align: justify;">C&aacute;ch l&agrave;m cho bất kỳ trang web n&agrave;o hoạt động tr&ecirc;n mọi thiết bị di động, bất kể thiết kế v&agrave; bố cục như thế n&agrave;o.</li>
<li style="text-align: justify;">C&aacute;ch vận dụng 7 bước x&acirc;y dựng website chuy&ecirc;n nghiệp v&agrave;o thực tế: lập kế hoạch, ph&aacute;c thảo, thiết kế, x&acirc;y dựng, kiểm thử, tối ưu v&agrave; khởi chạy.</li>
<li style="text-align: justify;">C&aacute;ch t&igrave;m v&agrave; sử dụng c&aacute;c nội dung thiết kế miễn ph&iacute; như h&igrave;nh ảnh, ph&ocirc;ng chữ v&agrave; biểu tượng</li>
<li style="text-align: justify;">C&aacute;c kỹ năng quan trọng của lập tr&igrave;nh vi&ecirc;n như đọc t&agrave;i liệu, tự sửa lỗi v&agrave; sử dụng c&aacute;c c&ocirc;ng cụ ph&aacute;t triển web chuy&ecirc;n nghiệp.</li>
</ol>
<h2 style="text-align: justify;">Tại sao bạn n&ecirc;n học HTML v&agrave; CSS ngay từ b&acirc;y giờ?</h2>
<p style="text-align: justify;">Ở Việt Nam hiện nay, c&aacute;c c&ocirc;ng việc li&ecirc;n quan đến lập tr&igrave;nh n&oacute;i ri&ecirc;ng v&agrave; c&ocirc;ng nghệ n&oacute;i chung đều được rất nhiều c&aacute;c nh&agrave; tuyển dụng săn đ&oacute;n v&agrave; trọng dụng. C&ocirc;ng việc thiết kế v&agrave; x&acirc;y dựng một website l&agrave; một c&ocirc;ng việc th&uacute; vị. Đ&acirc;y l&agrave; một trong những ng&agrave;nh c&oacute; tương lai ổn định v&agrave; được trả lương cao nhất tr&ecirc;n thế giới. HTML v&agrave; CSS l&agrave; điểm v&agrave;o nếu bạn chọn đi con đường n&agrave;y.</p>
<p style="text-align: justify;">Đ&acirc;y l&agrave; kh&oacute;a học tốt nhất v&agrave; đầy đủ nhất để bắt đầu h&agrave;nh tr&igrave;nh ph&aacute;t triển web của bạn. Gi&uacute;p bạn từ chỗ kh&ocirc;ng biết g&igrave; về HTML v&agrave; CSS, đến việc x&acirc;y dựng c&aacute;c trang web tuyệt đẹp bằng c&aacute;ch sử dụng c&aacute;c c&ocirc;ng cụ v&agrave; c&ocirc;ng nghệ m&agrave; c&aacute;c lập tr&igrave;nh vi&ecirc;n sử dụng h&agrave;ng ng&agrave;y.</p>
<p style="text-align: justify;"><em>H&atilde;y c&ugrave;ng TEK4.VN bắt đầu x&acirc;y dựng trang web ngay h&ocirc;m nay!</em></p>

Xây dựng giao diện với HTML & CSS

<p style="text-align: justify;">Trong b&agrave;i trước, ch&uacute;ng ta đ&atilde; t&igrave;m hiểu tổng quan về CSS v&agrave; c&uacute; ph&aacute;p tổng qu&aacute;t cho c&aacute;c quy tắc định kiểu trong CSS. Trong b&agrave;i n&agrave;y, ch&uacute;ng ta sẽ c&ugrave;ng t&igrave;m hiểu c&aacute;ch sử dụng CSS kết hợp với HTML để x&acirc;y dựng một trang web được trang tr&iacute; v&agrave; bố cục ho&agrave;n chỉnh.</p>
<p style="text-align: justify;"><span style="font-size: 16px;">Ch&uacute;ng ta sẽ c&oacute; ba c&aacute;ch sử dụng CSS trong HTML l&agrave;:</span></p>
<ul style="text-align: justify;">
<li><span style="font-size: 16px;">Inline: m&atilde; CSS viết ngay tại thuộc t&iacute;nh<em>&nbsp;Style&nbsp;</em>của phần tử HTML</span></li>
<li><span style="font-size: 16px;">Internal: m&atilde; CSS trong ch&iacute;nh văn bản HTML, nằm trong khối thẻ&nbsp;<em>&lt;style&gt;</em></span></li>
<li><span style="font-size: 16px;">External: m&atilde; CSS ở một file ri&ecirc;ng biệt sau đ&oacute; nạp v&agrave;o trong HTML bằng phần tử&nbsp;<em>&lt;link&gt;</em></span></li>
</ul>
<h2 style="text-align: justify;"><strong>Inline CSS</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">CSS được th&ecirc;m v&agrave;o dạng &lsquo;inline&rsquo; khi n&oacute; được sử dụng trong thuộc t&iacute;nh </span><span style="font-weight: 400;"><code>style</code></span><span style="font-weight: 400;"> của thẻ HTML.</span></p>
<pre class="language-html" data-content="%3Ch3%20style%20%3D%22color%3Ablue%22%3EBlue%20Heading!%3C%2Fh3%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;h3 style ="color:blue"&gt;Blue Heading!&lt;/h3&gt;</code></pre>
<h3 style="text-align: justify;">Khi n&agrave;o sử dụng inline CSS</h3>
<p style="text-align: justify;">Sử dụng inline CSS (CSS nội tuyến) khi bạn muốn &aacute;p dụng kiểu d&aacute;ng cho một phần tử cụ thể m&agrave; kh&ocirc;ng cần sử dụng lại kiểu đ&oacute; ở nơi kh&aacute;c trong trang web. Dưới đ&acirc;y l&agrave; một số t&igrave;nh huống thường gặp khi n&ecirc;n sử dụng inline CSS:</p>
<h4 style="text-align: justify;">Inline CSS sử dụng để tạo kiểu d&aacute;ng duy nhất cho một phần tử</h4>
<p style="text-align: justify;">Khi bạn chỉ muốn tạo kiểu cho một phần tử duy nhất m&agrave; kh&ocirc;ng cần sử dụng lại kiểu đ&oacute; cho c&aacute;c phần tử kh&aacute;c trong trang, bạn c&oacute; thể sử dụng inline CSS. V&iacute; dụ, khi bạn muốn định dạng một ti&ecirc;u đề <code>&lt;h1&gt;</code> một c&aacute;ch duy nhất:</p>
<pre class="language-html" data-content="%3Ch1%20style%3D%22color%3A%20blue%3B%20font-size%3A%2024px%3B%22%3ETi%C3%AAu%20%C4%91%E1%BB%81%3C%2Fh1%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;h1 style="color: blue; font-size: 24px;"&gt;Ti&ecirc;u đề&lt;/h1&gt;</code></pre>
<h4 style="text-align: justify;">Inline CSS sử dụng để tạo kiểu d&aacute;ng được tạo động</h4>
<p style="text-align: justify;">Khi bạn muốn tạo kiểu d&aacute;ng cho một phần tử dựa tr&ecirc;n dữ liệu động từ nguồn dữ liệu hoặc th&ocirc;ng tin từ m&aacute;y chủ, inline CSS c&oacute; thể l&agrave; sự lựa chọn ph&ugrave; hợp. V&iacute; dụ, khi bạn muốn thay đổi m&agrave;u chữ của một phần tử dựa tr&ecirc;n một gi&aacute; trị động:</p>
<pre class="language-html" data-content="%3Cp%20style%3D%22color%3A%20%3C%3Fphp%20echo%20%24dynamicColor%3B%20%3F%3E%22%3EN%E1%BB%99i%20dung%20%C4%91%E1%BB%99ng%3C%2Fp%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;p style="color: &lt;?php echo $dynamicColor; ?&gt;"&gt;Nội dung động&lt;/p&gt;</code></pre>
<h4 style="text-align: justify;">Thử nghiệm kiểu d&aacute;ng</h4>
<p style="text-align: justify;">Khi bạn đang thử nghiệm v&agrave; chỉnh sửa kiểu d&aacute;ng trong qu&aacute; tr&igrave;nh ph&aacute;t triển trang web, inline CSS c&oacute; thể gi&uacute;p bạn dễ d&agrave;ng thấy những thay đổi ngay lập tức tr&ecirc;n tr&igrave;nh duyệt m&agrave; kh&ocirc;ng cần chỉnh sửa c&aacute;c tệp CSS ri&ecirc;ng biệt.</p>
<p style="text-align: justify;">Tuy nhi&ecirc;n, khi x&acirc;y dựng trang web lớn hoặc c&oacute; nhiều phần tử cần kiểu d&aacute;ng, n&ecirc;n xem x&eacute;t sử dụng c&aacute;c phương ph&aacute;p kh&aacute;c như internal CSS hoặc external CSS để tạo kiểu một c&aacute;ch ph&ugrave; hợp v&agrave; dễ bảo tr&igrave;. Việc sử dụng inline CSS trong những trường hợp n&agrave;y c&oacute; thể l&agrave;m m&atilde; nguồn trở n&ecirc;n rối rắm v&agrave; kh&oacute; quản l&yacute;.</p>
<p style="text-align: justify;"><span style="font-weight: 400;">[___TIP_Inline CSS kh&ocirc;ng hiệu quả v&agrave; kh&ocirc;ng c&oacute; khả năng mở rộng v&igrave; mỗi thẻ ri&ecirc;ng lẻ sẽ phải ch&egrave;n CSS ri&ecirc;ng biệt. Do đ&oacute;, n&oacute; thường &iacute;t được sử dụng._TIP___]</span></p>
<h2 style="text-align: justify;"><strong>Internal CSS</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">Bạn c&oacute; thể sử dụng thẻ </span><span style="font-weight: 400;"><code>&lt;style&gt;</code></span><span style="font-weight: 400;"> trong phần </span><span style="font-weight: 400;"><code>&lt;head&gt;</code></span><span style="font-weight: 400;"> của HTML nh&uacute;ng CSS trực tiếp v&agrave;o t&agrave;i liệu nhằm định dạng một số thẻ cụ thể. Trong v&iacute; dụ dưới đ&acirc;y, tất cả c&aacute;c ti&ecirc;u đề h3 được định dạng m&agrave;u xanh dương. Phương ph&aacute;p n&agrave;y tốt hơn so với việc sử dụng CSS inline v&igrave; code &iacute;t tr&ugrave;ng lặp, dễ đọc v&agrave; viết v&agrave; hiệu suất tổng thể tốt hơn.</span></p>
<pre class="language-html" data-content="%3Chtml%3E%0A%C2%A0%3Chead%3E%0A%C2%A0%C2%A0%3Cstyle%3E%0A%C2%A0%C2%A0%C2%A0h3%20%7Bcolor%3A%20blue%3B%7D%0A%C2%A0%C2%A0%3C%2Fstyle%3E%0A%C2%A0%3C%2Fhead%3E%0A%C2%A0%3Cbody%3E%0A%C2%A0%C2%A0%C2%A0%3Ch3%3EInternal%20CSS%3C%2Fh3%3E%0A%C2%A0%3C%2Fbody%3E%0A%3C%2Fhtml%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;html&gt;
 &lt;head&gt;
  &lt;style&gt;
   h3 {color: blue;}
  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
   &lt;h3&gt;Internal CSS&lt;/h3&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
<p style="text-align: justify;">Sử dụng internal CSS (CSS nội bộ) khi bạn muốn &aacute;p dụng kiểu d&aacute;ng cho một số phần tử trong trang web cụ thể v&agrave; kh&ocirc;ng cần sử dụng lại kiểu đ&oacute; ở c&aacute;c trang kh&aacute;c. Điều n&agrave;y xảy ra khi 1 website c&oacute; nhiều webpage v&agrave; bạn chỉ muốn &aacute;p dụng kiểu CSS l&ecirc;n 1 webpage cụ thể chứ kh&ocirc;ng phải to&agrave;n bộ website. Dưới đ&acirc;y l&agrave; một số t&igrave;nh huống thường gặp khi n&ecirc;n sử dụng internal CSS:</p>
<h4 style="text-align: justify;">Internal CSS tạo kiểu d&aacute;ng cho một trang web đơn lẻ:</h4>
<p style="text-align: justify;">Khi bạn chỉ muốn tạo kiểu cho trang web duy nhất v&agrave; kh&ocirc;ng cần sử dụng lại kiểu đ&oacute; cho c&aacute;c trang kh&aacute;c, bạn c&oacute; thể sử dụng internal CSS. Bạn c&oacute; thể nh&uacute;ng CSS trực tiếp v&agrave;o phần head của trang web bằng cặp thẻ <code>&lt;style&gt;</code>. V&iacute; dụ:</p>
<pre class="language-html" data-content="%3Chead%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20h1%20%7B%0A%20%20%20%20%20%20color%3A%20blue%3B%0A%20%20%20%20%20%20font-size%3A%2024px%3B%0A%20%20%20%20%7D%0A%20%20%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%3Ch1%3ETi%C3%AAu%20%C4%91%E1%BB%81%3C%2Fh1%3E%0A%3C%2Fbody%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;head&gt;
  &lt;style&gt;
    h1 {
      color: blue;
      font-size: 24px;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Ti&ecirc;u đề&lt;/h1&gt;
&lt;/body&gt;</code></pre>
<h4 style="text-align: justify;">Kiểu d&aacute;ng tạm thời trong qu&aacute; tr&igrave;nh ph&aacute;t triển</h4>
<p style="text-align: justify;">Khi bạn đang ph&aacute;t triển v&agrave; thử nghiệm giao diện trang web, sử dụng internal CSS c&oacute; thể l&agrave;m cho qu&aacute; tr&igrave;nh chỉnh sửa v&agrave; thay đổi kiểu d&aacute;ng trở n&ecirc;n nhanh ch&oacute;ng v&agrave; dễ d&agrave;ng. Bạn c&oacute; thể tạm thời th&ecirc;m c&aacute;c quy tắc CSS v&agrave;o phần head của trang web m&agrave; kh&ocirc;ng cần tạo một tệp CSS ri&ecirc;ng biệt.</p>
<h4 style="text-align: justify;">Kiểu d&aacute;ng cho c&aacute;c phần tử đặc biệt</h4>
<p style="text-align: justify;">Khi bạn chỉ muốn tạo kiểu cho một số phần tử cụ thể trong trang web, sử dụng internal CSS c&oacute; thể l&agrave; lựa chọn tốt. Bạn c&oacute; thể tạo một phần tử <code>&lt;style&gt;</code> trong phần head v&agrave; định nghĩa c&aacute;c quy tắc CSS cho c&aacute;c phần tử đ&oacute;.</p>
<p style="text-align: justify;">Tuy nhi&ecirc;n, nếu trang web của bạn c&oacute; quy m&ocirc; lớn hoặc muốn t&aacute;i sử dụng kiểu d&aacute;ng ở nhiều trang kh&aacute;c nhau, h&atilde;y xem x&eacute;t việc sử dụng external CSS để tạo kiểu v&agrave; quản l&yacute; kiểu d&aacute;ng một c&aacute;ch tốt hơn v&agrave; dễ bảo tr&igrave;.</p>
<h2 style="text-align: justify;"><strong>External CSS</strong></h2>
<p style="text-align: justify;"><span style="font-weight: 400;">CSS thường được viết trong một file ri&ecirc;ng biệt v&agrave; li&ecirc;n kết với HTML. Ưu điểm của c&aacute;ch n&agrave;y l&agrave; CSS c&oacute; thể được t&aacute;i sử dụng bởi c&aacute;c file HTML kh&aacute;c, do đ&oacute;, việc cập nhật trở n&ecirc;n đơn giản hơn v&agrave; c&aacute;c trang web c&oacute; thể được t&ugrave;y chỉnh cho những người d&ugrave;ng, tr&igrave;nh duyệt v&agrave; nền tảng kh&aacute;c nhau.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Bạn c&oacute; thể l&agrave;m điều đ&oacute; bằng c&aacute;ch viết thẻ li&ecirc;n kết tự đ&oacute;ng <code>&lt;link&gt;</code> trong phần head của HTML như sau:</span></p>
<pre class="language-html" data-content="%3Clink%20rel%3D%22stylesheet%22%20href%3D%22cssfilename.css%22%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;link rel="stylesheet" href="cssfilename.css"&gt;</code></pre>
<p style="text-align: justify;"><span style="font-weight: 400;">Thuộc t&iacute;nh </span><code><span style="font-weight: 400;">rel</span></code><span style="font-weight: 400;"> của phần tử li&ecirc;n kết tr&ecirc;n cho biết HTML sẽ nhập file CSS.</span></p>
<pre class="language-html" data-content="%3Chtml%3E%0A%C2%A0%3Chead%3E%0A%C2%A0%C2%A0%C2%A0%3Clink%20rel%3D%22stylesheet%22%20href%3D%22styles.css%22%3E%0A%C2%A0%3C%2Fhead%3E%0A%C2%A0%3Cbody%3E%0A%C2%A0%C2%A0%C2%A0%3Ch3%3EExternal%20CSS%3C%2Fh3%3E%0A%C2%A0%3C%2Fbody%3E%0A%3C%2Fhtml%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;html&gt;
 &lt;head&gt;
   &lt;link rel="stylesheet" href="styles.css"&gt;
 &lt;/head&gt;
 &lt;body&gt;
   &lt;h3&gt;External CSS&lt;/h3&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>Sử dụng external CSS (CSS b&ecirc;n ngo&agrave;i) khi bạn muốn &aacute;p dụng kiểu d&aacute;ng cho nhiều trang trong trang web hoặc khi bạn muốn quản l&yacute; kiểu d&aacute;ng một c&aacute;ch t&aacute;ch biệt v&agrave; dễ bảo tr&igrave;. Dưới đ&acirc;y l&agrave; một số t&igrave;nh huống khi n&ecirc;n sử dụng external CSS:</p>
<h4>&Aacute;p dụng kiểu d&aacute;ng cho nhiều trang</h4>
<p>Khi bạn muốn &aacute;p dụng kiểu d&aacute;ng cho nhiều trang trong trang web, sử dụng external CSS l&agrave; lựa chọn tốt. Bạn c&oacute; thể tạo một tệp CSS ri&ecirc;ng biệt với phần mở rộng <code>.css</code> v&agrave; sau đ&oacute; li&ecirc;n kết n&oacute; với c&aacute;c trang HTML bằng cặp thẻ <code>&lt;link&gt;</code>. Điều n&agrave;y gi&uacute;p bạn t&aacute;i sử dụng kiểu d&aacute;ng tr&ecirc;n c&aacute;c trang kh&aacute;c nhau v&agrave; giảm lặp lại m&atilde;.</p>
<pre class="language-html" data-content="%3Chead%3E%0A%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22styles.css%22%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%3C!--%20N%E1%BB%99i%20dung%20trang%20--%3E%0A%3C%2Fbody%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;head&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;!-- Nội dung trang --&gt;
&lt;/body&gt;</code></pre>
<h4>Quản l&yacute; kiểu d&aacute;ng một c&aacute;ch t&aacute;ch biệt</h4>
<p>Khi bạn muốn quản l&yacute; kiểu d&aacute;ng một c&aacute;ch t&aacute;ch biệt v&agrave; dễ bảo tr&igrave;, sử dụng external CSS l&agrave; lựa chọn tốt. Bằng c&aacute;ch tạo một tệp CSS ri&ecirc;ng biệt, bạn c&oacute; thể tập trung v&agrave;o kiểu d&aacute;ng m&agrave; kh&ocirc;ng cần phải lo lắng về phần c&ograve;n lại của trang web. Điều n&agrave;y gi&uacute;p giữ m&atilde; nguồn gọn g&agrave;ng, dễ đọc v&agrave; dễ bảo tr&igrave;.</p>
<h4>T&iacute;ch hợp CSS từ c&aacute;c nguồn kh&aacute;c nhau</h4>
<p>Khi bạn cần t&iacute;ch hợp CSS từ c&aacute;c nguồn b&ecirc;n ngo&agrave;i, chẳng hạn như c&aacute;c thư viện CSS hoặc tệp CSS được cung cấp bởi b&ecirc;n thứ ba, sử dụng external CSS l&agrave; c&aacute;ch tiếp cận tốt. Bạn c&oacute; thể li&ecirc;n kết c&aacute;c tệp CSS n&agrave;y v&agrave;o trang web của m&igrave;nh bằng c&aacute;ch sử dụng thẻ <code>&lt;link&gt;</code>.</p>
<h4>Tối ưu h&oacute;a hiệu suất v&agrave; bộ nhớ cache</h4>
<p style="text-align: justify;">Sử dụng external CSS cũng c&oacute; lợi cho hiệu suất tải trang web. Với external CSS, bạn c&oacute; thể tối ưu h&oacute;a v&agrave; gộp c&aacute;c tệp CSS th&agrave;nh một tệp duy nhất, gi&uacute;p giảm thời gian tải v&agrave; tăng tốc độ hiển thị trang web. B&ecirc;n cạnh đ&oacute;, tr&igrave;nh duyệt c&oacute; thể lưu trữ bộ nhớ cache cho tệp CSS, cho ph&eacute;p n&oacute; được tải lại nhanh ch&oacute;ng khi người d&ugrave;ng truy cập c&aacute;c trang web kh&aacute;c của bạn.</p>
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap break-words">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p style="text-align: justify;">T&oacute;m lại, sử dụng external CSS l&agrave;m cho m&atilde; nguồn trang web dễ bảo tr&igrave;, tăng t&iacute;nh linh hoạt v&agrave; tối ưu hiệu suất. N&oacute; l&agrave; một c&aacute;ch tiếp cận phổ biến để tạo kiểu d&aacute;ng trang web v&agrave; quản l&yacute; kiểu d&aacute;ng một c&aacute;ch hiệu quả.</p>
<p style="text-align: justify;">Trong phần tiếp theo của kh&oacute;a học, ch&uacute;ng ta sẽ lần lượt đi qua tất cả c&aacute;c c&aacute;ch sử dụng CSS n&agrave;y với c&aacute;c b&agrave;i tập vận dụng chi tiết.</p>
</div>
</div>
<div class="ddict_btn" style="top: 55px; left: 1416.23px;">&nbsp;</div>

Cách thức sử dụng CSS