Author: master

CSS Image Gallery

Posted on by master

Image Gallery is used to store and display collection of pictures. This example create a responsive Image Gallery using HTML and CSS.

Example:

<!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>Image Gallery</title>
    <style>
        div.gallery {
            margin: 5px;
            border: 2px solid #ccc;
            float: left;
            width: 180px;
        }

        div.gallery:hover {
            border: 1px solid #777;
        }

        div.gallery img {
            width: 100%;
            height: auto;
        }

        div.desc {
            padding: 15px;
            text-align: center;
        }
    </style>
</head>
</head>

<body>
    <div class="gallery">
        <a target="_blank" href="sky.jpeg">
            <img src="sky.jpeg" alt="sky" width="600" height="400">
        </a>
        <div class="desc">This is a image of sky</div>
    </div>

    <div class="gallery">
        <a target="_blank" href="mountain.jpg">
            <img src="mountain.jpg" alt="mountain" width="600" height="400">
        </a>
        <div class="desc">This is a image of Mountain</div>
    </div>

    <div class="gallery">
        <a target="_blank" href="river.jpg">
            <img src="river.jpg" alt="river" width="600" height="400">
        </a>
        <div class="desc">This is a image of river</div>
    </div>

    <div class="gallery">
        <a target="_blank" href="forest.jpeg">
            <img src="forest.jpeg" alt="forest" width="600" height="400">
        </a>
        <div class="desc">This is image of forest</div>
    </div>

</body>

</html>

Output:

CSS Navigation Bar

Posted on by master

A navigation bar is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, pages within the website. This means that no matter what page you are viewing, you can use the navigation bar to visit other sections of the website.

A website navigation bar is most commonly displayed as horizontal list of links at the top of each page. It may be below the header or logo, but it is always placed before the main content of the page. In some cases, it may make sense to place the navigation bar vertically on the left side of each page. This type of navigation bar is also called a sidebar, since it appears to the side of the primary content. Some websites have both a horizontal navigation bar at the top and a vertical navigation bar on the left side of each page.

The navigation bar is an important element of a website’s design since it allows users to quickly visit any section within the site. If we’ve ever visited a website without a navigation bar, we may have found it is difficult to locate the page you need. We may have also had to click “Back” several times in order to find a link to the next section we wanted to visit. Thankfully, web design has become more standardized in recent years and nearly every website now includes a navigation bar.

Horizontal Navigation Bar:

The horizontal navigation bar is the horizontal list of links, which is generally on the top of the page.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  background-color: lightgray;
}

li {
  float: left;
}

li a {
  display: block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
</ul>

</body>
</html>

Output:

Vertical Navigation Bar:

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li a {
            display: block;
            width: 60px;
            background-color: #dddddd;
        }
    </style>
</head>

<body>

    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact us">Contact us</a></li>
        <li><a href="#about">About</a></li>
    </ul>

    <p>A background color is added to the links to show the link area.</p>
    <p>Notice that the whole link area is clickable, not just the text.</p>

</body>

</html>

Output:

CSS Align

Posted on by master

The CSS align-content property sets the distribution of space between and around content items along a flexbox’s cross-axis or a grid’s block axis.

Syntax:

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Example:

<!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 align</title>
    <style>
        #main {
            width: 70px;
            height: 300px;
            border: 1px solid #cf9c9c;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
        }

        #main div {
            width: 70px;
            height: 70px;
        }
    </style>
</head>
</head>

<body>
    <h1>The align-content Property</h1>

    <div id="main">
        <div style="background-color:rgb(156, 80, 255);"></div>
        <div style="background-color:rgb(208, 230, 173);"></div>
        <div style="background-color:rgb(241, 18, 55);"></div>
    </div>
</body>

</html>

Output:

CSS floating

Posted on by master

The float property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

Example:

<!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 floating</title>
    <style>
        img {
            float: right;
        }
    </style>
</head>

<body>

    <body>
        <h1>The float Property</h1>

        <p>In this example, the image will float to the right in the text, and the text in the paragraph will wrap
            around the image.</p>

        <p><img src="download.jpg" alt="download" style="width:170px;height:170px;margin-left:15px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
            lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
            eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare
            eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis
            dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare
            turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed
            dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
    </body>

</html>

Output:

CSS Positioning

Posted on by master

The CSS position property defines the position of an element where generally the top, right, bottom, and left properties will determine the position of the element.

Syntax:

position: value;

Property of CSS Positioning:

ValueDescription
staticNormal position for the element (where top, right, bottom, and left have no effect)
div { position: static; }
relativePosition the element relative to where its normal position would have been
div { position: relative; top: 10px; left: 15px; }
absolutePosition the element absolutely relative to its container
div { position: absolute; top: 10px; left: 15px; }
fixedPosition the element relative to the screen’s viewport and stay fixed on screen when scrolling
div { position: fixed; top: 10px; left: 15px; }
inheritIndicates that the element will inherit the position from its parent element
div { position: inherit; }

Example:

<!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 Poisitioning</title>
    <style>
        h2 {
            position: absolute;
            left: 100px;
            top: 150px;
        }
    </style>

</head>

<body>
    <h1>The position Property</h1>

    <h2>This is a heading with an absolute position</h2>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio, libero?</p>
</body>

</html>

Output:

CSS Display

Posted on by master

Every HTML element is represented by a box that contains content and determines the amount of spacing around the content. The CSS display property specifies how this box appears on the web page relative to other elements, as well as the behavior of its child elements (i.e. the elements inside it).

In CSS there are two “levels” this box can adopt: block and inline. Block-level elements exist on their own line and span the entire width of the page unless another width is specified. <div> and <p> are examples of block-level elements.

Inline-level elements do not break the flow of content — multiple inline elements can exist on the same line. <span>, <b>, and <a> are inline-level elements.

The display property targets these levels and lets us change them for our styling needs. A display rule is written like so:

display: value;

…where value specifies the way the element appears — in other words, its level.

Property values:

ValueDescription
inlineIt is used to displays an element as an inline element.
blockIt is used to displays an element as a block element
contentsIt is used to disappear the container.
flexIt is used to display an element as a block-level flex container.
gridIt is used to display an element as a block-level grid container.
inline-blockIt is used to display an element as an inline-level block container.
inline-flexIt is used to display an element as an inline-level flex container.
inline-gridIt is used to display an element as an inline-level grid container.
inline-tableIt is used to display an inline-level table
list-itemIt is used to display all the elements in <li> element.
run-inIt is used to display an element inline or block level, depending on the context.
tableIt is used to set the behavior as <table> for all elements.
table-captionIt is used to set the behavior as <caption> for all elements.
table-column-groupIt is used to set the behavior as <column> for all elements.
table-header-groupIt is used to set the behavior as <header> for all elements.
table-footer-groupIt is used to set the behavior as <footer> for all elements.
table-row-groupIt is used to set the behavior as <row> for all elements.
table-cellIt is used to set the behavior as <td> for all elements.
table-columnIt is used to set the behavior as <col> for all elements.
table-rowIt is used to set the behavior as <tr> for all elements.
noneIt is used to remove the element.
initialIt is used to set the default value.
inheritIt is used to inherit the property from it’s parents’ elements.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
</style>
</head>
<body>
<h1>The display Property</h1>

<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

</body>
</html>

Output:

CSS Dimension

Posted on by master

All HTML elements in a box model are represented as rectangular boxes. The dimensions of the box model are calculated by using the height and width of the content area that gets applied to the element.

Each box is associated with a content area and many optional areas, such as padding, border, and margin.

We have the following properties that allow you to control the dimensions of a box.

  • The height property is used to set the height of a box.
  • The width property is used to set the width of a box.
  • The line-height property is used to set the height of a line of text.
  • The max-height property is used to set a maximum height that a box can be.
  • The min-height property is used to set the minimum height that a box can be.
  • The max-width property is used to set the maximum width that a box can be.
  • The min-width property is used to set the minimum width that a box can be.

Example of CSS Height and Width:

<!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 Dimension</title>
    <style>
        div {
            height: 200px;
            width: 50%;
            background-color: powderblue;
        }
    </style>
</head>

<body>
    <h2>Set the height and width of an element</h2>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, animi.</div>
</body>

</html>

Output:

Example of CSS Max-Width:

<!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 Dimension</title>
    <style>
        div {
            height: 200px;
            width: 500px;
            background-color: powderblue;
        }
    </style>
</head>

<body>
    <h2>Set the max width of an element</h2>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, animi.</div>
</body>

</html>

Output:

CSS Padding

Posted on by master

Padding is used to create space around an element’s content, inside of any defined borders.

CSS has properties for specifying the padding for each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

All the padding properties can have the following values:

  • length – specifies a padding in px, pt, cm, etc.
  • % – specifies a padding in % of the width of the containing element
  • inherit – specifies that the padding should be inherited from the parent element

Example:

<!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 Padding</title>
    <style>
        p {
            background-color: rgb(153, 206, 28);
        }

        p.padding {
            padding-top: 50px;
            padding-right: 100px;
            padding-bottom: 150px;
            padding-left: 200px;
        }
    </style>
</head>

<body>
    <p>This is a paragraph with no specified padding.</p>
    <p class="padding">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, accusamus?</p>
</body>

</html>

Output: