initial commit

14 files changed, 1934 insertions, 0 deletions

diff --git a/files/id/web/css/@font-face/font-display/index.html b/files/id/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..50fed7426a
--- /dev/null
+++ b/files/id/web/css/@font-face/font-display/index.html
@@ -0,0 +1,101 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>font-display</code></strong> descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.</p>
+
+<h2 id="The_font_display_timeline">The font display timeline</h2>
+
+<p>The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face.</p>
+
+<dl>
+ <dt>Font block period</dt>
+ <dd>If the font face is not loaded, any element attempting to use it must render an <em>invisible</em> fallback font face. If the font face successfully loads during this period, it is used normally.</dd>
+ <dt>Font swap period</dt>
+ <dd>If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.</dd>
+ <dt>Font failure period</dt>
+ <dd>If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css;">/* Keyword values */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>The font display strategy is defined by the user agent.</dd>
+ <dt><code>block</code></dt>
+ <dd>Gives the font face a short block period and an infinite swap period.</dd>
+ <dt><code>swap</code></dt>
+ <dd>Gives the font face an extremely small block period and an infinite swap period.</dd>
+ <dt><code>fallback</code></dt>
+ <dd>Gives the font face an extremely small block period and a short swap period.</dd>
+ <dt><code>optional</code></dt>
+ <dd>Gives the font face an extremely small block period and no swap period.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: css; highlight[7]">@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/id/web/css/@font-face/index.html b/files/id/web/css/@font-face/index.html
new file mode 100644
index 0000000000..940386b922
--- /dev/null
+++ b/files/id/web/css/@font-face/index.html
@@ -0,0 +1,199 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - '@font-face'
+  - At-rule
+  - CSS
+  - CSS Fonts
+  - Fonts
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - typography
+translation_of: Web/CSS/@font-face
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">The <strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">at-rule</a> specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.</span> If the <code>local()</code> function is provided, specifying a font name to look for on the user's computer, and the {{Glossary("user agent")}} finds a match, that local font is used. Otherwise, the font resource specified using the <code>url()</code> function is downloaded and used.</p>
+
+<p>By allowing authors to provide their own fonts, <code>@font-face</code> makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an Internet connection.</p>
+
+<p>It's common to use both <code>url()</code> and <code>local()</code> together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.</p>
+
+<p>The <code>@font-face</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">CSS conditional-group at-rule</a>.</p>
+
+<pre class="brush: css no-line-numbers">@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
+ <dd>Determines how a font face is displayed based on whether and when it is downloaded and ready to use.</dd>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>Specifies a name that will be used as the font face value for font properties.</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>A {{cssxref("font-stretch")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-stretch: 50% 200%;</code></dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>A {{cssxref("font-style")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-style: oblique 20deg 50deg;</code></dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>A {{cssxref("font-weight")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example <code>font-weight: 100 400;</code></dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>A {{cssxref("font-variant")}} value.</dd>
+ <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt>
+ <dd>Allows control over advanced typographic features in OpenType fonts.</dd>
+ <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
+ <dd>Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd>
+ <p>Specifies the resource containing the font data. This can be a URL to a remote font file location or the name of a font on the user's computer.</p>
+
+ <p>To provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a <code>format()</code> function:</p>
+
+ <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>,
+     url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre>
+
+ <p>The available types are: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, and <code>"svg"</code>.</p>
+ </dd>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>The range of Unicode code points to be used from the font.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This example simply specifies a downloadable font to use, applying it to the entire body of the document:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">View the live example</a></p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:</p>
+
+<pre class="brush: css">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Font_MIME_Types">Font MIME Types</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th>Format</th>
+   <th>MIME type</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TrueType</td>
+   <td><code>font/ttf</code></td>
+  </tr>
+  <tr>
+   <td>OpenType</td>
+   <td><code>font/otf</code></td>
+  </tr>
+  <tr>
+   <td>Web Open Font Format</td>
+   <td><code>font/woff</code></td>
+  </tr>
+  <tr>
+   <td>Web Open Font Format 2</td>
+   <td><code>font/woff2</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a> are used to relax this restriction.</li>
+ <li><code>@font-face</code> cannot be declared within a CSS selector. For example, the following will not work:
+  <pre class="brush: css; example-bad">.className {
+  @font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"),
+         local("HelveticaNeue-Bold"),
+         url(MgOpenModernaBold.ttf);
+    font-weight: bold;
+  }
+}</pre>
+ </li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>Font format specification with new compression algorithm</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Font format specification</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WOFF">About WOFF</a></li>
+ <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
+ <li><a href="https://coolfont.org">Free Fancy Cool Fonts</a></li>
+</ul>
diff --git a/files/id/web/css/_colon_active/index.html b/files/id/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..67d9357bef
--- /dev/null
+++ b/files/id/web/css/_colon_active/index.html
@@ -0,0 +1,143 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Rangkuman">Rangkuman</h2>
+
+<p><code>:active</code> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> menunjukkan kapan sebuah elemen telah diaktifasi oleh pengguna. Hal ini memperbolehkan halaman memberikan feedback (korelasi) sehingga aktivasi telah terdeteksi oleh browser. Ketika berinteraksi dengan mouse, hal ini secara tipikal waktu antara pengguna menekan tombol mouse dan merelasisasikannya.  :<code>active</code> pseudo-class juga secara tipical ditampilkan ketika menggunakan tombol tab pada keyboard. Hal ini sering digunakan pada element HTML {{HTMLElement("a")}} dan {{HTMLElement("button")}}, tetapi boleh jadi tidak terbatas pada hal tersebut.</p>
+
+<p>Style ini boleh jadi digunakan lebih oleh sebuah link-related pseudo-classes (tautan-terhubung dengan pseudo kelas) lainnya, yang mana merupakan {{cssxref(":link")}}, {{cssxref(":hover")}}, and {{cssxref(":visited")}}, ditampilkan dalam aturan bagian-bagiannya. Dalam memperoleh penampilan yang teraprofiasi dengan link, kamu membutuhkan menempatkan aturan :active setelah seluruh yang lainnya terhubungan dengan aturan link (link-related-rules), seperti diuraikan oleh <em>LHVA-order</em>:  <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note"><strong>Cataan:</strong> Pada system dengan multi tombol mouse, CSS 3 spesifik bahwa <code>:active</code> pseudo-class harus hanya diterapkan pada tombol utama; pada klik kanan mouse, ini secara tipikal kebanyakan pada tombol kiri.</div>
+
+<h2 id="Example" name="Example">Contoh</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; highlight:[3]">&lt;body&gt;
+    &lt;h1&gt;:active CSS selector example&lt;/h1&gt;
+    &lt;p&gt;The following link will turn lime during the time you click it and release the click: &lt;a href="#"&gt;Mozilla Developer Network&lt;/a&gt;.&lt;/p&gt;
+&lt;/body&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[5]">body { background-color: #ffffc9 }
+a:link { color: blue } /* unvisited links */
+a:visited { color: purple } /* visited links */
+a:hover { <span class="st">font-weight: bold</span> } /* user hovers */
+a:active { color: lime } /* active links */</pre>
+</div>
+
+<div>{{EmbedLiveSample('example',600,140)}}</div>
+
+<h2 id="Spesifikasi"><span>Spesifikasi</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Dukungan_Browser">Dukungan Browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>5.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Support on non-<code>&lt;a&gt;</code> elements</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>8.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Support on non-<code>&lt;a&gt;</code> elements</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Secara menyeluruh, Safari Mobile tidak menggunakan {{cssxref(":active")}} kesatuan yang tidak ada pada sebuah <a href="/en-US/docs/Web/Reference/Events/touchstart"><code>touchstart</code></a> event handler pada elemen yang relevan atau pada {{HTMLElement("body")}}.</p>
+
+<h2 id="Lihat_juga">Lihat juga</h2>
+
+<ul>
+ <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}.</li>
+</ul>
diff --git a/files/id/web/css/background-color/index.html b/files/id/web/css/background-color/index.html
new file mode 100644
index 0000000000..920b4d28e5
--- /dev/null
+++ b/files/id/web/css/background-color/index.html
@@ -0,0 +1,149 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+translation_of: Web/CSS/background-color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>Background-color</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> digunakan untuk seting warna latar belakang dari element yang di inginkan.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+background-color: red;
+background-color: indigo;
+
+/* Hexadecimal value */
+background-color: #bbff00;    /* Fully opaque */
+background-color: #11ffee00;  /* Fully transparent */
+background-color: #11ffeeff;  /* Fully opaque */
+
+/* RGB value */
+background-color: rgb(255, 255, 128);        /* Fully opaque */
+background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */
+
+/* HSL value */
+background-color: hsl(50, 33%, 25%);         /* Fully opaque */
+background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */
+
+/* Special keyword values */
+background-color: currentcolor;
+background-color: transparent;
+
+/* Global values */
+background-color: inherit;
+background-color: initial;
+background-color: unset;</pre>
+
+<p><code>Background-color</code> menggunakan hanya satu jenis warna <code><a href="#&lt;color>">&lt;color&gt;</a></code> nilai.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><a id="&lt;color>"></a>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>The uniform color of the background. It is rendered behind any {{cssxref("background-image")}} that is specified, although the color will still be visible through any transparency in the image.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Contoh">Contoh</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exampletwo"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="examplethree"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[2,7,12];">.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", 200, 150)}}</p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p>It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.</p>
+
+<p>Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and <a href="/en-US/docs/Web/CSS/font-weight">bold</a> or larger, or 24px or larger.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("&lt;color&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.background-color")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Multiple backgrounds</a></li>
+ <li>The {{cssxref("&lt;color&gt;")}} data type</li>
+ <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
+ <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
+</ul>
diff --git a/files/id/web/css/css_box_model/index.html b/files/id/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..08152c9c16
--- /dev/null
+++ b/files/id/web/css/css_box_model/index.html
@@ -0,0 +1,115 @@
+---
+title: CSS Basic Box Model
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - CSS Box Model
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Basic Box Model</strong> is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">visual formatting model</a>.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("overflow")}}</li>
+ <li>{{CSSxRef("overflow-x")}}</li>
+ <li>{{CSSxRef("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+ <li>{{CSSxRef("max-height")}}</li>
+ <li>{{CSSxRef("max-width")}}</li>
+ <li>{{CSSxRef("min-height")}}</li>
+ <li>{{CSSxRef("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("margin")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("padding")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Other_properties">Other properties</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
+ <dd>Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
+ <dd>Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual formatting model</a></dt>
+ <dd>Explains the visual formatting model.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td>Added <code style="white-space: nowrap;">margin-trim</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html
new file mode 100644
index 0000000000..d81bae36e6
--- /dev/null
+++ b/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html
@@ -0,0 +1,73 @@
+---
+title: Introduction to the CSS basic box model
+slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+<div>{{CSSRef}}</div>
+
+<p>When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard <strong>CSS basic box model</strong>. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.</p>
+
+<p>Every box is composed of four parts (or <em>areas</em>), defined by their respective edges: the <em>content edge</em>, <em>padding edge</em>, <em>border edge</em>, and <em>margin edge</em>.</p>
+
+<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+
+<p id="content-area">The <strong>content area</strong>, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the <em>content width</em> (or <em>content-box width</em>) and the <em>content height</em> (or <em>content-box height</em>). It often has a background color or background image.</p>
+
+<p>If the {{cssxref("box-sizing")}} property is set to <code>content-box</code> (default) and if the element is a block element, the content area's size can be explicitly defined with the {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, and {{cssxref("max-height")}} properties.</p>
+
+<p id="padding-area">The <strong>padding area</strong>, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the <em>padding-box width</em> and the <em>padding-box height</em>.</p>
+
+<p>The thickness of the padding is determined by the {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, and shorthand {{cssxref("padding")}} properties.</p>
+
+<p id="border-area">The <strong>border area</strong>, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the <em>border-box width</em> and the <em>border-box height</em>.</p>
+
+<p>The thickness of the borders are determined by the {{cssxref("border-width")}} and shorthand {{cssxref("border")}} properties. If the {{cssxref("box-sizing")}} property is set to <code>border-box</code>, the border area's size can be explicitly defined with the {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, and {{cssxref("max-height")}} properties. When there is a background ({{cssxref("background-color")}} or {{cssxref("background-image")}}) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the {{cssxref("background-clip")}} css property.</p>
+
+<p id="margin-area">The <strong>margin area</strong>, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the <em>margin-box width </em>and the <em>margin-box height</em>.</p>
+
+<p>The size of the margin area is determined by the {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, and shorthand {{cssxref("margin")}} properties. When <a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a> occurs, the margin area is not clearly defined since margins are shared between boxes.</p>
+
+<p>Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the {{cssxref('line-height')}} property, even though the borders and padding are still displayed around the content.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Containing_block">Layout and the containing block</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a></li>
+</ul>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#intro')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Though more precisely worded, there is no practical change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also_2">See also</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/id/web/css/css_selectors/index.html b/files/id/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..8bf3fb0034
--- /dev/null
+++ b/files/id/web/css/css_selectors/index.html
@@ -0,0 +1,154 @@
+---
+title: CSS Selectors
+slug: Web/CSS/CSS_Selectors
+tags:
+  - CSS
+  - CSS Selectors
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - Selectors
+  - TopicStub
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Selectors</strong> define to which elements a set of CSS rules apply.</p>
+
+<h2 id="Dasar_Selektor">Dasar Selektor</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Type selectors</a> (Jenis-Jenis Seleksi)</dt>
+ <dd>Dasar selektor ini memilih seluruh elemen sehingga ditampilkan dengan pemberian nama.<br>
+ <strong>Syntax:</strong> <code><var>eltname</var></code><br>
+ <strong>Example:</strong> <font face="Consolas, Liberation Mono, Courier, monospace">Input akan menampilkan sebuah elemen </font> {{HTMLElement('input')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Class selectors</a> (Selektor Class)</dt>
+ <dd>Dasar selektor ini memilih elemen yang didasarkan pada nilai attribut classnya.<br>
+ <strong>Syntax:</strong> <code>.<var>classname</var></code><br>
+ <strong>Example:</strong> <code>.index</code> akan menampilkan sebuah elemen yang mempunyai indeks class (seperti didefenisikan oleh sebuah attribut <code>class="index"</code> atau yang serupa).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/ID_selectors">ID selectors</a> (selektor ID)</dt>
+ <dd>Dasar selektor ini memilih cabangan (nodes) didasarkan pada nilai attribut idnya. Bisa jadi hanya satu elemen dengan sebuah pemberian ID dalam sebuah dokumen.<br>
+ <strong>Syntax:</strong> <code>#<var>idname</var></code><br>
+ <strong>Example:</strong> <code>#toc</code> akan menampilkan elemen yang mempunyai id toc (seperti didefenisikan dengan atrribut <code>id="toc"</code> atau yang serupa).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selectors</a> (selektor seluruhnya)</dt>
+ <dd>Dasar selektor ini memilih seluruh nodes (cabangan). Ini juga ada dalam hanya sebuah satu-kumpulan nama (namespace) dan  dalam seluruh kumpulan nama (all-namespace) yang juga bervariasi.<br>
+ <strong>Syntax:</strong> <code>* ns|* *|*</code><br>
+ <strong>Example:</strong> <code>*</code> akan menampilkan seluruh elemen dari dokumen.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> (selektor attribut)</dt>
+ <dd>Dasar selektor ini memilih nodes (cabangan)  didasarkan pada sebuah nilai dari atributnya.<br>
+ <strong>Syntax:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>
+ <strong>Example:</strong> <code>[autoplay]</code> akan menampilkan seluruh elemen yang mempunyai attribut <code>autoplay</code> pengaturan (pada sebuah nilai).</dd>
+</dl>
+
+<h2 id="Combinators">Combinators</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a></dt>
+ <dd>The <code>'+'</code> combinator selects nodes that immediately follow the former specified element.<br>
+ <strong>Syntax:</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>Example:</strong> <code>ul + li</code> will match any {{HTMLElement('li')}} that immediately follows a {{HTMLElement('ul')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a></dt>
+ <dd>The <code>'~'</code> combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.<br>
+ <strong>Syntax:</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>Example:</strong> <code>p ~ span</code> will match all {{HTMLElement('span')}} elements that follow a {{HTMLElement('p')}} element inside the same element.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Child_selectors">Child selectors</a></dt>
+ <dd>The <code>'&gt;'</code> combinator selects nodes that are direct children of the former specified element.<br>
+ <strong>Syntax:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Example:</strong> <code>ul &gt; li</code> will match all {{HTMLElement('li')}} elements that are inside a {{HTMLElement('ul')}} element.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant selectors</a></dt>
+ <dd>The <code>' '</code> combinator selects nodes that are children (not necessary direct children) of the former specified element.<br>
+ <strong>Syntax:</strong> <code>A B</code><br>
+ <strong>Example:</strong> <code>div span</code> will match any {{HTMLElement('span')}} element that is inside a {{HTMLElement('div')}} element.</dd>
+</dl>
+
+<h2 id="Pseudo-elements">Pseudo-elements</h2>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a> are abstractions of the tree representing entities beyond what HTML does. For example, HTML doesn't have an element describing the first letter or line of a paragraph, or the marker of a list. Pseudo-elements represent these entities and allow CSS rules to be associated with them. that way, these entitities can be styled independently.</p>
+
+<h2 id="Pseudo-classes">Pseudo-classes</h2>
+
+<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> allow to select elements based on information that is not contained in the document tree like a state or that is particularly complex to extract. E.g. they match if a link has been previously visited or not.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.5</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
new file mode 100644
index 0000000000..9ec7339a95
--- /dev/null
+++ b/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -0,0 +1,64 @@
+---
+title: 'Using the :target pseudo-class in selectors'
+slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<p><span class="comment">When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.</span> {{CSSRef}}</p>
+
+<p>Membantu mengidentifikasi tujuan dari sebuah tautan yang ditujukan pada sebuan bagian khusus sebuah dokumen, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors</a> mengenalkan <strong>{{ Cssxref(":target") }} </strong><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<h3 id="Picking_a_Target" name="Picking_a_Target">Penentuan Sebuah Target</h3>
+
+<p>pseudo-class<code> {{ Cssxref(":target") }} digunakan pada menampilkan target elemen dari sebuah URI berisikan sebuah pengidentifikasi menurut bagian bagian. Sebagai contoh, pada </code>URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example berisi bagian bagian pengidentifikasi #Example. Dalam HTML, pengidentifikasi ditemukan sebagai nilai dari masing masing id atau nama attribut, sejak keduanya membagi namespace (kelompok id atau nama) yang sama. Dengan begitu, contoh URI akan menunjukkan kop "Example" dalam dokumen ini.</span>  </code></p>
+
+<p>Misalkan kamu berharap untuk menampilkan sebuah elemen h2 yang merupakan target sebuah URI, tetapi tidak menginginkan sesuatu jenis dari elemen lainnya untuk menemukan sebuah target tampilan. Ini cukup menyederhakan:</p>
+
+<pre>h2:target {font-weight: bold;}
+</pre>
+
+<p>Ini juga memungkinkan untuk membuat tampilan yang spesifik dari sebuah bagian bagian terkecil sebuah dokumen. Ini dilakukan menggunakan identifikasi nilai yang menemukan URI didalamnya. Dengan begitu, untuk menambahkan sebuah border pada #Example terpisah, kita dapat menuliskannya dengan:</p>
+
+<pre>#Example:target {border: 1px solid black;}</pre>
+
+<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Menargetkan Seluruh Elemen</h3>
+
+<p>Jika intensif (berkelanjutan) untuk membuat sebuah "blanket" tampilan yang akan diterapkan pada seluruh target element, selanjutnya seleksi secara umum yang dapat diterapkan didalamnya:</p>
+
+<pre>:target {color: red;}
+</pre>
+
+<h3 id="Example" name="Example">Contoh</h3>
+
+<p>Berikut contoh, ada lima poin tautan elemen dalam dokumen yang sama. Menyeleksi link "First", sebagai contoh, akan menyebabkan &lt;h1 id="one"&gt; menjadi target elemen. Catatan bahwa dokumen boleh melompat pada sebuah scroll posisi baru, selama target elemen ditempatkan pada posisi atas dari jendela browser jika memungkinkan. </p>
+
+<div id="example">
+<pre>&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h3 id="Conclusion" name="Conclusion">Kesimpulan</h3>
+
+<p>Dalam kasus dimana sebuah pengidentifikasi poin bagian bagian dari sebuah bagian dokumen, para pembaca bisa jadi dibingungkan tentang yang mana bagian dari dokumen yang mereka anggap untuk dapat dibaca (diseleksi). Dengan gaya target sebuah URI, kebingungan pembaca dapat dikurangi atau dihilangkan. </p>
+
+<h3 id="Related_Links" name="Related_Links">Related Links</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo</a></li>
+ <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">CSS Reference :target</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
diff --git a/files/id/web/css/flex-direction/index.html b/files/id/web/css/flex-direction/index.html
new file mode 100644
index 0000000000..7406212148
--- /dev/null
+++ b/files/id/web/css/flex-direction/index.html
@@ -0,0 +1,155 @@
+---
+title: flex-direction
+slug: Web/CSS/flex-direction
+translation_of: Web/CSS/flex-direction
+---
+<div>{{CSSRef}}</div>
+
+<p><br>
+</p>
+
+<p dir="ltr"><strong id="docs-internal-guid-3c370947-7fff-bd87-9412-328b8bc6d405">flex-direction  </strong>adalah properti css yang menentukan sumbu utama dan arah (normal atau terbalik ) dari flex item yang ditempatkan di flex container / wadah .</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>
+
+
+
+<p>Note that the values <code>row</code> and <code>row-reverse</code> are affected by the directionality of the flex container. If its {{HTMLAttrxRef("dir")}} attribute is <code>ltr</code>, <code>row</code> represents the horizontal axis oriented from the left to the right, and <code>row-reverse</code> from the right to the left; if the <code>dir</code> attribute is <code>rtl</code>, <code>row</code> represents the axis oriented from the right to the left, and <code>row-reverse</code> from the left to the right.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* The direction text is laid out in a line */
+flex-direction: row;
+
+/* Like &lt;row&gt;, but reversed */
+flex-direction: row-reverse;
+
+/* The direction in which lines of text are stacked */
+flex-direction: column;
+
+/* Like &lt;column&gt;, but reversed */
+flex-direction: column-reverse;
+
+/* Global values */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<p>The following values are accepted:</p>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>The flex container's main-axis is defined to be the same as the text direction. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the content direction.</dd>
+ <dt><code>row-reverse</code></dt>
+ <dd>Behaves the same as <code>row</code> but the <strong>main-start</strong> and <strong>main-end</strong> points are permuted.</dd>
+ <dt><code>column</code></dt>
+ <dd>The flex container's main-axis is the same as the block-axis. The <strong>main-start</strong> and <strong>main-end</strong> points are the same as the <strong>before</strong> and <strong>after</strong> points of the writing-mode.</dd>
+ <dt><code>column-reverse</code></dt>
+ <dd>Behaves the same as <code>column</code> but the <strong>main-start</strong> and <strong>main-end</strong> are permuted.</dd>
+</dl>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p>Using the <code>flex-direction</code> property with values of <code>row-reverse</code> or <code>column-reverse</code> will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox &amp; the keyboard navigation disconnect — Tink</a></li>
+ <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Reversing_flex_container_columns_and_rows">Reversing flex container columns and rows</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h4&gt;This is a Column-Reverse&lt;/h4&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is a Row-Reverse&lt;/h4&gt;
+&lt;div id="content1"&gt;
+  &lt;div class="box1" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box1" style="background-color:yellow;"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-direction-property', 'flex-direction')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
+</ul>
diff --git a/files/id/web/css/index.html b/files/id/web/css/index.html
new file mode 100644
index 0000000000..c4f9c56adb
--- /dev/null
+++ b/files/id/web/css/index.html
@@ -0,0 +1,64 @@
+---
+title: CSS
+slug: Web/CSS
+translation_of: Web/CSS
+---
+<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, dikenal juga sebagai <strong>CSS</strong>, adalah bahasa <a href="/en-US/docs/DOM/stylesheet">stylesheet</a> yang digunakan untuk merubah tampilan dokumen yang terulis dalam <a href="/en-US/docs/HTML" title="The HyperText Mark-up Language">HTML</a></span> atau <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a> (termasuk variasi bahasa XML seperti <a href="/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a> atau <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>). CSS menjelaskan bagaimana elemen terstruktur yang harus ditampilkan di layar, di kertas, dalam cara komunikasi, atau dalam media yang lain.</p>
+
+<p>CSS adalah salah satu dari bahasa inti dari <em>open web</em> (web berbasis terbuka) dan telah berstandar <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>. Dibangun dalam berbagai level, CSS1 sekarang sudah kuno, CSS2.1 direkomendasi dan <a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, sekarang terbagi dalam modul kecil, bergerak dalam jalur standar.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>Referensi CSS</span>
+
+  <p><a href="/en-US/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">Referensi lengkap</a> untuk <u>pengembang Web musiman</u> menjelaskan setiap properti dan konsep CSS.</p>
+ </li>
+ <li><span>CSS Tutorial</span>
+  <p><a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">Pengenalan langkah demi langkah</a> untuk membantu <u>para pemula</u> yang baru memulai. Di sini menyajikan semua hal yang dibutuhkan.</p>
+ </li>
+ <li><span>Demo CSS3</span>
+  <p><a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">Kumpulan Demo</a> memperlihatkan <u>teknologi terakhir CSS</u> dalam aksinya: dorongan untuk berkreatifitas.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Dokumentasi dan tutorial</h2>
+
+<dl>
+ <dt>Kunci konsep CSS</dt>
+ <dd>Menjelaskan <a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">syntax dan lembar bahasa</a> dan memperkenalkan dasar-dasar seperti <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a> dan <a href="/en-US/docs/CSS/inheritance" title="inheritance">inheritance</a>, <a href="/en-US/docs/CSS/box_model" title="Box model">box model</a> dan <a href="/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">margin collapsing</a>, <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> dan konteks <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a>, atau <a href="/en-US/docs/CSS/initial_value" title="initial value">initial</a>, <a href="/en-US/docs/CSS/computed_value" title="computed value">computed</a>, <a href="/en-US/docs/CSS/used_value" title="used value">used</a> dan nilai <a href="/en-US/docs/CSS/actual_value" title="actual value">actual</a>. Entitas seperti <a href="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">CSS shorthand properties</a> juga dijelaskan.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">Panduan Pengembang CSS</a></dt>
+ <dd>Artikel yang membantu mempelajari tehnik CSS untuk membuat konten anda bersinar.</dd>
+</dl>
+
+<h2 class="Tools" id="Tools" name="Tools">Alat untuk pengembang CSS</h2>
+
+<ul>
+ <li><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> mengecek bila CSS yang diberikan adalah valid. Ini adalah alat debugging yang berguna.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension </a><span class="external">milik Firefox, extensi populer</span> yang mengizinkan untuk merubah secara langsung CSS dalam situs yang dilihat. Sangat praktis untuk beberapa perubahan, bahkan ekstensi ini berguna lebih banyak.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> milik FireFox juga mengizinkan melihat dan merubah scara langsung CSS dalam situs yang dilihat. lebih mudah daripada Firebug, walaupun kurang berguna.</li>
+ <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a> milik FireFox mengizinkan mengubah CSS dalam sidebar.</li>
+</ul>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Topik yang berhubungan</h2>
+
+<ul>
+ <li>Pembelajaran Mozilla <a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">sumber CSS</a>.</li>
+ <li>Bahasa Web terbuka dimana CSS sering digunakan: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li>
+ <li>Teknologi Mozilla dimana ada penggunaan CSS: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, Firefox dan Thunderbird <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">extensions</a> dan <a href="/en-US/docs/Themes" title="en-US/docs/Themes">themes</a>.</li>
+</ul>
+</div>
+
+<div class="section">
+<h2 class="Related_Topics" id="News" name="News">Berita</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/css-text-decor-3/" title="http://www.w3.org/TR/css-text-decor-3/">CSS Text-decoration Level 3</a> mencapai status <em>Candidate Recommandation</em>, termasuk properti <code>text-decoration-*</code> dan <code>text-emphasis-*</code>. Berikut lingk yang menjelaskan hal ini {{cssxref("text-shadow")}}. (<em>August 1st, 2013)</em></li>
+ <li>Gecko sekarang suport {{cssxref("background-origin")}}<code>: local</code>. Ini tersedia dari Firefox 25 (dan siap juga dalam Nightly). <em>(July 25th, 2013)</em></li>
+ <li><a href="http://www.w3.org/TR/pointerevents/" title="http://www.w3.org/TR/pointerevents/">Pointer Events</a> mencapai status <em>Candidate Recommandation</em>, berarti properti CSS <code>touch-action</code>, yang hanya dapat diimplementasikan pada IE10 (dengan prefiks <code>-ms-</code> ), sekarang bukan percobaan lagi. <em>(May 6th, 2013)</em></li>
+ <li>Gecko suport <a href="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> yang telah ditambahkan untuk menyesuaikan spesifikasi terkini tercantum: dari Firefox 23 {{cssxref("::before")}} dan {{cssxref("::after")}} bersama dengan item fleksibel, dan semacam itu, dapat dipindah menggunakan {{cssxref("order")}} dan {{cssxref("align-self")}}. <em>(May 3rd, 2013)</em></li>
+</ul>
+</div>
+</div>
+</section>
diff --git a/files/id/web/css/mask-border-width/index.html b/files/id/web/css/mask-border-width/index.html
new file mode 100644
index 0000000000..b017ac4a56
--- /dev/null
+++ b/files/id/web/css/mask-border-width/index.html
@@ -0,0 +1,104 @@
+---
+title: mask-border-width
+slug: Web/CSS/mask-border-width
+translation_of: Web/CSS/mask-border-width
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>mask-border-width</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> properti mengatur lebar elemen <a href="/en-US/docs/Web/CSS/mask-border">mask border</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword value */
+mask-border-width: auto;
+
+/* &lt;length&gt; value */
+mask-border-width: 1rem;
+
+/* &lt;percentage&gt; value */
+mask-border-width: 25%;
+
+/* &lt;number&gt; value */
+mask-border-width: 3;
+
+/* vertical | horizontal */
+mask-border-width: 2em 3em;
+
+/* top | horizontal | bottom */
+mask-border-width: 5% 15% 10%;
+
+/* top | right | bottom | left */
+mask-border-width: 5% 2em 10% auto;
+
+/* Global values */
+mask-border-width: inherit;
+mask-border-width: initial;
+mask-border-width: unset;
+</pre>
+
+<p>The <code>mask-border-width</code> properti dapat ditentukan menggunakan satu, dua, tiga, atau empat nilai yang dipilih dari daftar nilai di bawah.</p>
+
+<ul>
+ <li>Ketika <strong>satu</strong> nilai ditentukan, ini menerapkan lebar yang sama ke <strong>keempat sisinya.</strong></li>
+ <li>Ketika <strong>dua</strong> nilai ditentukan, lebar pertama diterapkan ke <strong>atas dan bawah</strong>, yang kedua setelah <strong>kiri dan kanan.</strong></li>
+ <li>Ketika <strong>tiga</strong> nilai ditentukan, lebar pertama diterapkan ke <strong>atas</strong>, yang kedua setelah <strong>kiri dan kanan</strong>, yang kedua setelah <strong>bawah</strong>.</li>
+ <li>Ketika <strong>empat</strong> nilai ditentukan, lebar berlaku untuk <strong>atas</strong>, <strong>kanan</strong>, <strong>bawah</strong>, dan <strong>kiri</strong> dalam urutan itu (searah jarum jam).</li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Lebar batas topeng, ditetapkan sebagai {{cssxref ("&lt;length&gt;")}} atau {{cssxref ("&lt;percentage&gt;")}}. Persentase relatif terhadap lebar area perbatasan untuk offset horizontal dan tinggi area perbatasan untuk offset vertikal. Tidak boleh negatif.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Lebar batas topeng, ditentukan sebagai kelipatan yang sesuai {{cssxref("border-width")}}. Tidak boleh negatif.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Lebar batas topeng dibuat sama dengan lebar atau tinggi intrinsik (mana yang dapat diterapkan) yang sesuai {{cssxref("mask-border-slice")}}. Jika gambar tidak memiliki dimensi intrinsik yang diperlukan, sesuai <code>border-width</code> digunakan sebagai gantinya.</dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_usage">Basic usage</h3>
+
+<p>Properti ini tampaknya belum didukung di mana pun. Ketika akhirnya mulai didukung, itu akan berfungsi untuk menentukan lebar topeng perbatasan - mengatur ini ke nilai yang berbeda menjadi <code><a href="/en-US/docs/Web/CSS/mask-border-slice">mask-border-slice</a></code> akan menyebabkan irisan diskalakan agar sesuai dengan topeng perbatasan.</p>
+
+<pre class="brush: css notranslate">mask-border-width: 30 fill;</pre>
+
+<p>Browser berbasis Chromium mendukung versi lama properti ini — <code>mask-box-image-width</code> — dengan awalan:</p>
+
+<pre class="brush: css notranslate">-webkit-mask-box-image-width: 20px;</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The <code><a href="/en-US/docs/Web/CSS/mask-border">mask-border</a></code> Halaman menampilkan contoh yang berfungsi (menggunakan properti topeng perbatasan awalan kedaluwarsa yang didukung di Chromium), sehingga Anda bisa mendapatkan gambaran tentang efeknya.</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>TBD</p>
diff --git a/files/id/web/css/referensi/index.html b/files/id/web/css/referensi/index.html
new file mode 100644
index 0000000000..7609391ca5
--- /dev/null
+++ b/files/id/web/css/referensi/index.html
@@ -0,0 +1,185 @@
+---
+title: Referensi CSS
+slug: Web/CSS/referensi
+translation_of: Web/CSS/Reference
+---
+<div>{{CSSRef}}</div>
+
+<p>Gunakan <strong>referensi CSS </strong>ini untuk menelusuri indeks alfabetikal dari semua properti <a href="/id/docs/web/CSS">CSS</a> umum, <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">data types</a>, dan <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>. Anda juga dapat menulusuri <a href="/en-US/docs/Web/CSS#concepts">konsep dasar</a> and a list of <a href="/en-US/docs/Web/CSS/Reference#selectors">selektor berdasarkan jenis</a>. Juga ada <a href="#DOM-CSS_CSSOM">referensi DOM-CSS / CSSOM</a>.</p>
+
+<h2 id="Basic_rule_syntax">Basic rule syntax</h2>
+
+<h3 id="Style_rule_syntax">Style rule syntax</h3>
+
+<pre class="syntaxbox notranslate"><var>style-rule</var> <strong>::=</strong>
+    <var>selectors-list</var> <strong>{</strong>
+      <var>properties-list</var>
+    <strong>}</strong>
+</pre>
+
+<p>... where :</p>
+
+<pre class="syntaxbox notranslate"><var>selectors-list</var> <strong>::=</strong>
+    <var>selector</var>[<strong>:</strong><var>pseudo-class</var>] [<strong>::</strong><var>pseudo-element</var>]
+    [<strong>,</strong> <var>selectors-list</var>]
+
+<var>properties-list</var> <strong>::=</strong>
+    [<var>property</var> <strong>:</strong> <var>value</var>] [<strong>;</strong> <var>properties-list</var>]
+</pre>
+
+<p>See the index of <a href="#Selectors"><em>selectors</em></a>, <a href="#Pseudo"><em>pseudo-classes</em></a>, and <em><a href="#Pseudo">pseudo-elements</a></em> below. The syntax for each specified <em>value</em> depends on the data type defined for each specified <em>property</em>.</p>
+
+<h4 id="Style_rule_examples">Style rule examples</h4>
+
+<pre class="brush: css notranslate">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>For a beginner-level introduction to the syntax of selectors, see our <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">guide on CSS Selectors</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p>
+
+<h3 id="At-rule_syntax">At-rule syntax</h3>
+
+<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p>
+
+<h2 id="Keyword_index">Keyword index</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> The property names in this index do <strong>not</strong> include the <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">JavaScript names</a> where they differ from the CSS standard names.</p>
+</div>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="Selectors">Selectors</h2>
+
+<p>The following are the various <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors</a>, which allow styles to be conditional based on various features of elements within the DOM.</p>
+
+<h3 id="Basic_selectors">Basic selectors</h3>
+
+<p><strong>Basic selectors</strong> are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code><var>elementname</var></code></li>
+ <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.<var>classname</var></code></li>
+ <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#<var>idname</var></code></li>
+ <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a> <code>[<var>attr</var>=<var>value</var>]</code></li>
+</ul>
+
+<h3 id="Grouping_selectors">Grouping selectors</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Selector_list">Selector list</a> <code><var>A</var>, <var>B</var></code></dt>
+ <dd>Specifies that both <code><var>A</var></code> and <code><var>B</var></code> elements are selected. This is a grouping method to select several matching elements.</dd>
+</dl>
+
+<h3 id="Combinators">Combinators</h3>
+
+<p>Combinators are selectors that establish a relationship between two or more simple selectors, such as "<code><var>A</var></code> is a child of <code><var>B</var></code>" or "<code><var>A</var></code> is adjacent to <code><var>B</var></code>."</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a> <code><var>A</var> + <var>B</var></code></dt>
+ <dd>Specifies that the elements selected by both <code><var>A</var></code> and <code><var>B</var></code> have the same parent and that the element selected by <code><var>B</var></code> immediately follows the element selected by <code><var>A</var></code> horizontally.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a> <code><var>A</var> ~ <var>B</var></code></dt>
+ <dd>Specifies that the elements selected by both <code><var>A</var></code> and <code><var>B</var></code> share the same parent and that the element selected by <code><var>A</var></code> comes before—but not necessarily immediately before—the element selected by <code><var>B</var></code>.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a> <code><var>A</var> &gt; <var>B</var></code></dt>
+ <dd>Specifies that the element selected by <code><var>B</var></code> is the direct child of the element selected by <code><var>A</var></code>.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a> <code><var>A</var> <var>B</var></code></dt>
+ <dd>Specifies that the element selected by <code><var>B</var></code> is a descendant of the element selected by <code><var>A</var></code>, but is not necessarily a direct child.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> <code><var>A</var> || <var>B</var></code> {{Experimental_Inline}}</dt>
+ <dd>Specifies that the element selected by <code><var>B</var></code> is located within the table column specified by <code><var>A</var></code>. Elements which span multiple columns are considered to be a member of all of those columns.</dd>
+</dl>
+
+<h3 id="Pseudo">Pseudo</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a> <code>:</code></dt>
+ <dd>Specifies a special state of the selected element(s).</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a> <code>::</code></dt>
+ <dd>Represents entities that are not included in HTML.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>See also:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors in the Selectors Level 4 specification</a>.</p>
+</div>
+
+<h2 id="Concepts">Concepts</h2>
+
+<h3 id="Syntax_and_semantics">Syntax and semantics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li>
+ <li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li>
+ <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li>
+ <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS unit and value types</a></li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li>
+</ul>
+
+<h3 id="Layout">Layout</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
+ <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li>
+ <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="Major_object_types">Major object types</h3>
+
+<ul>
+ <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li>
+ <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector &amp; style)</span></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>
+ <li>{{DOMxRef("HTMLElement.style")}}</li>
+ <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (just style)</li>
+ <li>{{DOMxRef("Element.className")}}</li>
+ <li>{{DOMxRef("Element.classList")}}</li>
+</ul>
+
+<h3 id="Important_methods">Important methods</h3>
+
+<ul>
+ <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-moz-</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code style="white-space: nowrap;">-webkit-</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS extensions</a> (prefixed with <code style="white-space: nowrap;">-ms-</code>)</li>
+</ul>
+
+<h2 id="External_Links">External Links</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/CSS/#indices">CSS Indices (w3.org)</a></li>
+</ul>
diff --git a/files/id/web/css/text-transform/index.html b/files/id/web/css/text-transform/index.html
new file mode 100644
index 0000000000..41db13ecf4
--- /dev/null
+++ b/files/id/web/css/text-transform/index.html
@@ -0,0 +1,307 @@
+---
+title: text-transform
+slug: Web/CSS/text-transform
+translation_of: Web/CSS/text-transform
+---
+<div>{{CSSRef}}</div>
+
+<p>Properti CSS <strong><code>text-transform</code></strong> menerangkan bagaimana mengatur teks sebuah elemen. Properti ini dapat digunakan untuk membuat sebuah teks menjadi besar atau kecil semua, atau membuat setiap kata dikapitalisasi.</p>
+
+<pre class="brush:css no-line-numbers">/* Nilai Kata-kunci */
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: none;
+text-transform: full-width;
+
+/* Nilai Global */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+</pre>
+
+<p>Properti <code>text-transform</code> memperhatikan peraturan khusus untuk setiap bahasa, seperti:</p>
+
+<ul>
+ <li>
+  <p>Dalam bahasa daerah Turki, seperti bahasa Turki (<code>tr</code>), bahasa Azerbaijan (<code>az</code>), Tatar Krimean (<code>crh</code>), Tatar Volga (<code>tt</code>), dan bahasa Bashkir (<code>ba</code>), terdapat dua macam i, yaitu dengan dan tanpa titik, dan dua pasangan huruf: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</p>
+ </li>
+ <li>
+  <p>Dalam bahasa Jerman (<code>de</code>), huruf besar <code>ß</code> menjadi <code>SS</code>.</p>
+ </li>
+ <li>
+  <p>Dalam bahasa Belanda (<code>nl</code>), dwihuruf <code>ij</code> diubah menjadi <code>IJ</code>, bahkan dengan pilihan <code>text-transform: capitalize</code>, yang seharusnya hanya mengubah huruf pertama dari kata menjadi huruf besar.</p>
+ </li>
+ <li>
+  <p>Dalam bahasa Yunani (<code>el</code>), huruf vokal kehilangan aksen saat semua huruf dalam kata adalah huruf besar (<code>ά</code>/<code>Α</code>), kecuali untuk huruf <span lang="el">eta</span> disjungtif (<code>ή</code>/<code>Ή</code>). Diftong dengan aksen pada huruf vokal pertama dihilangkan dan mendapat diaeresis pada huruf vokal kedua (<code>άι</code>/<code>ΑΪ</code>).</p>
+ </li>
+ <li>
+  <p>Dalam bahasa Yunani (<code>el</code>), huruf sigma kecil mempunyai dua bentuk: <code>σ</code> dan <code>ς</code>. <code>ς</code> digunakan hanya saat sigma terdapat di akhir kata. Sewaktu menerapkan <code>text-transform: lowercase</code> kepada huruf sigma besar (<code>Σ</code>), peramban perlu memilih huruf kecil yang tepat berdasarkan konteksnya.</p>
+ </li>
+ <li>Dalam bahasa Irlandia (<code>ga</code>), huruf pendahulu tertentu tetap menjadi huruf kecil saat dasar awal dikapitalkan, contohnya <code>text-transform: uppercase</code> akan mengubah <code>ar aon tslí</code> menjadi <code>AR AON tSLÍ</code> dan bukan menjadi seperti yang dikira orang  <code>AR AON TSLÍ </code>(hanya Firefox).  Pada beberapa kasus, garis-sambung juga dihilangkan saat pengubahan menjadi huruf besar: <code>an t-uisce</code> berubah menjadi <code>AN tUISCE </code>(dan garis-sambung ditambahkan kembali saat dilakukan <code>text-transform: lowercase</code>)</li>
+</ul>
+
+<p>Pilihan bahasa didefinisikan dengan atribut HTML <code>lang</code> atau dengan atribut XML <code>xml:lang</code>.</p>
+
+<p>Dukungan untuk kasus-kasus tertentu tidak sama untuk semua peramban, harap periksa <a href="#Browser_compatibility">tabel kompatibilitas peramban</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<dl>
+ <dt><code>capitalize</code></dt>
+ <dd>
+ <p>Adalah kata kunci yang mengubah secara paksa <em>huruf</em> pertama dari setiap kata menjadi huruf besar. Karakter lainnya tidak berubah; huruf-huruf tersebut akan tetap seperti pertama kali dituliskan pada katanya. Sebuah huruf adalah karakter Unicode dari kategori Huruf atau Angka umum {{experimental_inline}} : pilihan ini tidak memasukkan tanda baca atau simbal pada awal kata.</p>
+
+ <div class="note">Penulis tidak seharusnya mengharapkan <code class="css">capitalize</code> untuk mengikuti konvensi huruf besar untuk bahasa tertentu (seperti mengabaikan artikel dalam bahasa Inggris).</div>
+
+ <div class="note">Kata kunci <code>capitalize</code> kurang dispesifikasikan pada CSS 1 dan CSS 2.1. Terdapat perbedaan antara peramban untuk memperhitungkan huruf pertama (Firefox menganggap - dan _ sebagai huruf, tetapi peramban lain tidak. Baik Webkit dan Gecko tidak dengan tepat menanggap simbol berdasarkan huruf seperti <code>ⓐ</code> sebagai benar-benar huruf. Internet Explorer 9 menerapkan definisi CSS 2 yang paling mendekati, tetapi dengan beberapa kasus sangat aneh). Dengan mendefinisikan bagaimana penerapan yang benar secara jelas, CSS Text Level 3 membersihkan kekacauan ini. Baris <code>capitalize</code> di tabel kompatibilitas peramban mempunyai informasi pada versi berapa mesin peramban mulai mendukung penerapan ini</div>
+ </dd>
+ <dt><code>uppercase</code></dt>
+ <dd>Adalah kata kunci yang mengubah semua karakter menjadi huruf besar.</dd>
+ <dt><code>lowercase</code></dt>
+ <dd>Adalah kata kunci yang mengubah semua karakter menjadi huruf kecil.</dd>
+ <dt><code>none</code></dt>
+ <dd>Adalah kata kunci yang mencegah perubahan dari semua karakter.</dd>
+ <dt><code>full-width</code> {{experimental_inline}}</dt>
+ <dd>Adalah kata kunci yang mengharuskan penulisan karakter — biasanya ideogram dan tulisan latin — di dalam kotak persegi, yang membuat mereka dapat sejajar dalam tulisan Asia Timur kebanyakan (seperti bahasa Cina atau Jepang).</dd>
+
+</dl>
+
+<h3 id="Sintaksis_Formal">Sintaksis Formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Contoh">Contoh</h2>
+
+<h3 id="none" name="none"><code>none</code></h3>
+
+<pre class="brush: html">&lt;p&gt;Kalimat Awal
+  &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: none
+  &lt;strong&gt;&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">span {
+  text-transform: none;
+}
+strong { float: right; }</pre>
+
+<p>This demonstrates no text transformation.</p>
+
+<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p>
+
+<h3 id="capitalize_(General)" name="capitalize_(General)"><code>capitalize</code> (Umum)</h3>
+
+<pre class="brush: html">&lt;p&gt;Kalimat Awal
+  &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: capitalize
+<code>  &lt;strong&gt;</code>&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>Contoh ini menunjukkan kata yang dikapitalkan.</p>
+
+<p>{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}</p>
+
+<h3 id="capitalize_(Punctuation)" name="capitalize_(Punctuation)"><code>capitalize</code> (Tanda Baca)</h3>
+
+<pre class="brush: html">&lt;p&gt;Kalimat Awal
+  &lt;strong&gt;<code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: capitalize
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>Contoh ini mennjukkan bagaimana tanda baca di awal sebuah kata diabaikan. Kata kunci ini bekerja pada huruf pertama yang termasuk dalam bagian karakter Unicode dari kategori Huruf dan Angka umum.</p>
+
+<p>{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}</p>
+
+<h3 id="capitalize_(Symbols)" name="capitalize_(Symbols)"><code>capitalize</code> (Simbol)</h3>
+
+<pre class="brush: html">&lt;p&gt;Kalimat Awal
+  &lt;strong&gt;<code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: capitalize
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>Contoh ini menunjukkan bagaimana simbol di awal kata diabaikan. Kata kunci ini bekerja pada huruf pertama yang termasuk dalam bagian karakter Unicode dari kategori Huruf dan Angka umum.</p>
+
+<p>{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}</p>
+
+<h3 id="capitalize_(Dutch_ij_digraph)" name="capitalize_(Dutch_ij_digraph)"><code>capitalize</code> (dwihuruf Belanda <em>ij</em>)</h3>
+
+<pre class="brush: html">&lt;p&gt;Kalimat Awal
+  &lt;strong lang="nl"&gt;<code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: capitalize
+  <code>&lt;strong&gt;</code>&lt;span lang="nl"&gt;<code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>Contoh ini menunjukkan bagaimana dwihuruf bahasa Belanda <em>ij</em> harus diperlakukan sebagai huruf tunggal.</p>
+
+<p>{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}</p>
+
+<h3 id="uppercase_(General)" name="uppercase_(General)"><code>uppercase</code> (Umum)</h3>
+
+<pre class="brush: html">&lt;p&gt;Kalimat Awal
+  &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: uppercase
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: uppercase;
+}
+strong { float: right; }</pre>
+
+<p>Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf besar.</p>
+
+<p>{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}</p>
+
+<h3 id="uppercase_(Greek_Vowels)" name="uppercase_(Greek_Vowels)"><code>uppercase</code> (Huruf Vokal Yunani)</h3>
+
+<pre class="brush: html">&lt;p&gt;Kalimat Awal
+  &lt;strong&gt;<code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: uppercase
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: uppercase;
+}
+strong { float: right; }</pre>
+
+<p>Contoh ini menunjukkan bagaimana huruf vokal bahasa Yunani, kecuali huruf disjungtif <em>eta</em>, kehilangan aksen, dan aksen pada huruf vokal pertama dari pasangan vokal menjadi diaeresis pada huruf vokal kedua.</p>
+
+<p>{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}</p>
+
+<h3 id="lowercase_(General)" name="lowercase_(General)"><code>lowercase</code> (Umum)</h3>
+
+<pre class="brush: html">&lt;p&gt;Kalimat Awal
+  &lt;strong&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: lowercase
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: lowercase;
+}
+strong { float: right; }</pre>
+
+<p>Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf kecil.</p>
+
+<p>{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}</p>
+
+<h3 id="lowercase_(Greek_Σ)" name="lowercase_(Greek_Σ)"><code>lowercase</code> (Huruf Yunani Σ)</h3>
+
+<pre class="brush: html">&lt;p&gt;Kalimat Awal
+  &lt;strong&gt;<code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: lowercase
+  <code>&lt;strong&gt;</code>&lt;span&gt;<code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code>&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: lowercase;
+}
+strong { float: right; }</pre>
+
+<p>Contoh ini menunjukkan bagaimana karakter bahasa Yunani sigma (<code>Σ</code>) diubah menjadi huruf kecil sigma biasa (<code>σ</code>) atau varian akhir-kata (<code>ς</code>), tergantung kepada konteksnya.</p>
+
+<p>{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}</p>
+
+<h3 id="full-width_(General)" name="full-width_(General)"><code>full-width</code> (Umum)</h3>
+
+<pre class="brush: html">&lt;p&gt;Kalimat Awal
+  &lt;strong&gt;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~<code>&lt;/strong&gt;
+&lt;/p&gt;</code>
+&lt;p&gt;text-transform: full-width
+  <code>&lt;strong&gt;</code>&lt;span&gt;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~&lt;/span&gt;<code>&lt;/strong&gt;</code>
+&lt;/p&gt;</pre>
+
+<pre class="brush: css">span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }</pre>
+
+<p>Beberapa karakter mempunyai dua bentuk, yaitu lebar normal dan penuh, dengan kode nilai Unicode yang berbeda. Versi lebar-penuh digunakan untuk membuat penggabungan penulisan dengan karakter ideografi Asia dengan mulus.</p>
+
+<p>{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}</p>
+
+<h2 id="Spesifikasi">Spesifikasi</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spesifikasi</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS4 Text')}}</td>
+   <td>Dari {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, menambahkan kata kunci <code>full-size-kana</code> dan membolehkan kata kunci <code>full-width</code> digunakan bersama dengan kata kunci lainnya.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Dari {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, memperluas cakupan huruf ke semua karakter Unicode dalam kategori Angka dan Huruf umum. Mengubah penerapan  <code>capitalize</code> ke huruf pertama kata, mengabaikan tanda baca atau simbol di awal. Menambahkan kata kunci <code>full-width</code> untuk membuat penggabungan penulisan dengan karakter ideografi dan alfabet menjadi mulus.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Dari {{SpecName('CSS1', '#text-transform', 'text-transform')}}, memperluas cakupan huruf dengan tulisan bikameral non-latin.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definisi awal</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Kompatibilitas_Peramban">Kompatibilitas Peramban</h2>
+
+<p> </p>
+
+<div class="hidden">Tabel kompatibilitas di halaman ini dibuat dari data terstruktur. Apabaila anda mau menambahkan data, harap lakukan <em>check-out</em> pada <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan mengirimkan <em>pull-request</em> kepada kami.</div>
+
+<p>{{Compat("css.properties.text-transform")}}</p>
+
+<p> </p>
+
+<h2 id="Lihat_juga">Lihat juga</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}</li>
+</ul>
diff --git a/files/id/web/css/type_selectors/index.html b/files/id/web/css/type_selectors/index.html
new file mode 100644
index 0000000000..5302eef6eb
--- /dev/null
+++ b/files/id/web/css/type_selectors/index.html
@@ -0,0 +1,121 @@
+---
+title: Type selectors
+slug: Web/CSS/Type_selectors
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<h2 id="Rangkuman">Rangkuman</h2>
+
+<p>Gaya seleksi CSS menampilkan elemen dengan nama node (bagian khusus nama elemen). Digunakan tersendiri, karenanya, sebuah tipe seleksi untuk sebuah nama node bagian terkecil menyeleksi seluruh bagian bagian dari tipe tersebut -- yang mana bahwa, dengan nama node tersebut -- didalam dokumen.</p>
+
+<h2 id="Bentuk_Penulisan">Bentuk Penulisan</h2>
+
+<pre class="syntaxbox">element { <em>style properties</em> }
+</pre>
+
+<h2 id="Contoh">Contoh</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: DodgerBlue;
+  color: #ffffff;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Here's a span with some text.&lt;/span&gt;
+&lt;p&gt;Here's a p with some text.&lt;/p&gt;
+</pre>
+
+<h3 id="Hasil">Hasil</h3>
+
+<p>{{EmbedLiveSample('Example', 200, 100)}}</p>
+
+<h2 id="Spesifikasi">Spesifikasi</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spesifikasi</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Tanpa Perubahan</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Tanpa Perubahan</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Defenisi Tanda</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Dukungan_Browser">Dukungan Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>