{"id":24204,"date":"2022-10-04T14:00:58","date_gmt":"2022-10-04T14:00:58","guid":{"rendered":"https:\/\/kb.hostatom.com\/?p=24204"},"modified":"2025-10-20T08:45:59","modified_gmt":"2025-10-20T08:45:59","slug":"html-class-attribute","status":"publish","type":"post","link":"https:\/\/kb.hostatom.com\/lesson\/24204\/","title":{"rendered":"HTML\u00a0Class Attribute"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"24204\" class=\"elementor elementor-24204\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50d2bde3 e-flex e-con-boxed e-con e-parent\" data-id=\"50d2bde3\" 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-0a19332 elementor-widget elementor-widget-text-editor\" data-id=\"0a19332\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tAttribute <code>class<\/code> \u0e21\u0e31\u0e01\u0e16\u0e39\u0e01\u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\n\n\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e42\u0e22\u0e07\u0e01\u0e31\u0e1a\u0e0a\u0e37\u0e48\u0e2d Class \u0e43\u0e19 Style Sheet (CSS)\n\n\u0e43\u0e0a\u0e49\u0e42\u0e14\u0e22 JavaScript \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a (Elements) \u0e17\u0e35\u0e48\u0e21\u0e35\u0e0a\u0e37\u0e48\u0e2d Class \u0e19\u0e31\u0e49\u0e19\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5c5522 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"d5c5522\" 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-613a48a elementor-widget elementor-widget-heading\" data-id=\"613a48a\" 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 Class Attribute\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a2580e elementor-widget elementor-widget-text-editor\" data-id=\"6a2580e\" 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>Attribute <code>class<\/code> \u0e21\u0e31\u0e01\u0e16\u0e39\u0e01\u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e32\u0e2a\u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e44\u0e27\u0e49\u0e43\u0e19 Style Sheet (CSS) \u0e19\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e19\u0e35\u0e49\u0e22\u0e31\u0e07\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a JavaScript \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a (Elements) \u0e17\u0e35\u0e48\u0e21\u0e35\u0e0a\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e32\u0e2a\u0e19\u0e31\u0e49\u0e19\u0e44\u0e14\u0e49<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-220c1cb elementor-widget elementor-widget-text-editor\" data-id=\"220c1cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e41\u0e2a\u0e14\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 <code>&lt;div&gt;<\/code> \u0e17\u0e31\u0e49\u0e07 3 \u0e15\u0e31\u0e27 \u0e42\u0e14\u0e22\u0e21\u0e35 <code>class=\"city\"<\/code> \u0e0b\u0e36\u0e48\u0e07\u0e16\u0e39\u0e01\u0e08\u0e31\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e14\u0e49\u0e27\u0e22 CSS \u0e0a\u0e37\u0e48\u0e2d <code>.city<\/code>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6dcd31a elementor-widget elementor-widget-code-highlight\" data-id=\"6dcd31a\" 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\n.city {\r\n  background-color: tomato;\r\n  color: white;\r\n  border: 2px solid black;\r\n  margin: 20px;\r\n  padding: 20px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"city\">\r\n<h2>London<\/h2>\r\n<p>London is the capital of England.<\/p>\r\n<\/div> \r\n\r\n<div class=\"city\">\r\n<h2>Paris<\/h2>\r\n<p>Paris is the capital of France.<\/p>\r\n<\/div>\r\n\r\n<div class=\"city\">\r\n<h2>Tokyo<\/h2>\r\n<p>Tokyo is the capital of Japan.<\/p>\r\n<\/div>\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-dda583b elementor-widget elementor-widget-button\" data-id=\"dda583b\" 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=classes_capitals\" 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-41ecb09 elementor-widget elementor-widget-spacer\" data-id=\"41ecb09\" 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-75dc90f elementor-widget elementor-widget-text-editor\" data-id=\"75dc90f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49\u0e43\u0e0a\u0e49 <code>&lt;span&gt;<\/code> \u0e2a\u0e2d\u0e07\u0e15\u0e31\u0e27 \u0e42\u0e14\u0e22\u0e21\u0e35 <code>class=\"note\"<\/code> \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e01\u0e31\u0e19\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95bc2b8 elementor-widget elementor-widget-code-highlight\" data-id=\"95bc2b8\" 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\n.note {\r\n  font-size: 120%;\r\n  color: red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d <span class=\"note\">\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d<\/span> \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07<\/h1>\r\n<p>\u0e19\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e1a\u0e32\u0e07\u0e2a\u0e48\u0e27\u0e19 <span class=\"note\">\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e04\u0e31\u0e0d<\/span> \u0e02\u0e2d\u0e07\u0e1a\u0e17\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-f84ada4 elementor-widget elementor-widget-button\" data-id=\"f84ada4\" 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=classes_span\" 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-b1b9ea4 elementor-alert-warning elementor-widget elementor-widget-alert\" data-id=\"b1b9ea4\" 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\">\u26a0\ufe0f \u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38<\/span>\n\t\t\t\n\t\t\t\t\t\t<span class=\"elementor-alert-description\"><code>Attribute class<\/code> \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49\u0e44\u0e14\u0e49\u0e01\u0e31\u0e1a Element HTML \u0e17\u0e38\u0e01\u0e0a\u0e19\u0e34\u0e14 \u0e23\u0e30\u0e27\u0e31\u0e07\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e40\u0e25\u0e47\u0e01\u2013\u0e43\u0e2b\u0e0d\u0e48\u0e02\u0e2d\u0e07\u0e0a\u0e37\u0e48\u0e2d Class \u0e14\u0e49\u0e27\u0e22!<\/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-9c11a8f elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"9c11a8f\" 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-c8184ba elementor-widget elementor-widget-heading\" data-id=\"c8184ba\" 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\">Syntax \u0e02\u0e2d\u0e07 Class<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb4227f elementor-widget elementor-widget-text-editor\" data-id=\"fb4227f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07 Class \u0e43\u0e19 CSS \u0e43\u0e0a\u0e49\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e08\u0e38\u0e14 (<code>.<\/code>) \u0e19\u0e33\u0e2b\u0e19\u0e49\u0e32\u0e0a\u0e37\u0e48\u0e2d Class\n\u0e41\u0e25\u0e49\u0e27\u0e01\u0e33\u0e2b\u0e19\u0e14 CSS Properties \u0e20\u0e32\u0e22\u0e43\u0e19 <code>{ }<\/code>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d06048b elementor-widget elementor-widget-code-highlight\" data-id=\"d06048b\" 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\n.city {\r\n  background-color: tomato;\r\n  color: white;\r\n  padding: 10px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>The class Attribute<\/h2>\r\n<p>\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 CSS \u0e01\u0e31\u0e1a style Elements \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49\u0e0a\u0e37\u0e48\u0e2d class \u0e27\u0e48\u0e32 \"city\":<\/p>\r\n\r\n<h2 class=\"city\">London<\/h2>\r\n<p>London is the capital of England.<\/p>\r\n\r\n<h2 class=\"city\">Paris<\/h2>\r\n<p>Paris is the capital of France.<\/p>\r\n\r\n<h2 class=\"city\">Tokyo<\/h2>\r\n<p>Tokyo is the capital of Japan.<\/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-dbc22d4 elementor-widget elementor-widget-button\" data-id=\"dbc22d4\" 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=classes_css\" 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-42f2373 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"42f2373\" 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-8cdab4b elementor-widget elementor-widget-heading\" data-id=\"8cdab4b\" 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\">Multiple Classes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0f5b130 elementor-widget elementor-widget-text-editor\" data-id=\"0f5b130\" 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>Element \u0e2b\u0e19\u0e36\u0e48\u0e07\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e21\u0e35\u0e44\u0e14\u0e49 <strong>\u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32\u0e2b\u0e19\u0e36\u0e48\u0e07 Class<\/strong> <br \/>\u0e42\u0e14\u0e22\u0e04\u0e31\u0e48\u0e19\u0e0a\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e32\u0e2a\u0e41\u0e15\u0e48\u0e25\u0e30\u0e2d\u0e31\u0e19\u0e14\u0e49\u0e27\u0e22 <strong>\u0e0a\u0e48\u0e2d\u0e07\u0e27\u0e48\u0e32\u0e07<\/strong> <br \/>\u0e40\u0e0a\u0e48\u0e19<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c7fa11 elementor-widget elementor-widget-code-highlight\" data-id=\"3c7fa11\" 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><div class=\"city main\">\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-9bb7c6a elementor-widget elementor-widget-text-editor\" data-id=\"9bb7c6a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e35\u0e49 <code>&lt;h2&gt;<\/code> \u0e15\u0e31\u0e27\u0e41\u0e23\u0e01\u0e21\u0e35\u0e17\u0e31\u0e49\u0e07 Class <code>city<\/code> \u0e41\u0e25\u0e30 <code>main<\/code>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d83b71d elementor-widget elementor-widget-code-highlight\" data-id=\"d83b71d\" 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><h2 class=\"city main\">London<\/h2>\r\n<h2 class=\"city\">Paris<\/h2>\r\n<h2 class=\"city\">Tokyo<\/h2><\/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-fe40852 elementor-widget elementor-widget-button\" data-id=\"fe40852\" 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=classes_multiple\" 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-56870c2 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"56870c2\" 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-6a2e1b6 elementor-widget elementor-widget-heading\" data-id=\"6a2e1b6\" 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\">Elements \u0e15\u0e48\u0e32\u0e07\u0e01\u0e31\u0e19 \u0e43\u0e0a\u0e49 Class \u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\u0e44\u0e14\u0e49<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd69d31 elementor-widget elementor-widget-text-editor\" data-id=\"bd69d31\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e41\u0e21\u0e49\u0e27\u0e48\u0e32 Element \u0e08\u0e30\u0e15\u0e48\u0e32\u0e07\u0e0a\u0e19\u0e34\u0e14\u0e01\u0e31\u0e19 \u0e01\u0e47\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49 Class \u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e41\u0e0a\u0e23\u0e4c\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\u0e44\u0e14\u0e49\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-643e873 elementor-widget elementor-widget-code-highlight\" data-id=\"643e873\" 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><h2 class=\"city\">Paris<\/h2>\r\n<p class=\"city\">Paris is the capital of France<\/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-240cf80 elementor-widget elementor-widget-button\" data-id=\"240cf80\" 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=classes_tags\" 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-e59f97a elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"e59f97a\" 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-f0d9c44 elementor-widget elementor-widget-heading\" data-id=\"f0d9c44\" 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 Class \u0e01\u0e31\u0e1a JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-48000e9 elementor-widget elementor-widget-text-editor\" data-id=\"48000e9\" 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>JavaScript \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 Elements \u0e14\u0e49\u0e27\u0e22\u0e0a\u0e37\u0e48\u0e2d Class \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 <code>document.getElementsByClassName()<\/code><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a68c4f elementor-widget elementor-widget-code-highlight\" data-id=\"5a68c4f\" 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-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><script>\r\nfunction myFunction() {\r\n  var x = document.getElementsByClassName(\"city\");\r\n  for (var i = 0; i < x.length; i++) {\r\n    x[i].style.display = \"none\";\r\n  }\r\n}\r\n<\/script>\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-9cea114 elementor-widget elementor-widget-button\" data-id=\"9cea114\" 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=classes_js\" 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-32cb614 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"32cb614\" 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-ccf2d55 elementor-widget elementor-widget-heading\" data-id=\"ccf2d55\" 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-ef8bbc1 elementor-widget elementor-widget-text-editor\" data-id=\"ef8bbc1\" 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><code>class<\/code> \u0e43\u0e0a\u0e49\u0e23\u0e30\u0e1a\u0e38\u0e0a\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a Elements \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e49\u0e2d\u0e22 1 \u0e0a\u0e37\u0e48\u0e2d<\/li>\n<li>CSS \u0e41\u0e25\u0e30 JavaScript \u0e43\u0e0a\u0e49\u0e0a\u0e37\u0e48\u0e2d Class \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07 Elements \u0e44\u0e14\u0e49<\/li>\n<li><code>class<\/code> \u0e43\u0e0a\u0e49\u0e44\u0e14\u0e49\u0e01\u0e31\u0e1a\u0e17\u0e38\u0e01 Element HTML<\/li>\n<li>\u0e23\u0e30\u0e27\u0e31\u0e07\u0e15\u0e31\u0e27\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e40\u0e25\u0e47\u0e01\u2013\u0e43\u0e2b\u0e0d\u0e48\u0e02\u0e2d\u0e07\u0e0a\u0e37\u0e48\u0e2d Class<\/li>\n<li>Elements \u0e15\u0e48\u0e32\u0e07\u0e0a\u0e19\u0e34\u0e14\u0e01\u0e31\u0e19\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49 Class \u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19\u0e44\u0e14\u0e49<\/li>\n<li>JavaScript \u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07 Elements \u0e14\u0e49\u0e27\u0e22 <code>getElementsByClassName()<\/code><\/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>Attribute class \u0e21\u0e31\u0e01\u0e16\u0e39\u0e01\u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d \u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e42\u0e22\u0e07\u0e01\u0e31\u0e1a\u0e0a\u0e37\u0e48\u0e2d Class \u0e43\u0e19 Style Sheet (CSS) \u0e43\u0e0a\u0e49\u0e42\u0e14\u0e22 JavaScript \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a (Elements) \u0e17\u0e35\u0e48\u0e21\u0e35\u0e0a\u0e37\u0e48\u0e2d Class \u0e19\u0e31\u0e49\u0e19 \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 Class Attribute Attribute class \u0e21\u0e31\u0e01\u0e16\u0e39\u0e01\u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e32\u0e2a\u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e44\u0e27\u0e49\u0e43\u0e19 Style Sheet (CSS) \u0e19\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e19\u0e35\u0e49\u0e22\u0e31\u0e07\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a JavaScript \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a (Elements) \u0e17\u0e35\u0e48\u0e21\u0e35\u0e0a\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e32\u0e2a\u0e19\u0e31\u0e49\u0e19\u0e44\u0e14\u0e49 \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e41\u0e2a\u0e14\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 &lt;div&gt; \u0e17\u0e31\u0e49\u0e07 3 \u0e15\u0e31\u0e27 \u0e42\u0e14\u0e22\u0e21\u0e35 class=&#8221;city&#8221; \u0e0b\u0e36\u0e48\u0e07\u0e16\u0e39\u0e01\u0e08\u0e31\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e14\u0e49\u0e27\u0e22 CSS \u0e0a\u0e37\u0e48\u0e2d .city London London is the capital of England. Paris Paris is the capital of France. [&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-24204","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\/24204","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=24204"}],"version-history":[{"count":0,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts\/24204\/revisions"}],"wp:attachment":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/media?parent=24204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/categories?post=24204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/tags?post=24204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}