CSS Selectors and Pseudo-element.

Abu Nasar — Mon, 26 Feb 2024 19:31:01 +0000

What is CSS?

CSS stands for Cascading Style Sheet language which describes how a document is written in a markup language like(HTML) should be displayed and presented. CSS determines how the HTML is displayed on the screen it beautifies the HTML pages to look good. Using CSS we can add color, background, font, width, height, layouts and many more can be done using CSS on HTML document.

Why CSS is important?

Separation of concern: Keeps your website's content(HTML) separated from it style(CSS). It keeps the code cleaner, more readable and easier to maintain and update.
Reusability: We can use CSS Rule in multiple HTML. Once we write we can use it anywhere no need to write again and again. It saves time and makes website styling consistent.
Flexibility: It gives you a ton of control over the visual presentation of your website.
User Experience: CSS create a Visually appealing, user-friendly website that can adapted by any browser.

How does CSS work?

There are lots of concepts about how CSS works but we will go through only what is important.

Selectors: Selectors target the HTML element that we want to style. There are many types of selectors.

Basic Selector 1)Universal Selector: It selects all elements of the HTML to apply all CSS over all tags. * is used to select all elements. uses: Removing default browser margins and padding to create a consistent baseline:

   *{
    padding:0
   }

2)Individual Selector: when we want to target specific

elements from that HTML document then we use an individual
selector i.e. [tag name]{}.
This is a more specific selector than a universal selector.It
means we put any CSS property inside an individual selector
that overrides the default.

Class and ID selector

Class Selector: This selector is used to target specific class attributes. Classes can be reused all over the document.
ex .important-text{properties:values}
ID Selector: This selector is used to target unique element with specific ID attributes. ex #header{properties:values}

AND(chaining) & Combined Selector

AND Selector: Combining multiple selectors to target elements with high specificity. To use this, chain multiple selectors together with a dot(.) in between.
div.container p { color: red; }

Combined Selector: Applying the same styles to several different
targets simultaneously.

h1, h2, p { font-family: Arial, sans-serif; }

-Descendant Selector
Selects elements that are descendants of a specified parent element. It uses a space () between selectors to signify this relationship. Syntax: ancestor descendant { /* Styles applied here */ }

ul li {
     list-style-type: circle;
}

IMPORTANT POINT OF DESCENDANT SELECTOR

Nesting: You can chain multiple descendant selectors for more specific targeting. Example: div section article p { ... }
Specificity: Less specific than child selectors (which use >) because they select elements at any nesting depth, not just direct children.
Flexibility: It's one of the most versatile CSS selectors since it can target elements many levels down the hierarchy.

-Child Selector (>): Targets Elements that are direct children of another element.

 ul > li {
                 list-style-type: disc;
               }

Adjacent Sibling Selector (+): Targets an element immediately following a sibling element.

                p + p { 
                 margin-top: 2em;
                 }

General Sibling Selector (~): Targets elements that follow a sibling, with possible elements in between. This means targets all siblings of an element.
Pseudo Selector

1) Pseudo class Selector: Target an element based on its
state, position, or user interaction.

Syntax :selector:pseudo-class { /* Styles applied here */ }
Example

Dynamic States:

:hover (mouse hovering)
:focus(element has keyboard focus)
:active (element is being clicked)
:visited(for styling visited links)

Structural Relationships

:first-child (targets the first child of its parent)
:last-child (targets the last child of its parent)

:nth-child() (targets elements based on their position
using a formula)

 /* Links get an underline on hover*/
         a:hover { 
          text-decoration: underline;
       }

2) Pseudo-elements: Style specific parts of an element or insert content that's not present in the HTML.

Common Examples:

::before, ::after (insert content before or after the
element's content)
::first-letter (style the first letter of a block element)
::first-lin (style the first line of a block element)
::selection (style text that has been highlighted by the user). This is a CSS pseudo-element. It targets the portion of an element that is currently selected by the user (highlighted with their mouse or keyboard).

  li::before {
                      content: "✔ ";  /* Insert a checkmark */
                      color: green;
                      margin-right: 5px;
                 }


             /* selection example */

      <p>This text has normal selection.</p>
      <p class="important">This selection is more noticeable!</p>

          ::selection {
           background-color: light-blue; 
           color: white;
     }

          .important ::selection {
          background-color: orangered;
          color: black;
         }

If you found this blog post helpful, please share it with others who might be learning CSS!
_

Introduction to Web and HTML.

Abu Nasar — Thu, 16 Nov 2023 09:27:38 +0000

Mainly web is WWW(World Wide Web or the web) is a system interconnected with documents and other resources like URL, hyperlinks. It is accessed via the internet using web browsers like Chrome, Firefox. It allows the user to navigate web pages.
Before going to what is server, client... we need to understand how web pages are created.
web pages created with the help of HTML(hypertext markup language), CSS(cascading style sheet) and JavaScript. But CSS and JavaScript help html for styling and add functionality so we can say that HTML is first step of web pages

we can say that HTML is used to create web pages.
HTML describe the structure of web pages. It means HTML specifies the hierarchical structure of content and create relationship between the different part of a document. Before going to depth in html like tag, element, attributes, title etc. we need understand how this web pages work.

Now, it's time to understand the server and client.

what is web server?
A web server is a software application or a hardware device that stores, processes, and serves web pages to users over the internet.

How It works?
When a user requests a web page, The web server processes the request and sends the resources back to the user's browser.

where web installed?

Web server installed on physical machine or cloud server. common Web server is Apache, Nginx, and Microsoft IIS.
most of organization prefer Cloud servers because it provide scalability, flexibility, and the ability to pay for resources on a usage basis. Popular cloud providers include Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP).

How Server receive data?
Web servers receive data through HTTP requests. When a user accesses a webpage, their browser sends an HTTP request to the web server, which responds with the requested content.

Connection with Client
The client (browser) and server communicate via the HTTP/HTTPS protocol. The server sends HTML, CSS, and other files, and the client renders the webpage.

Then one question arises is why we use C-panel to Manage server why we don't use Apache, Nginx directly.
cPanel is a web hosting control panel that simplifies server management. It provides a user-friendly interface for tasks like website configuration, file management, and email setup.
In summary, a web server processes client requests, serves web content, is installed on dedicated machines, communicates with clients via HTTP, and popular servers include Apache, Nginx, and IIS. cPanel is a control panel for simplified server management in web hosting.
Mainly C panel is provided by web hosting company Godaddy ,Hostinger, Bluehost

Then what is the difference between ,for example,hostinger and Apache?
Hostinger is a web hosting company. It provides services that allow individuals and organizations to make their websites accessible via the World Wide Web.
Apache, on the other hand, is a web server software. It's one of the most widely used web servers globally. Apache is responsible for handling incoming HTTP requests from clients (such as web browsers) and serving the requested web pages or resources.
When you host your website with a service like Hostinger, behind the scenes, the hosting infrastructure uses web server software to handle requests and serve web pages. Hostinger may use a variety of web server software, and Apache is one of the popular choices.

This all discussion regarding hosting but again one concept left that how html pages work why only index.html is written.
"index.html" serves as the default landing page of a website. When a user visits a website without specifying a particular file or page, the web server looks for "index.html" and, if found, sends it as a response.
This file typically contains the main content and structure of the website, and it's the starting point for users exploring the site.
"index.htm," "default.html," or "home.html" might also be considered default documents.

Pleaselike and share if you like this content.

DEV Community: Abu Nasar

CSS Selectors and Pseudo-element.

What is CSS?

Why CSS is important?

How does CSS work?

Introduction to Web and HTML.