DEV Community: MD AZHAR MASOOD

CSS jounerny is Just like Roller Coaster

MD AZHAR MASOOD — Sun, 13 Nov 2022 08:54:54 +0000

Table of Contents

introduction of css
Basic selector
Pseudo-class selector

let understand css

Cascading Style Sheets is languages which used for described presentation of HTML.
CSS also described how the element are going to rendered on screen.
css types

External: link tag is used to link:css

!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>External CSS Example</title>
    <link rel="stylesheet" href="../styles.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

extenalcss

h1 {
  background-color: yellow;
  color: blue;
  border: 1px solid black;
}

p {
  color: red;
}

internal : <style> tag used to inside head element

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <style>
      h1 {

        background-color: yellow;
        color: blue;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>AXM||internal css!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

inline: style tag used html element

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title> inline CSS t</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
      Hello World!
    </h1>
    <p style="color:red;"> inline CSS exm</p>
  </body>
</html>

let talk about selector

selector target the html css to applt style/css.

some selector we are going to understand by using example for better understanding.

let start with our first selector ,that is any guess let me give u hint it apply in whole body , u get or not , yes, we are talking or going to guseess about

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS||AXM</title>
</head>

<body>
    <div  class="div-1">   welcome to class live   </div>
    <span > span is nothing ,it just line of code mean in-line , it doesnt take any space </span>
    <p id="para-1"> we know already what is paragraph </p>
    <ul>
        <li class ="bg-blue text-white" > AXM </li>
        <li class="sibling">AXM  2</li>
        <li>AXM 3</li>
        <li>AXM 4</li>
        <li>AXM 5</li>
    </ul>
    <div>   
        <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a id="para-1" href="#">Test</a></li>
        <li>higlisht me</li>

      </ul>
    </div>
    <section>
       <p class="sibling"> Test 1</p>
       <p>Test 2</p>
       <p>Test 3</p>
       <p>Test 4</p>

    </section>
</html>

universal Selector

universal selector denoted by * (Asterisk)

<style>
* {
            background-color: #DE4839;
            color: #ffffff;
        }
</style>

individual selector

individual Selector use tag/element of html

<style>
 p{
           background-color: #686868;
           color: #ffffff;

        }
</style>

class&id : using class and id we target the html element using (.) and for id

<style>
.div-1{
            background-color: #ef9325;
            color: azure;
        }
 /* id */
 #para-1{
            background-color: #efefef;
            color: #e93916;
        }
</style>

and selector

is also know as chained selector
it used sub class element to target

li.bg-blue.text-white{
        background-color: rgb(0, 22, 94);
        color: #f1f1f1;

       }

combined selector : we can used more than one html tag to target the html.

p,span{
        background-color:  rebeccapurple;}
        /* inside element */
        div ul li {
            background-color: #000000;
        }

Direct child selector : child combinator (>) is placed between two CSS selectors

/* direct -child seclector */
        div>li{
            background-color: rgb(60, 248, 60);
            color: blue;

        }

sibiling: sibling selector is used to select an element that is directly after another specific element

 .sibling+p{background-color: lightyellow;
            color:#686868 ;
        }
        /* sibling */
        .sibling+li{
           background-color: lightyellow;
            color:#686868 ;
        }

INTRODUCATION TO WEB AND HTML

MD AZHAR MASOOD — Sun, 13 Nov 2022 05:27:55 +0000

Web is the connection between of billion client and server through wire and wireless network. The web client make requests
to web server. Let know who is client this question might be coming in your mind ?.let known client is how make request on web ,for example u have write on web a query that how to make cake this is request so u are the client and whereas who has answer your request he/she is the replier of the answer is called server.The servers is where all the data is already feeded by someone.
**Web Servers **is consist of both Hardware and software working together.

The Hardware used to store webserver software and website component file like html ,css ,JavaScript and etc.
where as Software side, it control how server control the user to accesses hosted file. webservers use protocol mean rule which predefined by the webservers software and most common one is Https:t he protocol your browser uses to view webpages .

Their are two type of web serves

static: server hosted same file has send as it is to your web browsers
dynamic: it update the hosted file before sending the content to the browser *The Apache HTTP Server Project **is a collaborative software development effort aimed at creating a robust, commercial-grade, free available source code implementation of an HTTP (Web) server. In February of 1995, the most popular server software on the Web was the public domain HTTP daemon developed by Rob McCool at the National Center for Supercomputing Applications, University of Illinois, Urbana-Champaign. **Live server * In vs code live server is give local environments for website development. It behaviour like dynamic serves. It give an idea how go website behavior like to actual server.

INTRODUCATION TO WEB AND HTML

MD AZHAR MASOOD — Sun, 06 Nov 2022 05:10:33 +0000

Web#

is the connection between of billion client and server through wire and wireless network. The web client make requests
to web server. Let know who is client this question might be coming in your mind ?.let known client is how make request on web ,for example u have write on web a query that how to make cake this is request so u are the client and whereas who has answer your request he/she is the replier of the answer is called server. The servers is where all the data is already feeded by someone.

Web Servers #

is consist of both Hardware and software working together.

The Hardware used to store webserver software and website component file like html ,css ,JavaScript and etc.
where as Software side, it control how server control the user to accesses hosted file. webservers use protocol mean rule which predefined by the webservers software and most common one is Https: the protocol your browser uses to view webpages .

Their are two type of web serves#

static: server hosted same file has send as it is to your web browsers
dynamic: it update the hosted file before sending the content to the browser

The Apache HTTP Server Project #

is a collaborative software development effort aimed at creating a robust, commercial-grade,
free available source code implementation of an HTTP (Web) server. In February of 1995, the most popular server software on the Web was the public domain HTTP daemon developed by Rob McCool at the National Center for Supercomputing Applications, University of Illinois, Urbana-Champaign.

Live server #

In vscode live server is give local environments for website development. It behaviour like dynamic serves.
It give an idea how go website behavior like to actual server.
live server extension have given so many option to explorer within it .

HTML#

HTML is hyper text markup language .Basic building block of the Web. defines the meaning and structure of web content.
html first introduces as xhtml and rewrite as html .
every web browers have their own criteria for reddening web pages tags .
The first version of HTML was written by Tim Berners-Lee in 1993.
XML is a standard markup language that is used to create other markup languages. Hundreds of XML languages are in use today, including GML (Geography Markup Language), MathML, MusicML, and RSS (Really Simple Syndication).
1991- Tim Berners-Lee invents HTML 1.0
1993- HTML 1.0 is released. Not many developers are creating websites at this time.
1995- HTML 2.0 is published. This contains the features of HTML 1.0 plus new features. This remained the standard markup language for designing and creating websites until 1997.
1997- HTML 3.0 was invented. Here, Dave Raggett introduced a fresh draft on HTML, which improved new features of HTML and gave more powerful characteristics for webmasters in designing websites. Unfortunately, the powerful features slowed down the browser in applying further improvements.
1999- The widely-used HTML 4.0 comes out. It is very successful.
2014- HTML 5.0 is released and used worldwide. It is said to be the extended version of HTML 4.01 which was published in 2012
HTML have tags to describes web contents called elements
their are some element we are going to discuss
H1 tags -is used for give biggest heading secation is allocated by html.These elements only include the global attributes.
Heading information can be used by user agents to construct a table of contents for a document automatically.

lorem#

Its is feature of emmet which help to generated texts is just lum sum text .
loemun can use any of flow contents.
we can control how many line of text we can use some of the example are given below :
loerum20- it will generated 20 word
loerum *20- it will gentrated 20 line of lumsum loerum.

DEV Community: MD AZHAR MASOOD

CSS jounerny is Just like Roller Coaster

let understand css

let talk about selector

some selector we are going to understand by using example for better understanding.

universal Selector

individual selector

class&id : using class and id we target the html element using (.) and for id

and selector

combined selector : we can used more than one html tag to target the html.

Direct child selector : child combinator (>) is placed between two CSS selectors

sibiling: sibling selector is used to select an element that is directly after another specific element

INTRODUCATION TO WEB AND HTML

Their are two type of web serves

INTRODUCATION TO WEB AND HTML

Web#

*Web Servers *#

Their are two type of web serves#

*The Apache HTTP Server Project *#

*Live server *#

HTML#

lorem#

Web Servers #

The Apache HTTP Server Project #

Live server #