Author: phpdocs-admin


CSS
Gradients

CSS provides facility of gradients displays the combination of two or more colors.

There are two main types of gradients:

  • Linear Gradients
  • Radial Gradients

Top to Bottom

Code

Copy Code 


<!doctype html>  
<html>
  <head>
    <title>...</title>
      <style type="text/css">
        #grad1 {
            height: 220px;
            background: linear-gradient(#343a40,#007bff);
            width: 288px;
         }
    </style>
  </head>
  
  <body>
      <div id = "grad1"></div>
  </body>
</html>

Left to Right

Code

Copy Code 


<!doctype html>  
<html>
  <head>
    <title>...</title>
      <style type="text/css">
        #grad1 {
            height: 220px;
            background: linear-gradient(to right, 343a40 , 007bff);
            width: 288px;
         }
    </style>
  </head>
  
  <body>
      <div id = "grad1"></div>
  </body>
</html>

Diagonal

Code

Copy Code 


<!doctype html>  
<html>
  <head>
    <title>...</title>
      <style type="text/css">
        #grad1 {
            height: 220px;
            background: linear-gradient(to bottom, #343a40, #007bff);
            width: 288px;
         }
    </style>
  </head>
  
  <body>
      <div id = "grad1"></div>
  </body>
</html>

Multi Color

Code

Copy Code 


<!doctype html>  
<html>
  <head>
    <title>...</title>
      <style type="text/css">
        #grad1 {
            height: 220px;
            background: linear-gradient(#343a40 , #00a6d6, #ba2981, #ff0000);
            width: 288px;
         }
    </style>
  </head>
  
  <body>
      <div id = "grad1"></div>
  </body>
</html>

Radial Gradients

Code

Copy Code 


<!doctype html>  
<html>
  <head>
    <title>...</title>
      <style type="text/css">
        #grad1 {
            height: 220px;
            background: radial-gradient(#343a40 5%, #007bff 15%, #ba2981 60%);
            width: 288px;
         }
    </style>
  </head>
  
  <body>
      <div id = "grad1"></div>
  </body>
</html>

Repeat Radial Gradients

Code

Copy Code 


<!doctype html>  
<html>
  <head>
    <title>...</title>
      <style type="text/css">
        #grad1 {
            height: 220px;
            background: repeating-radial-gradient(#343a40, #007bff 10%, #ba2981 15%);
            width: 288px;
         }
    </style>
  </head>
  
  <body>
      <div id = "grad1"></div>
  </body>
</html>


CSS
Navigation Bar

Here are some steps to create navigation bar using HTML and CSS.

HTML Steps

Below elements need to be created in HTML.

  • Nav element i.e. <nav>
  • List tag i.e. <ul>
  • list items i.e. <li>
  • a link tag i.e. <a>

Put the values in tag.

Copy Code 


<nav>
    <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="about"><a href="#">About</a></li>
        <li class="about"><a href="#">HTML</a></li>
        <li class="news"><a href="#"><a class="active" href="#">CSS</a></li>
        <li class="contact"><a href="#">Contact</a></li>
    </ul>
</nav>

CSS Styling

Styling <ul>

Copy Code 


<style type="text/css">
    nav ul {
        list-style: none;
        background-color: #343a40;
        text-align: center;
        padding: 0;
        margin: 0;
    }
</style>

Styling <li>

Copy Code 


              
<style type="text/css">
    nav li {
        font-family: 'Oswald', sans-serif;
        font-size: 3.2em;
        line-height: 40px;
        height: 40px;
        border-bottom: 1px solid #888;
    }  
</style>

Styling <a>

Copy Code 


<style type="text/css">
    nav a {
        text-decoration: none;
        color: #fff;
        display: block;
        transition: .3s background-color;
    }
             
    nav a:hover {
        background-color: #007bff;
    }
             
    nav a.active {
        background-color: #fff;
        color: #444;
        cursor: default;
    } 
</style>

Making navigation responsive

Copy Code 


<style type="text/css">
    @media screen and (min-width: 600px) {
        nav li {
            width: 120px;
            border-bottom: none;
            height: 50px;
            line-height: 50px;
            font-size: 1.4em;
        }

        nav li {
            display: inline-block;
            margin-right: -4px;
        }
    }
</style>

Complete Code for Navigation Bar

Copy Code 


<!doctype html>  
<html>
<head>
    <title>Testing</title>

    <style type="text/css">

        nav ul {
            list-style: none;
            background-color: #343a40;
            text-align: center;
            padding: 0;
            margin: 0;
        }
        nav li {
            font-family: 'Oswald', sans-serif;
            font-size: 1.2em;
            line-height: 40px;
            height: 40px;
            border-bottom: 1px solid #888;
        }
         
        nav a {
            text-decoration: none;
            color: #fff;
            display: block;
            transition: .3s background-color;
        }
         
        nav a:hover {
            background-color: #007bff;
        }
         
        nav a.active {
            background-color: #fff;
            color: #444;
            cursor: default;
        }
         
        @media screen and (min-width: 600px) {
            nav li {
                width: 120px;
                border-bottom: none;
                height: 50px;
                line-height: 50px;
                font-size: 1.4em;
            }

            nav li {
                display: inline-block;
                margin-right: -4px;
            }
         
        }


    </style>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="about"><a href="#">About</a></li>
        <li class="about"><a href="#">HTML</a></li>
        <li class="news"><a href="#"><a class="active" href="#">CSS</a></li>
        <li class="contact"><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>
</body>
</html>

CSS
Lists

CSS can be used to customize the style of list elements.

list-style-type

CSS property list-style-type is used to specify the type of list-item marker. Default value is “disc”.

Properties

Some of the types that can be used for list element styling are as follows:

  • list-style-type: circle;
  • list-style-type: square;
  • list-style-type: upper-roman;
  • list-style-type: lower-alpha;
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style> 
            ul.circle {
                list-style-type: circle;
            }
        </style> 
    </head>
  
    <body>
        <p>PHPDocs provides the tutorials of following languages.</p>

        <ul class="circle">
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
        </ul>
    </body>
</html>

list-style-position

CSS property list-style-position is used to specify where to place the list-item marker. Default value is “outside”

Properties

Some of the positions that can be used for list element styling are as follows:

  • list-style-position: circle;
  • list-style-position: square;
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style> 
            ul.inside {
                list-style-position: inside;
            }
        </style> 
    </head>
  
    <body>
        <p>PHPDocs provides the tutorials of following languages.</p>

        <ul class="inside">
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
        </ul>
    </body>
</html>

list-style-image

CSS property list-style-type is used to replace the list-item marker with an image.

Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style> 
            ul {
                list-style-image: url('sqpurple.gif');
            }
        </style> 
    </head>
  
    <body>
        <p>PHPDocs provides the tutorials of following languages.</p>

        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
        </ul>
    </body>
</html>

CSS
Icons

The CSS allows the user to add icons on web page.

Font Awesome is an icon library through which icons can be added to a web page easily.

Add the name of the specified icon class to any inline HTML element (like <i> or <span>).

Bootstrap Icons

Link:
Copy Code 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Syntax:
Copy Code 


<i class="glyphicon glyphicon-cloud" style="font-size:48px;"></i>
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
  
    <body>
      <i class="glyphicon glyphicon-cloud" style="font-size:48px;"></i>
    </body>
</html>

Font Awsome Icons

Link:
Copy Code 


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
Syntax:
Copy Code 


<i class="fas fa-cloud"></i>
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    </head>
  
    <body>
      <i class="fas fa-cloud"></i>
    </body>
</html>

Google Icons

Link:
Copy Code 


                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Syntax:
Copy Code 


lt;i class="material-icons" style="font-size:36px;">cloud</i>
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
  
    <body>
      <i class="glyphicon glyphicon-cloud" style="font-size:48px;"></i>
    </body>
</html>

CSS
Overflow

The overflow property is used to tell the browser what to do with content that doesn’t fit in a box.

Overflow Properties

The most commonly used values for this property are as follows:

ValueDescriptionSyntax
hiddenIt hides overflowing contentoverflow: hidden;
visibleThe content of an element flows out of the boxoverflow: visible;
scrollIt displays scrollbars whether or not any content is actually clipped.overflow: scroll;
autoIf the content proceeds outside its box then that content will be hidden whilst a scroll bar should be visible for users to read the rest of the content.overflow: auto;

Overflow Example

Below examples will demonstrate the basic architecture of border

Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">
          .overflow {
            background-color: #f5f2f0;
            width: 50%;
            height: 90%;
            overflow: scroll;
          }
        </style>
    </head>
  
    <body>
      <div class="overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    </body>
</html>


CSS
Images

CSS allows the user to style the image in different ways.

Text on Image

Code

Copy Code 


<!doctype html>  
<html>
  <head>
    <title>...</title>
      <style type="text/css">
        img {
          position: absolute;
          left: 0px;
          top: 0px;
          z-index: -1;
        }
    </style>
  </head>
  
  <body>
    <img src="myimage.png">
    <p>Tutorials for Web Programming</p>
  </body>
</html>

Rounded Image

Code

Copy Code 


<!doctype html>  
<html>
  <head>
    <title>...</title>
      <style type="text/css">
        img{
          width: 56%;
          border-radius: 55%;
          height: 50%;
        }
    </style>
  </head>
  
  <body>
    <img src="myimage.png">
  </body>
</html>

Polaroid Image

Code

Copy Code 


<!doctype html>  
<html>
  <head>
    <title>...</title>
      <style type="text/css">
        div.polaroid {
          width: 80%;
          margin-bottom: 25px;
          background-color: white;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        div.caption {
          text-align: center;
          padding: 10px 20px;
        }
    </style>
  </head>
  
  <body>
    <div class="polaroid">
      <img src="img_5terre.jpg" alt="5 Terre" style="width:100%">
        <div class="container">
          <p>Cinque Terre</p>
        </div>
      </div>
  </body>
</html>

Image Transparency

Code

Copy Code 


<!doctype html>  
<html>
  <head>
    <title>...</title>
      <style type="text/css">
        img {
          opacity: 0.5;
        }
    </style>
  </head>
  
  <body>
    <img src="myimage.png">
  </body>
</html>


CSS
Padding

The padding properties specify the space between the border and content.

The top, right, bottom and left padding can be changed independently using seperate properties. A shorthand padding property is also created to control multiple sides at once.

Padding Properties

The possible properties can be used for padding are as follows:

ValueDescription
padding-topIt specifies the top padding of an element.
padding-bottomIt specifies the bottom padding of an element.
padding-rightIt specifies the right padding of an element.
padding-leftIt specifies the left padding of an element.
paddingIt acts as a shorthand for the preceding properties.

Padding Example

Below examples will demonstrate the basic architecture of padding

Basic Syntax:
Copy Code 


p{
   padding-top: 5%;
}
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <div style="background-color: green;">
         <p style="background-color: yellow; padding: 5%;">Learn CSS with PHPDocs community</p>
       </div>
    </body>
</html>


CSS
Margin

The margin properties specify the space outside the border of an element.

The top, right, bottom and left margin can be changed independently using seperate properties. A shorthand margin property is also created to control multiple sides at once.

Margin Properties

The possible properties can be used for margin are as follows:

ValueDescription
margin-topIt specifies the top margin of an element.
margin-bottomIt specifies the bottom margin of an element.
margin-rightIt specifies the right margin of an element.
margin-leftIt specifies the left margin of an element.
marginIt acts as a shorthand for the preceding properties.

Margin Example

Below examples will demonstrate the basic architecture of margin

Basic Syntax:
Copy Code 


p{ 
  margin-top: 5%;
}
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="background-color: yellow; margin: 5%;">Learn CSS with PHPDocs community</p>
    </body>
</html>

CSS
Borders

The CSS border property is used to specify the border of an element. It also provides a way to set border styles for one or more sides of an element.

Border Properties

The border-color specifies the color of a border surrounding an element.

The possible values can be used for this property are as follows:

ValueDescription
border-bottom-colorIt specifies the color of bottom border
border-top-colorIt specifies the color of top border
border-left-colorIt specifies the color of left border
border-right-colorIt specifies the color of right border
border-colorIt acts as a shorthand for the preceding properties.

Border Basic Syntax

Below example will demonstrate the basic architecture of Text Alignment

Specify the color of bottom border
Copy Code 


h1 {
  border-bottom-color: red;
}
Specify the color of top border
Copy Code 


h1 {
  border-top-color: red;
}
Specify the color of left border
Copy Code 


h1 {
  border-left-color: red;
}
Specify the color of right border
Copy Code 


h1 {
  border-right-color: red;
}
Specify the color of all sides of box
Copy Code 


h1 {
  border-color: red;
}

Border Example

Below examples will demonstrate the basic architecture of border

Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">
            h1{
                border-top-color: red; 
                border-bottom-color: green; 
                border-right-color: yellow; 
                border-left-color: blue;
            }
        </style>
    </head>
  
    <body>
       <h1>PHPDocs</h1>
    </body>
</html>

CSS
Background Images

CSS can be used to apply background images to different parts of a web page. The property used for this purpose id background-color.

Background Images

Below examples will demonstrate the basic architecture of background image in CSS

Basic Syntax:
Copy Code 


p{ 
    background-image: url("http://www.phpdocs.com/images/css3.png");
}
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">
          body{
            background-image: url("http://www.phpdocs.com/images/css3.png");
          }
        </style>
    </head>
  
    <body>
       ...
    </body>
</html>

The style of displaying the background image can easily controlled in CSS. Different options for controlling background image are as follows.

Background Repetition

The repetition of image in the background can be controlled by using background-repeat property.

The most commonly used values for this property are as follows:

ValuesDescription
no-repeatIt displays image only one time without any repetition
repeat-xIt repeats the image horizontally for one row
repeat-yIt repeats the image horizontally for one column
Basic Syntax:
Copy Code 


h1{ 
  background-image: url("http://www.phpdocs.com/images/css3.png"); 
  background-repeat: no-repeat; 
}

Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">h1{ 
            background-image: url("http://www.phpdocs.com/images/css3.png"); 
            background-repeat: no-repeat; 
        }</style>
    </head>
  
    <body>
       <h1>PHPDocs</h1>
    </body>
</html>

Background Attachment

Normally, the background image moves when the user scrolls up or down the web page, background-repeat property is used to specify the bacground attachment.

The most commonly used values for this property are as follows:

ValuesDescription
fixedIt preserves the image to be scrolled
scrollDefault value. It allows to scroll the background image
localIt allows to scroll the background image with the element’s contents
Basic Syntax:
Copy Code 


h1{
   background-image: url("http://www.phpdocs.com/images/css3.png");
   background-attachment: fixed; 
}
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">
          h1{ 
              background-image: url("http://www.phpdocs.com/images/css3.png"); 
              background-attachment: fixed;
          }
        </style>        
    </head>
  
    <body>
       <h1>PHPDocs</h1>
    </body>
</html>

Background Position

It is possible to specify the position of the background image relative to the element behind which it is applied.

The most commonly used values for this property are as follows:

topcenterbottomleftright
Basic Syntax:
Copy Code 


h1{
   background-image: url("http://www.phpdocs.com/images/css3.png");
   background-position: right bottom; 
}
Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <title>...</title>
        <style type="text/css">
          h1{ 
              background-image: url("http://www.phpdocs.com/images/css3.png"); 
              background-position: right bottom;
          }
        </style>        
    </head>
  
    <body>
       <h1>PHPDocs</h1>
    </body>
</html>