W3CSS Borders Advanced

In the last article, we started our discussion about the borders. We saw that there are twelve basic W3CSS classes that are related to borders. We studied half of them in the last article. This article has been named W3CSS borders advanced because apart from studying the remaining six border classes, we shall also study concepts like W3CSS rounded borders and thick borders. However, let’s first start our discussion with thick borders.

W3CSS Thick Borders

To add thick borders around an html element, we can use w3-rightbar, w3-leftbar, w3-topbar and w3-bottombar classes. Take a look at the following example to see their usage.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <span class="w3-rightbar w3-border-yellow">
        This is with right border
    </span>
    
     <span class="w3-bottombar w3-border-red">
        This is with bottom border
    </span>
    
    </br>
    
     <span class="w3-topbar w3-border-green">
        This is with top border
    </span>
    
     <span class="w3-leftbar w3-border-blue">
        This is with left border
    </span>
    
 
    

</body>

</html>

Download the code Try the code

In the above web page we have four span elements. A right yellow thick border has been added to first span tag, a bottom red thick border has been added to second yellow. Similarly, a top green thick border is added to third span while last span tag has blue thick border at its left. If you open the web page, you shall see these four span tags separated by their corresponding borders.

W3CSS Rounded and Hoverable Borders

It is very easy to create rounded border around HTML elements. Simply use w3-round-size class along with w3-border class. Similarly, to create hoverable border effect, use w3-hover-border-color class with the element. The following example demonstrates both of these classes in action. Take a look at them.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-container w3-yellow w3-border w3-border-purple w3-hover-border-black">
        <p>This is with pink background<p>
    </div>
    

<div class="w3-container w3-red w3-border w3-round-xlarge">
  <p>This is with red</p>
</div>

</body>

</html>

Download the code Try the code

Take a careful look at the above code. Here we have two containers. The first container has yellow background and purple border. The hover border effect is added to it. When a user hovers on the yellow container, the border color changes to black. Similarly, the second container demonstrates the rounded border effect where the border of the container has been rounded via w3-border-xlarge class. You can use small, or large classes as well to style the rounded border.

W3CSS Borders

We covered W3CSS containers in the last article. But W3CSS is not limited to that, it allows you to different types of borders around html elements. W3CSS borders are implemented via 12 different border classes. These classes are as follows:

  • w3-border: This class adds border on all sides of html elements.
  • w3-border-right: It adds border on the right side of the element
  • w3-border-left: It adds border on the left side of the element
  • w3-border-top: It adds border at the top the element
  • w3-border-bottom: It adds border at the bottom of the element
  • w3-border-0: This class removes border from the element.
  • w3-rightbar: This class adds a thick border to the right of the element.
  • w3-leftbar: This class adds a thick border to the left of the element.
  • w3-bottombar: This class adds a thick border to the bottom of the element.
  • w3-topbar: This class adds a thick border to the top of the element.
  • w3-border-color: Adds specified colored border
  • w3-hover-border-color: Change the color of the border upon mouse hover.

W3CSS Borders Example

In this example we shall add borders to five different containers. We shall use the first five classes to style borders around these containers. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-container w3-border w3-border-yellow">
        <p>This is with overall border<p>
    </div>
    

<div class="w3-container w3-border-right">
  <p>This is with right border</p>
</div>

<div class="w3-container w3-border-left">
  <p>This is with left border</p>
</div>
    
    <div class="w3-container w3-border-top">
  <p>This is with top border</p>
</div>
    
    <div class="w3-container w3-border-bottom">
  <p>This is with bottom border</p>
</div>
</body>

</html>

Download the code Try the code

It can be seen in the above code that we added w3-border and w3-border-yellow classes to the first div. This adds a yellow border on all sides of the first div. Similarly, for second and third div, we added right and left border. Finally for 4th and 5th div we added top and bottom borders. If you open the above page in browser, you shall see these borders around the div. Watch closely to see right and left borders as the div contains whole width of the browser, therefore the browser stretches to extreme right and left side of the page. In the next article we shall continue our discussion on borders.

W3CSS Containers

Like colors classes, W3CSS frameworks contains a class that can be used to style container type elements such as divs, sections, headers, footers, articles, forms etc. The class used for W3CSS containers is w3-container. This class adds 16px padding to the left and right of an HTML element. This class can be used to style multiple container type elements in a similar style by adding uniform padding, margins, fonts, colors and alignments. We have already seen how w3-container class styles a div. Let us see how w3-container class styles rest of the container type elemements.

w3-container

Let’s see how w3-container class can be used to style header and footer elements. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <header class="w3-container w3-lime w3-text-blue">
        <h1>Welcome to Knowledge hills</h1>
    </header>
    
    <footer class="w3-container w3-purple w3-text-white">
        <h5>Knowledgehills @ 2017</h5>
    
    </footer>
    


</body>

</html>

Download the code Try the code

In the above web page, we have a header and a footer. The w3-container class has been added to both of them. Inside the header we have an h1 heading while inside the footer we have an h5 heading. The background colors and text colors of both the header and footer have been set. You can see that both header and footer have same fonts, common margin, padding and alignment.

Styling Articles and Sections

Like header and footer, w3-container class can also add predefined styles to articles and section elements. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-container w3-teal"> 
  <h2>HTML</h2>
  <p>Used to create structure of a website.</p>
</div>

<article class="w3-container w3-yellow"> 
  <h2>CSS</h2>
  <p>Used to style contents of a website</p>
</article>

<section class="w3-container w3-purple"> 
  <h2>JavaScript</h2>
  <p>Used to add animations to a web page.</p>
</section>    


</body>

</html>

Download the code Try the code

Take a look at the above web page. It contains two articles and one section. The background colors of the article elements have been set to teal and yellow, while background for section is set to purple. You can see that article, and section both have same margin, padding, font and alignments. It is interesting to see that depending upon the background color, w3css framework automatically changes the fore-color to improve color contrast. For instance, fore-color for teal and purple is white while for yellow, it is black.

Now we have enough knowledge about W3CSS containers, In the next article, we shall study W3CSS borders.

W3CSS Hover Colors

In the last tutorial, we started our discussion on W3CSS colors. We saw what are different color classes and what they do. We saw w3-color and w3-text-color classes in action. In this article we shall study W3CSS hover colors. There are two classes that change the color upon mouse hover. The first one is the w3-hover-color class.This class sets the background color of an element when mouse hovers over it. The second class is w3-hover-text-color which sets the color of the text upon mouse hover. Let’s have a look at each of them in action.

w3-hover-color

To use this class in your code, simply replace the word color from the class name with actual name of the color. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-container w3-red w3-hover-white">
        <p>This is with red background<p>
    </div>
    

<div class="w3-container w3-purple w3-hover-blue">
  <p>This is with purple background</p>
</div>

<div class="w3-container w3-light-grey w3-hover-yellow">
  <p>This is with light grey background</p>
</div>
</body>

</html>

Download the code Try the code

The above webpage contains three divs with background colors set to red, purple and light grey respectively. However, now the first div contains a class w3-hover-white. Similarly, second and third divs have classes w3-hover-blue and w3-hover-yellow. Now, open the above page in browser. However the mouse on the first red div. You shall see that its background color will change to white. Similarly, hovering mouse on the second and third divs will change their background colors to blue and yellow respectively. This is how w3-hover-color class works.

w3-hover-text-color

Finally, if you want to change the color of text upon mouse hover, you can use w3-hover-text-color class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-container w3-text-red w3-hover-text-blue">
        <p>Text changes to blue upon hover<p>
    </div>
    

<div class="w3-container w3-text-purple w3-hover-text-green">
  <p>Text changes to green upon hover</p>
</div>

<div class="w3-container w3-text-light-grey w3-hover-text-yellow">
  <p>Text changes to yellow upon hover</p>
</div>
</body>

</html>

Download the code Try the code

If you look at the above code. The text color of the first div is set to red. Similarly for second and third divs the text color is set to purple and light-grey respectively. Now we have addeded classes w3-hover-text-blue to first div, w3-hover-text-green to second div and w3-hover-text-yellow to third div. These classes change the color of the text upon mouse hover. Now open the above page in browser and hover mouse on first div. You shall see text color changing to blue. Similarly, hovering the mouse on second and third div shall change the text color of the divs to green and yellow respectively.

In this article, we covered W3CSS hover colors. In the next article, we shall start our discussion about containers. Keep visiting this site!

W3CSS Colors Basics

Color is one of the most important aspect of visual aesthetics of a website. Right color combination can make a site more appealing, attractive and usable for the visitor. W3CSS framework comes with a variety of colors that can be used to perform different tasks. This article contains information about W3CSS colors basics. There are four basic color tasks performed by W3CSS. Four different classes perform these tasks. They are as follows:

  • w3-color: Used to set background color of a any html element.
  • w3-text-color: Sets the color of the text of an element.
  • w3-hover-color: Sets the background color when mouse is hovered over an element.
  • w3-hover-text-color: Changes the color of the text when mouse is hovered over it.

w3-color

You can use w3-color class to set background color of any html element. Take a look at the following example to see how w3-color sets the background color of different elements.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-container w3-red">
        <p>This is with red background<p>
    </div>
    

<div class="w3-container w3-purple">
  <p>This is with purple background</p>
</div>

<div class="w3-container w3-light-grey">
  <p>This is with light grey background</p>
</div>
</body>

</html>

Download the code Try the code

You can see in the above code that it contains three divs. All the three divs have a class of w3-container which adds properties of a container to these classes. The first div has a class of w3-red, while the second div has a class of w3-purple and finally the third div has a class of w3-light-grey. These classes add corresponding background colors to the div. Therefore, if you open the above page in browser, you shall see first div with red background, stacked over a second div with purple background followed by a third div with light-grey background. You can use all the basic color names with w3-color class to set the background color of an html element

w3-text-color

The w3-text-color class is used to set the text color of an element. Simply replace the word color with the actual color which you want your text to use. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-container w3-text-red">
        <p>This is red text<p>
    </div>
    

<div class="w3-container w3-text-purple">
  <p>This is purple text</p>
</div>

<div class="w3-container w3-text-light-grey">
  <p>This is light grey text</p>
</div>
</body>

</html>

Download the code Try the code

In the next article, we shall study more about W3CSS colors basics.

W3CSS Tutorial – Introduction to W3CSS

W3CSS is currently one of the most famous and widely used CSS framework for building responsive websites. W3CSS is based on plain CSS which makes it extremely fast. It doesn’t use JavaScript or JQuery which saves it from additional overhead which slows a website. W3CSS is compatible with all the browsers including chrome, firefox, safari, opera etc. It is also compatible with most of the devices currently in use ranging from small screen mobile phones to large-sized desktops. Enough of W3CSS Introduction. Lets delve a bit into technical side.

How to use W3CSS

W3CSS is open source and is absolutely free to use. To use W3CSS in your programs, simple add following stylesheet document to your programs “href=”http://www.w3schools.com/lib/w3.css””. This is basically CDN for W3CSS. Now let’s take a look at our first simple example to see how W3CSS can actually be used in your website.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-container w3-red">
        <h1>Nature</h1>
    </div>
    
    <img src="http://images.freeimages.com/images/previews/de2/boats-on-the-lake-1380939.jpg" alt="Car" style="width:100%">

<div class="w3-container">
  <p>This is a smallship in the middle of a river</p>
</div>

<div class="w3-container w3-red">
  <p>Foote Info can be added here</p>
</div>
</body>

</html>

Download the code Try the code

The above code is extremely simple yet it reveals many important features of W3CSS. In the header section the link to W3CSS CDN has been added. Next inside the body, we created a div and assigned it classes w3-container and w3-red. Both of these classes are builtin classes of W3CSS. The first class i.e. w3-container gives full width and specific height to the div. It also styles the text inside the div. Similarly, the class w3-red is a color class which changes background color of the div to red. We shall study these classes in detail in upcoming articles.

Next, we some random image the web page followed by a simple div again. Finally we add another div with class w3-container and w3-red at the end to create a footer effect. Inside the div we add a paragraph with some random text.

Now open the above webpage in browser, you shall see a header with red background, a full width image, an image caption, followed by a red footer. This article provided W3CSS introduction. In the next article, we shall study W3CSS colors in detail.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .