{"id":22158,"date":"2022-10-02T13:00:49","date_gmt":"2022-10-02T13:00:49","guid":{"rendered":"https:\/\/kb.hostatom.com\/?p=22158"},"modified":"2025-11-07T04:57:13","modified_gmt":"2025-11-07T04:57:13","slug":"html-styles-css","status":"publish","type":"post","link":"https:\/\/kb.hostatom.com\/lesson\/22158\/","title":{"rendered":"HTML\u00a0Styles &#8211; CSS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"22158\" class=\"elementor elementor-22158\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76e70837 e-flex e-con-boxed e-con e-parent\" data-id=\"76e70837\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f30c16 elementor-widget elementor-widget-text-editor\" data-id=\"7f30c16\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><strong>CSS (Cascading Style Sheets)<\/strong> \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a HTML \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e2a\u0e35\u0e2a\u0e31\u0e19 \u0e23\u0e30\u0e22\u0e30\u0e2b\u0e48\u0e32\u0e07 \u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07 \u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a \u0e41\u0e25\u0e30\u0e2d\u0e37\u0e48\u0e19\u0e46 \u0e43\u0e2b\u0e49\u0e21\u0e35\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e41\u0e25\u0e30\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e32\u0e15\u0e32\u0e21\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \u0e0b\u0e36\u0e48\u0e07 CSS \u0e08\u0e30\u0e0a\u0e48\u0e27\u0e22\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14\u0e40\u0e27\u0e25\u0e32 \u0e43\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e41\u0e04\u0e48\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e04\u0e23\u0e31\u0e49\u0e07\u0e40\u0e14\u0e35\u0e22\u0e27\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e1e\u0e08\u0e44\u0e14\u0e49\u0e2b\u0e25\u0e32\u0e22\u0e46 \u0e2b\u0e19\u0e49\u0e32\u0e44\u0e14\u0e49<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9b0855 elementor-widget elementor-widget-image\" data-id=\"b9b0855\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"297\" src=\"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/12\/html-styles-css-001.png\" class=\"attachment-large size-large wp-image-22160\" alt=\"\" srcset=\"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/12\/html-styles-css-001.png 720w, https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/12\/html-styles-css-001-300x124.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f612ff5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"f612ff5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eeec216 elementor-widget elementor-widget-heading\" data-id=\"eeec216\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS \u0e04\u0e37\u0e2d\u0e2d\u0e30\u0e44\u0e23<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba36051 elementor-widget elementor-widget-text-editor\" data-id=\"ba36051\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tCascading Style Sheets (CSS) \u0e43\u0e0a\u0e49\u0e08\u0e31\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e40\u0e04\u0e49\u0e32\u0e42\u0e04\u0e23\u0e07\u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\n\n\u0e0b\u0e36\u0e48\u0e07 CSS \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e2a\u0e35, \u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23, \u0e02\u0e19\u0e32\u0e14\u0e02\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21, \u0e23\u0e30\u0e22\u0e30\u0e2b\u0e48\u0e32\u0e07\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07 Elements, \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e02\u0e2d\u0e07 Elements, \u0e20\u0e32\u0e1e\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e2b\u0e23\u0e37\u0e2d\u0e2a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49, \u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e1a\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e41\u0e25\u0e30\u0e2d\u0e37\u0e48\u0e19\u0e46\u0e2d\u0e35\u0e01\u0e21\u0e32\u0e01\u0e21\u0e32\u0e22\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18d485e elementor-alert-info elementor-widget elementor-widget-alert\" data-id=\"18d485e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"alert.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-alert\" role=\"alert\">\n\n\t\t\t\t\t\t<span class=\"elementor-alert-title\">\ud83d\udcdd  \u0e40\u0e04\u0e25\u0e47\u0e14\u0e25\u0e31\u0e1a<\/span>\n\t\t\t\n\t\t\t\t\t\t<span class=\"elementor-alert-description\">Cascading \u0e2b\u0e21\u0e32\u0e22\u0e16\u0e36\u0e07\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a (Style) \u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a Element \u0e2b\u0e25\u0e31\u0e01 \u0e08\u0e30\u0e2a\u0e48\u0e07\u0e1c\u0e25\u0e15\u0e48\u0e2d Element \u0e22\u0e48\u0e2d\u0e22 \u0e20\u0e32\u0e22\u0e43\u0e19\u0e14\u0e49\u0e27\u0e22 \u0e40\u0e0a\u0e48\u0e19 \u0e2b\u0e32\u0e01\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32  \u0e43\u0e2b\u0e49\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19 \u201c\u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19\u201d \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e43\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d \u0e22\u0e48\u0e2d\u0e2b\u0e19\u0e49\u0e32 \u0e41\u0e25\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e2d\u0e37\u0e48\u0e19 \u0e46 \u0e20\u0e32\u0e22\u0e43\u0e19\u0e01\u0e47\u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e19\u0e31\u0e49\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span>\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-270eac5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"270eac5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03231f1 elementor-widget elementor-widget-heading\" data-id=\"03231f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 CSS\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-623df3c elementor-widget elementor-widget-text-editor\" data-id=\"623df3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 CSS \u0e43\u0e19 HTML \u0e21\u0e35 3 \u0e27\u0e34\u0e18\u0e35\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f95eb5f elementor-widget elementor-widget-text-editor\" data-id=\"f95eb5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li>Inline \u2013 \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e02\u0e2d\u0e07 Attribute \u0e20\u0e32\u0e22\u0e43\u0e19 Elements HTML<\/li>\n<li>Internal \u2013 \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 Tag Element <code>&lt;style&gt;<\/code> \u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19 <code>&lt;head&gt;<\/code><\/li>\n<li>External \u2013 \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 Tag Elements <code>&lt;link&gt;<\/code> \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c CSS \u0e08\u0e32\u0e01\u0e17\u0e35\u0e48\u0e2d\u0e37\u0e48\u0e19<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-99e7ffc elementor-widget elementor-widget-text-editor\" data-id=\"99e7ffc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e0b\u0e36\u0e48\u0e07\u0e42\u0e14\u0e22\u0e2a\u0e48\u0e27\u0e19\u0e43\u0e2b\u0e0d\u0e48\u0e08\u0e30\u0e43\u0e02\u0e49\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e01 CSS \u0e08\u0e32\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01 \u0e2b\u0e23\u0e37\u0e2d\u0e27\u0e34\u0e18\u0e35\u0e17\u0e35\u0e48 3 \u0e41\u0e15\u0e48\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e23\u0e01\u0e47\u0e15\u0e32\u0e21 \u0e43\u0e19\u0e1a\u0e17\u0e40\u0e23\u0e35\u0e22\u0e19\u0e19\u0e35\u0e49\u0e08\u0e30\u0e43\u0e0a\u0e49\u0e27\u0e34\u0e18\u0e35\u0e17\u0e35\u0e48 1 \u0e41\u0e25\u0e30 2 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e07\u0e48\u0e32\u0e22\u0e15\u0e48\u0e2d\u0e01\u0e32\u0e23\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85a2f6d elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"85a2f6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-997b03a elementor-widget elementor-widget-heading\" data-id=\"997b03a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Inline CSS\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1bcf038 elementor-widget elementor-widget-text-editor\" data-id=\"1bcf038\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tInline CSS \u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a Tag \u0e2b\u0e23\u0e37\u0e2d Element HTML \u0e40\u0e09\u0e1e\u0e32\u0e30\u0e15\u0e31\u0e27 \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49\u0e41\u0e2d\u0e15\u0e17\u0e23\u0e34\u0e1a\u0e34\u0e27\u0e15\u0e4c <code>style<\/code> \u0e20\u0e32\u0e22\u0e43\u0e19\u0e41\u0e17\u0e47\u0e01\u0e19\u0e31\u0e49\u0e19\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07\n\n\u0e40\u0e0a\u0e48\u0e19 \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e2a\u0e35\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e43\u0e19 <code>&lt;h1&gt;<\/code> \u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19 \u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e43\u0e19 <code>&lt;p&gt;<\/code> \u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e41\u0e14\u0e07\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e4dd17 elementor-widget elementor-widget-code-highlight\" data-id=\"3e4dd17\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><h1 style=\"color:blue;\">\u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19\u0e04\u0e37\u0e2d\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d<\/h1>\r\n\r\n<p style=\"color:red;\">\u0e2a\u0e35\u0e41\u0e14\u0e07\u0e04\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21<\/p><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d58442 elementor-widget elementor-widget-button\" data-id=\"0d58442\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=css_inline\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25e1852 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"25e1852\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8bf7e5a elementor-widget elementor-widget-heading\" data-id=\"8bf7e5a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Internal CSS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13a2b76 elementor-widget elementor-widget-text-editor\" data-id=\"13a2b76\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tInternal CSS \u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e2b\u0e19\u0e49\u0e32 HTML \u0e40\u0e1e\u0e35\u0e22\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e14\u0e35\u0e22\u0e27 \u0e42\u0e14\u0e22\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e27\u0e49\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19 <code>&lt;head&gt;<\/code> \u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e1e\u0e08 \u0e20\u0e32\u0e22\u0e43\u0e15\u0e49 Element <code>&lt;style&gt;<\/code> \u0e40\u0e0a\u0e48\u0e19 \u0e43\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49 \u0e08\u0e30\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e2a\u0e35\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e43\u0e19 <code>&lt;h1&gt;<\/code> \u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19, \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e43\u0e19 <code>&lt;p&gt;<\/code> \u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e41\u0e14\u0e07 \u0e41\u0e25\u0e30\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e1e\u0e08\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e1f\u0e49\u0e32 (powderblue)\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f26572 elementor-widget elementor-widget-code-highlight\" data-id=\"6f26572\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {background-color: powderblue;}\r\nh1   {color: blue;}\r\np    {color: red;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d<\/h1>\r\n<p>\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21<\/p>\r\n\r\n<\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-879b81c elementor-widget elementor-widget-button\" data-id=\"879b81c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=css_internal\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b0ae832 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"b0ae832\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1d95bf elementor-widget elementor-widget-heading\" data-id=\"c1d95bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">External CSS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a7f7b9 elementor-widget elementor-widget-text-editor\" data-id=\"8a7f7b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tExternal CSS \u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a HTML \u0e2b\u0e25\u0e32\u0e22\u0e2b\u0e19\u0e49\u0e32 \u0e42\u0e14\u0e22\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e41\u0e17\u0e47\u0e01 <code>&lt;link&gt;<\/code> \u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19 <code>&lt;head&gt;<\/code> \u0e02\u0e2d\u0e07\u0e41\u0e15\u0e48\u0e25\u0e30\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e1e\u0e08 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e42\u0e22\u0e07\u0e01\u0e31\u0e1a\u0e44\u0e1f\u0e25\u0e4c CSS \u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42ae3ed elementor-widget elementor-widget-code-highlight\" data-id=\"42ae3ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n\r\n<h1>\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d<\/h1>\r\n<p>\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21<\/p>\r\n\r\n<\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd3a5bb elementor-widget elementor-widget-button\" data-id=\"fd3a5bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=css_external\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15c5302 elementor-widget elementor-widget-spacer\" data-id=\"15c5302\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b7f567 elementor-widget elementor-widget-text-editor\" data-id=\"8b7f567\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>External Style Sheet \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e35\u0e22\u0e19\u0e43\u0e19\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21 Text Editor \u0e43\u0e14\u0e01\u0e47\u0e44\u0e14\u0e49 \u0e41\u0e15\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e42\u0e04\u0e49\u0e14 HTML \u0e41\u0e25\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e14\u0e49\u0e27\u0e22\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25 .css \u0e22\u0e01\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e0a\u0e48\u0e19\u0e44\u0e1f\u0e25\u0e4c <code>styles.css<\/code><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7b5083 elementor-widget elementor-widget-code-highlight\" data-id=\"f7b5083\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>body {\r\n  background-color: powderblue;\r\n}\r\nh1 {\r\n  color: blue;\r\n}\r\np {\r\n  color: red;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5ed868 elementor-alert-info elementor-widget elementor-widget-alert\" data-id=\"a5ed868\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"alert.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-alert\" role=\"alert\">\n\n\t\t\t\t\t\t<span class=\"elementor-alert-title\">\ud83d\udcdd  \u0e40\u0e04\u0e25\u0e47\u0e14\u0e25\u0e31\u0e1a<\/span>\n\t\t\t\n\t\t\t\t\t\t<span class=\"elementor-alert-description\">\u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e17\u0e38\u0e01\u0e2b\u0e19\u0e49\u0e32\u0e1c\u0e48\u0e32\u0e19\u0e17\u0e32\u0e07 External Style Sheet \u0e40\u0e1e\u0e35\u0e22\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e14\u0e35\u0e22\u0e27\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19!!<\/span>\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d95c6f elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"2d95c6f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19f8ede elementor-widget elementor-widget-heading\" data-id=\"19f8ede\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Colors, Fonts \u0e41\u0e25\u0e30 Sizes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86cde24 elementor-widget elementor-widget-text-editor\" data-id=\"86cde24\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e02\u0e2d\u0e07 CSS \u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e01\u0e31\u0e19\u0e42\u0e14\u0e22\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b \u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e19\u0e35\u0e49\u0e08\u0e30\u0e44\u0e14\u0e49\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e20\u0e32\u0e22\u0e2b\u0e25\u0e31\u0e07 \u0e41\u0e15\u0e48\u0e15\u0e2d\u0e19\u0e19\u0e35\u0e49\u0e08\u0e30\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a \u0e2a\u0e35, \u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23, \u0e41\u0e25\u0e30 \u0e02\u0e19\u0e32\u0e14\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7c761c elementor-widget elementor-widget-text-editor\" data-id=\"f7c761c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul><li>\ud83c\udfa8 <code>color<\/code>\u00a0 \u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e35\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23<\/li><li>\u270d\ufe0f <code>font-family<\/code>\u00a0 \u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49<\/li><li>\ud83d\udd20 <code>font-size<\/code>\u00a0 \u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e02\u0e19\u0e32\u0e14\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df2adae elementor-widget elementor-widget-code-highlight\" data-id=\"df2adae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {\r\n  color: blue;\r\n  font-family: kanit;\r\n  font-size: 300%;\r\n\r\n}\r\np  {\r\n  color: red;\r\n  font-family: courier;\r\n  font-size: 160%;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d<\/h1>\r\n<p>\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21<\/p>\r\n\r\n<\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b455143 elementor-widget elementor-widget-button\" data-id=\"b455143\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=css_fonts\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e682808 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"e682808\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aed61e4 elementor-widget elementor-widget-heading\" data-id=\"aed61e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Border<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4326b0d elementor-widget elementor-widget-text-editor\" data-id=\"4326b0d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tCSS <code>border<\/code> \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14 \u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a\u0e23\u0e2d\u0e1a \u0e46 Elements \u0e02\u0e2d\u0e07 HTML\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f685105 elementor-widget elementor-widget-code-highlight\" data-id=\"f685105\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>p {\r\n  border: 2px solid powderblue;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e5702e elementor-widget elementor-widget-button\" data-id=\"7e5702e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=css_borders\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f648b43 elementor-alert-info elementor-widget elementor-widget-alert\" data-id=\"f648b43\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"alert.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-alert\" role=\"alert\">\n\n\t\t\t\t\t\t<span class=\"elementor-alert-title\">\ud83d\udcdd  \u0e40\u0e04\u0e25\u0e47\u0e14\u0e25\u0e31\u0e1a<\/span>\n\t\t\t\n\t\t\t\t\t\t<span class=\"elementor-alert-description\">\u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e2a\u0e49\u0e19\u0e01\u0e23\u0e2d\u0e1a\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a Element \u0e02\u0e2d\u0e07 HTML \u0e40\u0e01\u0e37\u0e2d\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e44\u0e14\u0e49\n<\/span>\n\t\t\t\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d27b347 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"d27b347\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d78b2d2 elementor-widget elementor-widget-heading\" data-id=\"d78b2d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Padding<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3990565 elementor-widget elementor-widget-text-editor\" data-id=\"3990565\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tCSS <code>padding<\/code> \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e30\u0e22\u0e30\u0e2b\u0e48\u0e32\u0e07\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 (\u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32) \u0e01\u0e31\u0e1a \u0e02\u0e2d\u0e1a\u0e02\u0e2d\u0e07 Element\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-533e08e elementor-widget elementor-widget-code-highlight\" data-id=\"533e08e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>p {\r\n  border: 2px solid powderblue;\r\n  padding: 30px;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d90ee6 elementor-widget elementor-widget-button\" data-id=\"9d90ee6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=css_padding\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67f92f3 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"67f92f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-240350f elementor-widget elementor-widget-heading\" data-id=\"240350f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Margin<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-40cab2d elementor-widget elementor-widget-text-editor\" data-id=\"40cab2d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tCSS <code>margin<\/code> \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e30\u0e22\u0e30\u0e2b\u0e48\u0e32\u0e07 \u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01\u0e02\u0e2d\u0e1a (outer space) \u0e02\u0e2d\u0e07 Element\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9dc41f6 elementor-widget elementor-widget-code-highlight\" data-id=\"9dc41f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>p {\r\n  border: 2px solid powderblue;\r\n  margin: 50px;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e83c0d2 elementor-widget elementor-widget-button\" data-id=\"e83c0d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=css_margin\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15d1aba elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"15d1aba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb12516 elementor-widget elementor-widget-heading\" data-id=\"bb12516\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Link to External CSS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2d87ae elementor-widget elementor-widget-text-editor\" data-id=\"d2d87ae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tExternal Style Sheets \u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07 URL \u0e41\u0e1a\u0e1a\u0e40\u0e15\u0e47\u0e21 \u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e2a\u0e49\u0e19\u0e17\u0e32\u0e07\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e1e\u0e08\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c035cf8 elementor-widget elementor-widget-text-editor\" data-id=\"c035cf8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tLink \u0e44\u0e1b\u0e22\u0e31\u0e07 Style Sheet \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 URL \u0e41\u0e1a\u0e1a\u0e40\u0e15\u0e47\u0e21\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5901d92 elementor-widget elementor-widget-code-highlight\" data-id=\"5901d92\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><link rel=\"stylesheet\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/styles.css\"><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8492801 elementor-widget elementor-widget-button\" data-id=\"8492801\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=css_external_url\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9861988 elementor-widget elementor-widget-spacer\" data-id=\"9861988\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d67a7a7 elementor-widget elementor-widget-text-editor\" data-id=\"d67a7a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tLink \u0e44\u0e1b\u0e22\u0e31\u0e07 Style Sheet \u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19 Folder HTML \u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d10e2b5 elementor-widget elementor-widget-code-highlight\" data-id=\"d10e2b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><link rel=\"stylesheet\" href=\"\/lesson\/html\/styles.css\"><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1acd6de elementor-widget elementor-widget-button\" data-id=\"1acd6de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=css_external_relative\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-155909f elementor-widget elementor-widget-spacer\" data-id=\"155909f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4c8cb2 elementor-widget elementor-widget-text-editor\" data-id=\"f4c8cb2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tLink \u0e44\u0e1b\u0e22\u0e31\u0e07 Style Sheet \u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19 Folder \u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e1e\u0e08\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c8f3ec elementor-widget elementor-widget-code-highlight\" data-id=\"2c8f3ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><link rel=\"stylesheet\" href=\"styles.css\"><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f564e3 elementor-widget elementor-widget-button\" data-id=\"9f564e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=css_external\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e14\u0e39\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a82b34d elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"a82b34d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7ca03d elementor-widget elementor-widget-heading\" data-id=\"b7ca03d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0e2a\u0e23\u0e38\u0e1b<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91f2425 elementor-widget elementor-widget-text-editor\" data-id=\"91f2425\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li>HTML <code>style<\/code> \u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14 Inline CSS<\/li>\n<li>HTML <code>&lt;style&gt;<\/code> \u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14 CSS \u0e41\u0e1a\u0e1a Internal<\/li>\n<li>HTML <code>&lt;link&gt;<\/code> \u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07\u0e44\u0e1f\u0e25\u0e4c CSS \u0e08\u0e32\u0e01\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01 (External CSS)<\/li>\n<li>HTML <code>&lt;head&gt;<\/code> \u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e01\u0e47\u0e1a <code>&lt;style&gt;<\/code> \u0e41\u0e25\u0e30 <code>&lt;link&gt;<\/code><\/li>\n<li>CSS <code>color<\/code> \u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14 \u0e2a\u0e35\u0e02\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21<\/li>\n<li>CSS <code>font-family<\/code> \u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14 \u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e02\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21<\/li>\n<li>CSS <code>font-size<\/code> \u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14 \u0e02\u0e19\u0e32\u0e14\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23<\/li>\n<li>CSS <code>border<\/code> \u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e33\u0e2b\u0e19\u0e14 \u0e02\u0e2d\u0e1a\u0e02\u0e2d\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a (Element border)<\/li>\n<li>CSS <code>padding<\/code> \u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e33\u0e2b\u0e19\u0e14 \u0e23\u0e30\u0e22\u0e30\u0e2b\u0e48\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e01\u0e31\u0e1a\u0e02\u0e2d\u0e1a (inner space)<\/li>\n<li>CSS <code>margin<\/code> \u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14 \u0e23\u0e30\u0e22\u0e30\u0e2b\u0e48\u0e32\u0e07\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01\u0e02\u0e2d\u0e1a (outer space)<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CSS (Cascading Style Sheets) \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a HTML \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e2a\u0e35\u0e2a\u0e31\u0e19 \u0e23\u0e30\u0e22\u0e30\u0e2b\u0e48\u0e32\u0e07 \u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07 \u0e40\u0e2a\u0e49\u0e19\u0e02\u0e2d\u0e1a \u0e41\u0e25\u0e30\u0e2d\u0e37\u0e48\u0e19\u0e46 \u0e43\u0e2b\u0e49\u0e21\u0e35\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e41\u0e25\u0e30\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e32\u0e15\u0e32\u0e21\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \u0e0b\u0e36\u0e48\u0e07 CSS \u0e08\u0e30\u0e0a\u0e48\u0e27\u0e22\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14\u0e40\u0e27\u0e25\u0e32 \u0e43\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e41\u0e04\u0e48\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e04\u0e23\u0e31\u0e49\u0e07\u0e40\u0e14\u0e35\u0e22\u0e27\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e1e\u0e08\u0e44\u0e14\u0e49\u0e2b\u0e25\u0e32\u0e22\u0e46 \u0e2b\u0e19\u0e49\u0e32\u0e44\u0e14\u0e49 CSS \u0e04\u0e37\u0e2d\u0e2d\u0e30\u0e44\u0e23 Cascading Style Sheets (CSS) \u0e43\u0e0a\u0e49\u0e08\u0e31\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e40\u0e04\u0e49\u0e32\u0e42\u0e04\u0e23\u0e07\u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e0b\u0e36\u0e48\u0e07 CSS \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e2a\u0e35, \u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23, \u0e02\u0e19\u0e32\u0e14\u0e02\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21, \u0e23\u0e30\u0e22\u0e30\u0e2b\u0e48\u0e32\u0e07\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07 Elements, \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e02\u0e2d\u0e07 Elements, \u0e20\u0e32\u0e1e\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e2b\u0e23\u0e37\u0e2d\u0e2a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49, \u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e1a\u0e19\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e41\u0e25\u0e30\u0e2d\u0e37\u0e48\u0e19\u0e46\u0e2d\u0e35\u0e01\u0e21\u0e32\u0e01\u0e21\u0e32\u0e22 \ud83d\udcdd \u0e40\u0e04\u0e25\u0e47\u0e14\u0e25\u0e31\u0e1a Cascading \u0e2b\u0e21\u0e32\u0e22\u0e16\u0e36\u0e07\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a (Style) \u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a Element \u0e2b\u0e25\u0e31\u0e01 \u0e08\u0e30\u0e2a\u0e48\u0e07\u0e1c\u0e25\u0e15\u0e48\u0e2d Element \u0e22\u0e48\u0e2d\u0e22 \u0e20\u0e32\u0e22\u0e43\u0e19\u0e14\u0e49\u0e27\u0e22 \u0e40\u0e0a\u0e48\u0e19 \u0e2b\u0e32\u0e01\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 \u0e43\u0e2b\u0e49\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19 \u201c\u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19\u201d \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e43\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d \u0e22\u0e48\u0e2d\u0e2b\u0e19\u0e49\u0e32 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-22158","post","type-post","status-publish","format-standard","hentry","category-html"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts\/22158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/comments?post=22158"}],"version-history":[{"count":0,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts\/22158\/revisions"}],"wp:attachment":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/media?parent=22158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/categories?post=22158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/tags?post=22158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}