Understanding What is CSS, Terms, and Functions

What is CSS? Cascading Style Sheets (CSS) is a programming language in HTML. Check out the full definitions, terms and functions here.
Understanding What is CSS, Terms, and Functions

For those of you who are learning HTML or are just learning HTML, you must be familiar with hearing something called CSS! That said, making a website feels incomplete if you don't have CSS. Isn't that right? So that you're not curious, let's find out what CSS is and the terms it has!

What Is CSS?

Cascading Style Sheets , or CSS for short, is a programming language for determining how documents are presented. CSS functions to explain and organize the appearance of elements written in markup languages , one of which is HTML. In another sense, it is CSS that explains how HTML elements behind the scenes are displayed in such a way on your website's screen later. Both HTML and CSS, both complement each other.

So, as developers, we are required to be consistent and thorough. Misunderstanding or miscoding just a little bit can be fatal. Moreover, in CSS later we will find various elements and terms that are quite diverse. Therefore, before going too far, let's get acquainted with CSS terms and their uses below!

CSS terms and their functions

In the CSS programming language there are also several terms in it that you must understand. Like:


Comments are used to explain code . Even though comments won't appear on the screen later , they can help you edit and document code . Therefore, you can add comments anywhere and as needed.

Comments themselves are inside the <style> element, and are usually in the form of a slash (/) and an asterisk (*).

2. Declarations

Declaration is a single line of code in CSS (not including comments ) which is usually marked with an opening curly brace ({) and a closing curly brace (}. 

3. Selectors

In CSS, selectors are used to select which HTML elements to target or affect. For example, if we want to set the position of the text or the color of the text, the way to select it is to use the selector .

Selectors are marked with h1, h2, p, a, div, body, and other tags.

In addition, there are also various types of selectors. Grouping selector is one of them, in which all HTML elements are grouped together to minimize code.

4. Properties

Properties in CSS are used to add or set text size, font type , text color, background color, and so on. In CSS rules, we can also use as many properties as we want. Each of them applies to the element to which the selector is applied .

The property appears before the colon (:) and after the semicolon (;) on each line.

5. Values

Next up, there's Value . In CSS, value is what comes after the colon (:) in each line.

6. Pseudo-class

More or less, pseudo-classes work the same as regular CSS classes , only they are not explicitly declared in the HTML. The use of pseudo-class is to define a state of an element. 

7. Pseudo-element

Pseudo-elements in CSS are used to edit certain parts of an element. Unlike a pseudo-class , a pseudo-element targets 'virtual' elements which can change depending on the actual HTML. Apart from that, the pseudo-element is also used for:

  • Sets the typeface of the first, or first line of an element
  • Inserts content before/after an element's content

8. Padding

Padding is used to create space between the content and the element's border. We can set the padding for each side of the element, either up or down, or right or left.

9. Margins

In CSS, margins are used to create space or spaces around elements, outside the specified boundaries. Here, we are in control to set the margins in each CSS element, i.e. top, right, bottom and left.

Don't mix it up~ Padding is distance, while margin is space

10. Combiners

The use of the combinator in CSS is to combine two selectors at once. There are four types of combinators , namely:

  • descendant selector marked with a space (space)
  • child selector marked with square brackets (>)
  • adjacent sibling selector marked with a plus sign (+)
  • general sibling selector marked with a wave sign (~)

and many more .....

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.