CSS

CSS Introduction

Posted on by Shakti Das

CSS (Cascading Style Sheets) is a stylesheet language that is used to describe the appearance and layout of a document written in HTML or XML. It allows you to apply styles, such as colors, fonts, and layouts, to your web pages in a separate file, called a stylesheet, which makes it easier to maintain and update your site’s design.

CSS works by matching elements in your HTML or XML document with rules in your stylesheet. Each rule consists of a selector, which specifies the elements to which the styles should be applied, and a declaration block, which contains one or more declarations that specify the styles to be applied.

For example, you can use the following CSS rule to make all <h1> elements blue and center-aligned:

Copy codeh1 {
  color: blue;
  text-align: center;
}

You can apply this rule to your HTML document by linking to the stylesheet using the <link> element in the <head> of the document:

Copy code<head>
  <link rel="stylesheet" href="/styles.css">
</head>

You can also apply styles directly to an HTML element using the style attribute:

Copy code<h1 style="color: blue; text-align: center;">This is a heading</h1>

CSS has a wide range of properties and features that allow you to customize the appearance and layout of your web pages. You can learn more about CSS and how to use it in your web development projects by consulting the documentation on the W3C website or by searching online for tutorials and resources.

Styling Lists

Posted on by Shakti Das

Lists in HTML are used to display a series of items, such as a list of menu options or a list of bullet points. You can use CSS to style lists and list elements to change their appearance and layout.

There are two main types of lists in HTML: ordered lists (<ol>) and unordered lists (<ul>). Ordered lists are numbered lists, while unordered lists use bullet points to separate the items.

Here are some common ways to style lists and list elements using CSS:

  • Set the list item marker style using the list-style-type property. For example, you can set the marker to a bullet point using list-style-type: disc.
  • Set the position of the list item marker using the list-style-position property. For example, you can set the marker to be inside the list item using list-style-position: inside.
  • Set the color of the list item marker using the color property.
  • Set the font properties of the list items using the font property.
  • Set the background color of the list items using the background-color property.

Here is an example of some CSS that styles an unordered list:

ul {
  list-style-type: square;
  list-style-position: inside;
  color: green;
}

li {
  font-size: 18px;
  font-weight: bold;
  background-color: lightgray;
}

This CSS will set the list item marker to squares, position the marker inside the list items, set the text color to green, set the font size and weight of the list items to 18px and bold, respectively, and give the list items a lightgray background color.

You can also use CSS classes and IDs to style specific lists or list elements on your page. For example, you could give a list an ID of “favorites” and use the ID selector to style that specific list:

#favorites {
  list-style-type: circle;
  color: blue;
}

This would set the list item marker of the list with an ID of “favorites” to circles and set the text color to blue.

You can learn more about styling lists and other HTML elements using CSS by consulting the documentation on the W3C website or by searching online for tutorials and resources.

CSS Image Sprites

Posted on by master

It is basically an image which is a collection of different images put together to form a single image. The use of image sprites is done for two main reasons:

  • For faster page loading since use only single image.
  • It reduce the bandwidth used to load multiple images. This way less data is consume.

Image sprites are generally used for designing a graphic social media bar or a navigation bar to make it more attractive and efficient at the same time. It is just a method in HTML and CSS to implement more efficient way of putting images and designing web pages.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Output:

CSS Image Opacity

Posted on by master

Opacity describes how opaque an object is. While it is not specific to computer terminology, the term is often used in computer graphics software. For example, many programs include an “Opacity” setting that allows you to adjust the transparency of an image.

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;
            opacity: 0.2;
        }

        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 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: