Articles and Templates Collection

This catalog page features representative articles and a collection of the best Nickgenom templates taken from various interesting sources on the internet

Code, Reference

CSS | Popular terms on the website

15 September 2020

In this opportunity we will try to understand what CSS is. We have often heard about CSS or website developers will be very familiar with this term. Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of documents written in a markup language such as HTML. CSS is the cornerstone technology of the World Wide Web, along with HTML and JavaScript. CSS for website developers is known to be useful for styling websites, fonts, colors, sizes, spacing, borders, backgrounds and shadows are just a few examples that can be customized using CSS. However, some people may not understand this term especially for developers who are new to the world of website coding.

There are many references to this CSS term. But here the author will try to reduce this term into a single unit so that it can provide easy understanding for even new website developers.

CSS as we've heard so many times is not a singular term that's just that, it only serves as a website styler and that's it. However, there are quite a number of terms that we must know together to achieve a serious understanding of these CSS terms.

CSS we understand

CSS is a code that makes it easy for website developers to change the style of some or all web pages, determine the layout, create text styles starting from determining the text thickness, text color, text type, tilt to other elements, and so on. previously it can only be specified in the HTML page.

Current CSS

Be thankful you are in the new age of CSS today. Now is the time for CSS3 which has transcended time far ahead and has greatly evolved from the previous CSS2 era. Thanks to CSS3 it is possible to make rounded corners and drop-shadow effects display in the browser. CSS3 also offers a new tool for describing colors in documents. HSL (Hue-Saturation-Lightness) is the latest addition to HSLA that includes Alpha channels to reduce opacity.

The attribute selector is a big step forward when it comes to straight markup styles. With this code style you can target specific element names that contain attributes with specific values. This is mostly useful when working with markup such as XML where there are no standard design principles for manipulating nodes. The example below is a relatively simple idea :

1. div[attrib^="1"] { /* styles here */ }

The code above is part of the CSS selector library. This will affect all div elements with the attrib attribute which also holds the value 1. If this is still confusing see the example below to clarify. In theory, these two selectors should perform the same action.

1. p[id^="primary"] { /* styles */ }
2. p#primary { /* styles */ }

CSS today has stood with great pride as the dominant language for styling our front-end websites.

Important terms in CSS

The following terms are based on the article Divya Manian modified with various other representative sources.

Property is the Style you apply to the selector. In simple terms the property is what comes before the colon in each line of CSS. In the example below, the word width is a property.

#box  {
width : 200px; /* property is "width" (without colon) */

Value is the Value the property can have. In simple terms, Value is what appears immediately after the colon in each line of CSS. In the example below, 200px is the value.

width : 200px; /* after the colon, without the semicolon */

Keyword is a word defined in the CSS specification and therefore must not appear in quotes when used. Example : red, solid, dotted. Keywords are values for properties and are somewhat like reserved words for specific properties. Different properties have different keywords, and all properties allow the keyword inherit. In the example below, the value auto is the keyword.

#container {
height: auto; /* "auto" is a keyword */

There are opinions that agree that the word : !important qualifies as a keyword, based on how keywords are distinguished from values.

Length Units are Values that can be declared in units (eg 1px, 2%). Functional Notation is any Value specified as a function (identifier followed by ()). Mainly used to define colors, URIs, attributes and transformations, e.g. rgba(0, 0, 0, 0.5), url('im.png'), attr('href'), scale(20).

Identifier is anything that appears as a property, id, class, keyword value, and at-rule. In the example, below are four identifiers :

/* "body", "background", "none", and "font-size" are identifiers */
body {
  background: none;
  font-size: 14px;
/* "14px" is not an identifier */

The word body is an Identifier or identifier; the word background is an identifier too; the word none is an identifier; and the word font-size is an identifier. The last value 14px is not an identifier, because it is not a keyword.

Declaration is a collection of property names and values. It's usually a single line of CSS that appears between curly braces, either abbreviated or handwritten. In the example below, everything after the first curly brace, and before the last brace (excluding comments) is a declaration :

body {
  font-family: Arial, sans-serif; /* this line is a declaration */
  background: red; /* this line is a declaration */

In the following example, there are two declarations between the {} signs :

body {
  font-family: Arial, sans-serif; /* one declaration */
  color: #555; /* another declaration */

Declaration Block is the section of CSS where property/value pairs appear. In the example below, all that is found between the {} (excluding comments) is a declaration block :

body {
  font-family: Arial, sans-serif; /* starts with this line */
  color: #555;
  font-size: 14px;
  line-height: 20px; /* ends here, before closing curly brace */

Rule or Rule Set is a Selector or selector followed by a declaration block. This is a piece of CSS including the selector, the {} flag and different lines with properties and values. The code in the example below consists of a set of rules :

body {
  font-family: Arial, sans-serif;
  color: #555;
  font-size: 14px;

#responsive {
clear: both;
color: #000;
background-color: chocolate;

Selector is how you declare which elements should be styled. More specifically, the selector is the part of the CSS line that selects the target element with a property/value pair. In the example below, #container, #box is a selector :

/* the selector is everything on the first line */
/* excluding the opening curly brace */
#container #box {
  width: 200px;

Element Type Selector is a selector that targets elements by tag names. The selector in the example below is an element type selector, because it doesn't use a class, ID, or other selector to apply a given style. Instead, it directly targets all HTML5 nav elements :

/* matches an HTML element by name */
nav {
font-family: Arial, sans-serif;
color: #555;
font-size: 14px;

Class Selector is the most commonly used selector. Example : .style, .pen, .mystyle, and so on, to select elements with classname style, pen, mystyle, that. This is allowed for more than 1 element with the same class name. The selector in the example below targets the element by its class name. So any element with class "navigation" will receive the intended style :

/* matches HTML element with class="navigation" */
.navigation {
  width: 960px;
  margin: 0 auto;

ID Selector is to use this sparingly. You cannot reuse an ID within the same page and it is only used to uniquely identify an element. Example :

<div class="text-center gaya" id=ini-idselektor></div>

The selector in the example below targets elements by their ID. So any element with ID navigation will receive the style in question :

/* matches HTML element with id="navigation" */
#navigation {
  width: 960px;
  margin: 0 auto;

Universal Selector The universal selector matches any element in the context in which it is placed in the selector. In the example below, the * character is the universal selector :

/* the asterisk character is the universal selector */
.navigation ul * {
  width: 100px;
  float: left;

So any element that appears as an unordered list element descendant file inside an element that has the class navigation will receive the declared style. Universal selectors are generally not recommended for performance reasons.

Attribute Selector is if you use attributes other than class or id to identify elements in the stylesheet, you will use Attribute Selectors. You can also perform a template match in the attribute selector (so if you want to perform a template match for the selector using the class or ID attribute, you can use the attribute selector). Example :

<!DOCTYPE html>
<!-- CSS -->
a[target] {
background-color: yellow;

<!-- CSS -->
<p>Links with the "target" attribute receive a yellow background:</p>
<a href="">Google Internasional</a>
<!-- yellow background -->
<a href="" target="_blank">Google Indonesia</a>
<a href="" target="_top">Google Organization</a>
<!-- yellow background -->

Pseudo-Classes are class that are applied to elements based on information not in the markup, for example :first-child or :last-child. You cannot use article section :first-child to select the first occurrence of article, if the first child of the section is h1 and not article. Likewise with :nth-child, and :last-childpseudo-class.

Pseudo-Elements are different Pseudo-elements from Pseudo-Classes in that they actually create elements in the document tree. This is almost the first example of CSS modifying the HTML document tree. Ideally you should use pseudo-elements with :: instead of : (but most browsers accept the notation : for CSS 2.1 pseudo-elements). The pseudo-elements are : ::first-line, ::first-letter, ::before, ::after.

Combinators is the selection of elements based on their occurrence in relation to other elements (selected by the combinator options : space, >, +, or ~).

There are four different combinators in CSS :

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)
  • General sibling selector (~)

What do the four terms above mean :

  • Descendant Combinator This is the most common usage, eg #responsive h1.

  • Child Combinator is a child selector selecting all elements that are children of a particular element. The following example selects all <p> elements that are children of a <div> element :

    div > p {
     background-color: yellow;
  • Adjacent Sibling Combinator is an Element that is directly adjacent to another element.

  • General Sibling Combinator is an Element that is adjacent to, but not directly to another element.

  • At-Rules are Rules starting with the character @, for example : @import, @page, @media, and @font-face.

  • Media Features is With media queries, you can target styles depending on the media features. Popular uses of the media feature are min-width and max-width to detect iOS devices.

  • Vendor-specific Extension is Exactly what it says. They provide specific functionality for specific vendors (i.e. browsers). They do not necessarily represent the features declared in the standard.

  • Comment or Statement is the language that explains the CSS code that is compiled below it. Example: the comments here say about 4 things:

    1. Bootstrap v4.3.1 (
    2. Copyright 2011-2019 The Bootstrap Authors
    3. Copyright 2011-2019 Twitter, Inc.
    4. Licensed under MIT (

Pay attention to this code :

  Bootstrap v4.3.1 (
  Copyright 2011-2019 The Bootstrap Authors
  Copyright 2011-2019 Twitter, Inc.
  Licensed under MIT (
 */:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;

Leave a Comment

Send reply
24060 seen

1-1 from 1

Reply to this discussion

You can't edit posts or create replies: You must be logged in before you can post.

Words of wisdom

" When you have no words, be patient, because many people have no way out. "

Article Reference :

Modern CMS Website Platform

Tags post: Reference 05 August 2021

Different Types of Licenses

Tags post: Code, Reference 29 September 2020

CSS | Popular terms on the website

Tags post: Code, Reference 15 September 2020

HTML | Popular terms on the website

Tags post: Code, Reference 13 September 2020

Animation Collection Use Codepens

Tags post: Code, Reference 07 September 2020

Website Template Collection :

  • Free Articles | Articles and Templates Collection Artikel dan Koleksi Template Wed, 20 Oct 2021 00:11:34 +0000

    apa sih ini?
    Artikel dan Koleksi Template Mon, 18 Oct 2021 20:10:22 +0000