CSS | Popular terms on the website 0 times seen

Description

In this opportunity we will try to understand what CSS is. We often hear 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 adjusted using CSS. However, some people may not understand this term especially for developers who are new to the world of coding websites.

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

CSS as we have heard many times is not a single term that is all, it only has a website styling function and that's it. However, there are enough terms that we should know together to reach a serious understanding of this term CSS.

CSS that we understand

CSS is code that makes it easy for website developers to change styles across multiple or all web pages, define layouts, create text styles ranging from determining text thickness, text color, text type, italics to other elements, etc. 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 the far future and has greatly evolved from the previous era of CSS2. Thanks to CSS3 it is possible to make rounded corners and the drop-shadow effect can be displayed in the browser. CSS3 also offers new tools for describing colors in documents. HSL (Hue-Saturation-Lightness) is the newest addition to HSLA which includes an Alpha channel to reduce opacity.

The attribute selector is a big step forward when it comes to straight markup styles. With this coding style you can target specific element names which 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 examples below are relatively simple ideas:

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

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

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

CSS now stands proudly as the dominant language for styling our front-end websites.

Important terms in CSS

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

  • Property is the Style you apply to the selector. In simple terms a property is what appears before the colon on each line of CSS. In the example below, the word "width" is a property.
#box {
   width: 200px; /* the property is "width" (without colons) */
}
  • Value is the Value that a 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.
#box {
   width: 200px; /* after the colon, without the semicolon */
}
  • Keyword are words defined in the CSS specification and therefore should not appear in quotation marks when used. Example: red, solid, dotted. Keyword represents a value for a property and is somewhat like the word reserved for a particular property. Different properties have different keywords, and all properties allow the "inherit" keyword. In the example below, the value "auto" is a keyword.
#container {
  height: auto; /* "auto" is a keyword */
}

There are those who agree that:! Important qualifies as a keyword, based on how it is distinguished from value.

  • Length Units is a value that can be declared in units (example: 1px, 2%).
  • Functional Notation is any Value defined as a function (identifier followed by ()). Mainly used to define colors, URIs, attributes and transformations: example: 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 Block is the section of CSS where property / value pairs appear. In the example below, everything found between the {} marks (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 the closing curly brace */
}
  • Rule or Rule Set is a selector followed by a block of declarations. This is a single piece of CSS including selectors, {} marks 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 to apply the style to. Specifically, the selector is the portion of the CSS line that selects what target elements are with property / value pairs. 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 the element with the tag name. 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 are the most commonly used selectors. Example: .style, .pen, .mystyle, and so on, to select elements with the style classname, pen, mystyle, that. This is allowed for more than 1 element with the same class name. The selector in the example below targets elements by their class names. So each element with the "navigation" class will receive the intended style:
/* matches HTML element with class="navigation" */
.navigation {
  width: 960px;
  margin: 0 auto;
}
  • ID Selector is to use it sparingly. You cannot reuse IDs within the same page and they are only used to uniquely identify elements. Example:
<div class="text-center gaya" id=this-idselector></div>

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

/* 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 a universal selector:
/* the asterisk character is the universal selector */
.navigation ul * {
  width: 100px;
  float: left;
}

So, any elements that appear as descendants of unordered list elements inside elements having the class "navigation" will receive the declared style. Universal selectors are generally discouraged for performance reasons.

  • Attribute Selector is that if you use an attribute other than class or id to identify elements in your stylesheet, you will use Attribute Selectors. You can also do a template match in the attribute picker (so if you want to do a template match for the selectors using class or ID attributes you can use the attribute selector). Example:
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
a[target] {
  background-color: yellow;
}
</style>
<!-- CSS -->
</head>
<body>

<p>Links with the "target" attribute receive a yellow background:</p>

<a href="https://www.google.com">Google International</a>

<!-- yellow background -->
<a href="https://www.google.co.id" target="_blank">Google America</a>
<a href="https://www.google.org" target="_top">Google Organization</a>
<!-- yellow background -->

</body>
</html>
  • Pseudo-Classes is a class that is applied to elements based on information that is not in the markup, for example: first-child or: last-child. You cannot use the article: first-child section to select the first occurrence of the 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 an 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 events in relation to other elements (selected by combinator options: space,>, +, or ~).

There are four different combinators in CSS:

  1. Descendant selector (space)
  2. Child selector (>)
  3. Adjacent sibling selector (+)
  4. General sibling selector (~)

What do the four terms above mean:

  1. Descendant Combinator This is the most common usage, eg #responsive h1.
  2. Child Combinator is the child selector selects all elements that are children of a particular element. The following example selects all < p > elements that are children of < div > elements:
div > p {
  background-color: yellow;
}
  1. Adjacent Sibling Combinator are Elements that are directly adjacent to other elements.
  2. General Sibling Combinator are Elements that are close together, but not directly to other elements.
  • At-Rules are Rules that start with @character, for example: @import, @page, @media, and @ font-face.
  • Media Features 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 always represent the features declared in the standard.
  • Comment or Statement is the language used to explain the CSS code that is compiled below. Example: the comments here say about 4 things:
    1. Bootstrap v4.3.1 (https://getbootstrap.com/)
    2. Copyright 2011-2019 The Bootstrap Authors
    3. Copyright 2011-2019 Twitter, Inc.
    4. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;

Tags: Code Reference on 15 September 2020

Comment

Forum Diskusi

Post a reply
2942 views

Reply to this discussion