Forem: Nzeamalu Nkechinyere Tere-joe

Understanding CSS Cascade, Selectors and Specificity

Nzeamalu Nkechinyere Tere-joe — Mon, 22 Apr 2024 10:51:32 +0000

Introduction to CSS Cascade

A Cascading Style Sheet (CSS) is a language consisting of a set of rules that determines the layout of a webpage. We all understand to a certain extent that the page displays which rule comes later, i.e., the later rule overrides the earlier one.

Frequently, you find out that a rule applied to an HTML page is not working. This situation might be so because multiple rules have been applied to the same element without knowing; this is where the cascading rules come into play. This article explains the method used to resolve conflicts in rules and how exactly a browser determines what style to apply to a specific element.

The actual logic of CSS code is more complex and is based on a classification of rules. We will be discussing two of these rules:

The Cascading rule
The Specificity rule

Cascading Rule

The cascade denotes that the cascade layer, the CSS rule order, and the origin/weight are important.

The CSS rule order simply states that when two rules from the same cascade layer both have equal specificity, the later rule will always override the earlier one.
For example, if we have two exact rules that apply to the same <div> element. The <div> element ends up taking the last rule (color: blue). Although both rules are the same, have the same specificity, and originate from the same selector, the last rule in the source order is chosen.

`div{
  color: brown;
}
div{
  color: blue;
}
`

Specificity Rule

Specificity is the process that determines which property value is applied to an element by the browser when several style blocks have various selectors that configure the same property with different values and target the same element.

When dealing with specificity, there are key things to note:
The class selector is more specific and weightier. The class selector, the attribute selector, and the pseudo-classes selector all have the same weight.
The element selector and the pseudo-element selector have the same specificity and are less specific and weightier than the class selector.
The ID selector is weightier than both the class selector and the element selector.

For example, the <div> element with a class name of "main-div" is styled below. The <div> element will take the style of the class selector over the element selector because the class selector is more specific.

div{
  color: brown;
}

.main-div{
  color: blue ;
}

Three different values identified as IDENTIFIERS, CLASS, and ELEMENT are used to quantify the specificity of a selector:

Identifiers: The Identifiers, popularly known as IDs, take the specificity of 100 points.

Classes: Any class selector, attribute selector, or pseudo-class that is a part of the overall selector takes a specificity of 10 points.

Elements: For any element selector or pseudo-element that is a part of the overall selector, it takes the specificity of 1 point.

CSS styles applied directly to the HTML elements have 1000 points, while the !important statement gives a specificity of 10,000 points.

Therefore, the rule is that the selector with the highest points takes the styling. In the case of having the same number of points for the same selectors, the one with the weightier elements takes the lead. In this regard: ID-CLASS-ELEMENT.
For example;

#id div ul li a {
  color: yellow; Will give us 5 points: 1-0-4
}


#id div ul .nav a {
  color: white; Will give us 5 points: 1-1-3
}

This code is targeting the same elements but with different selectors. The second one wins and makes the text color white because it has a class selector which is weightier than the four/infinity element selectors in the first code. The first code has no class selector.

History of the Internet

Nzeamalu Nkechinyere Tere-joe — Thu, 04 Apr 2024 18:45:26 +0000

History of the Internet
The Internet began in 1969 with the Advanced Research Projects Agency Network(ARPANET), which connected just four universities' computers. In 1991, the Internet was made accessible to the general public.

Many people contributed to the creation of the Internet. But, J.C.R. Licklider was the first to imagine a network of interconnected computers. Other significant figures involved in creating the Internet are Tim Berners-Lee, the guy behind the World Wide Web, and Lawrence Roberts, who proposed and oversaw ARPANET for many years.

The idea of the Internet began when the United States and the Soviet Union were involved in the Cold War throughout the 1950s and 1960s. Each nation was striving to improve its scientific and technological capacities to prevent nuclear assaults from one another and to maintain the ability to strike the other if things got out of hand.

Compared to modern ones, computers back then were far more expensive and bulkier. Mainframe computers occupied large halls, and they could only perform specific functions. Researchers needed to access computers to do particular jobs, but they frequently had to travel considerable distances in search of a computer capable of performing specific work.

The proposed solution involved connecting the computers so they could communicate with one another, enabling data sharing amongst researchers without requiring them to visit the computer's location. The issue with computers communicating with one another was that in the process of moving data, known as circuit switching, it needed to be faster, making it more prone to failure. Each piece of the data must be delivered in a single packet, and none of it would get through if the connection was lost in the process.

To solve this issue, scientists created packet switching, an alternative technique.
Packet switching could deliver the data in smaller chunks and send them separately for each segment. The smaller data sets are transferred more quickly, and in the event of an interruption, some of the data must have passed through, and the process may continue partially, saving a complete restart. The packets are combined into a single packet after the data arrives at its destination.

At this point, the evolution of the Internet persisted. Through packet switching, computers communicate with one another using the ARPANET. Other networks were created after ARPANET, but computers could not communicate with one another. Therefore, a set of guidelines, the Transmission Control Protocol and Internet Protocol (TCP/IP), was created to address this issue. These regulations ensured packets sent over a network would reach their intended recipient and permitted universal communication across all networks.

Domain Name System
Domain Name System (DNS) maps human-readable domain names (found in URLs or email addresses) to numerical Internet Protocol (IP) addresses, allowing devices to connect to the intended server or website.

Going back in history to the development of the computer network ARPANET, now known as the Internet, some obstacles arose in hindering dependable communication in the face of equipment failure. No point or link on the ARPANET was intended to be more important than any other; this situation was, therefore, accompanied by the development of redundant routes and data rerouting in the event of network failure in a component.

Every host on the ARPAnet has their name-to-address mapping in a single location file named HOSTS.TXT. The Network Information Centre at SRI was in charge of this file.
Three issues with this configuration arose:

Name collisions: Every host was required to have a unique name, and network users might add hosts with conflicting (non-unique) names without the help of a centralized authority, thereby "breaking the whole scheme."
Consistency: It became impossible, or at least very difficult, to update the file and ensure all hosts got the most recent version.
The responsible host found it too much to handle the traffic and strain of distributing the file.

Because of HOSTS.TX was a single point of failure; this method struggled to scale over a certain number of hosts.
A scalable and decentralized solution was required for ARPAnet, which was DNS.

Components of DNS

DNS Server: DNS operates through a distributed network of DNS servers. These servers store and manage information about domain namespace and IP addresses.
DNS Resolver: Your computer or network device (e.g., router) typically has a DNS resolver that handles DNS queries. When you request a domain name, the resolver communicates with DNS queries. When you request a domain name, the resolver communicates with the
DNS servers to resolve the domain to an IP address.
Domain Name: Unlike an IP address, a domain name is significantly more straightforward to memorize and type into a terminal or web browser.
Although a domain name is a URL component, the two are not interchangeable. A domain name is the name of a website and is a sub-component of every URL, whereas a URL is the whole web address of a resource.
Every domain has two components: the top-level domain (TLD) and the second-level domain (SLD). A domain name's components get increasingly specific as they move from the right (end) to the left (beginning). For example, let's look at "behance.com":
URL: https://ww.behance.com
Domain name: behance.com
TLD: com
SLD: behance

Network Packet
A network packet is a basic data unit grouped and transferred over a packet-switched network like the Internet. Each packet or data chunk forms part of a complete message and carries relevant address information that helps identify the sending computer and intended recipient.

A network packet has three parts: the packet header, payload, and trailer. A network packet's size and structure depend on the underlying network structure or protocol. Conceptually, a network packet is similar to a postal package. The box or envelope, in this case, represents the header, the content is the payload, and the signature is the trailer. Instructions about the packet's data are contained in the header.

A network packet travels to its destination by selecting the quickest route possible. All subsequent packets in a message follow this path, increasing efficiency. For example, when equipment malfunctions during message transmission, routers redirect the packets to ensure the entire message reaches its destination.

File Transfer Protocol
File Transfer Protocol (FTP) is a standard network protocol that transfers files between a client and a server on a computer network, such as the Internet. It is widely used for uploading, downloading, and managing files on remote servers.

For FTP to function, two connections must be established between the systems attempting to communicate. The data transport is handled by one channel, while the other is reserved for the orders and responses transmitted back and forth between the two clients. Four instructions are used by the machines, servers, or proxy servers that are talking during an FTP transfer. These instructions are:

Send.
Get.
Change Directory.
Transfer.

Hypertext Transfer Protocol
The Hypertext Transfer Protocol (HTTP) loads web pages using hyperlinks. The World Wide Web is built on HTTP, which loads web pages using hypertext links.

HTTP is designed to move information between networked devices; HTTP is an application layer protocol that operates on top of other network protocol stack layers. A typical HTTP flow is when a client computer delivers a request to a server, and the server replies with a message.

An HTTP Request
An HTTP request is a message a client sends (e.g., a web browser) to a server requesting a specific action or resource. Web browsers and other Internet communications platforms request the data they require to load a page using an HTTP request. A collection of encoded data, including various kinds of information, is sent along with every HTTP request sent over the Internet.
An HTTP request typically includes:

HTTP version type
a URL.
An HTTP method.
HTTP request headers.
Optional HTTP body.