Creating Tabs With CSS

Creating tabs is usually more popular using jquery, but actually it’s enough with css that we can create tabs that are no less good.


In this article, we will briefly explain how to create tabs using only css, without the help of jquery or other javascript.

HTML Structure
First, let’s create the HTML structure

Web Tutorials

CSS Tabs




Social Media

Welcome TWDers


About TWD


Contact TWD


Social Media

It can be seen in the script above, to create the title of the tab we use input tags and labels, in this example we create 4 tabs, where each tab is given the ID tab1, tab2, tab3, tab4

Meanwhile, the content of each tab is created with section tags, each of which has an ID content1, content2, content3, content4.

Styling with CSS
After we create the html structure of the tab, of course it will not be in the form of a tab, it needs to be designed or styled using css, this is the css code

body {
backgrounds: #5B264E;
font-family: “Open Sans”, “Arial”;
text-decoration: none;
colors: #000;
color: #B7977B;
play {
background: #FFF;
width: 500px;
margins: 50px auto;
padding: 10px 30px 80px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
p {
font-size: 13px;

/* Important codes */
input, section {
clear: both;
padding-top: 10px;
display: none;
label {
font-weight: bold;
font-size: 14px;
display: block;
float: left;
padding: 10px 30px;
border-top: 2px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #DDD;
label:hover {
cursors: pointers;
text-decoration: underline;

tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {

display: block;
input:checked + label {
border-top-color: #B7977B;
border-right-color: #DDD;
border-left-color: #DDD;
border-bottom-color: transparent;
text-decoration: none;
CSS Code for Tab
The most important thing to note in the code above is the code that we marked with /* Important Code */ until the end.

Where is the code that changes the input tag to a tab, why use radio type input? because tabs usually only have one active section while the others will be closed, for that only radio type inputs are allowed to be selected like that.

So the logic is as simple as this: the section tag when loading will be hidden, when one of the tab IDs is active (one of the radio inputs is selected), the contents of that ID will be displayed, using the display:block command.

Demos and codes

You can see the demo and also download the source code at the link below

Thus our tutorial this time, greetings web design & development Indonesia.

If you are interested in being a guest writer on this website, please register immediately and write your interesting articles that are fresh and have never been posted anywhere before.