<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CSS Tabs<\/title>\n <style> \/* No CSS to display yet *\/ <\/style>\n<\/head>\n<body>\n <div class="tabs"><\/div>\n<body>\n<\/html>\n \n<\/pre><\/div>\n\n\n\n<\/p>\n\n\n\n
Inside the \u201ctabs\u201d <div><\/code>, we will insert another four more <div>s and call each with a class of tab<\/code>. This represents each of the four tabs that we will be writing up today. It will contain our input, tab labels and tab content. Let\u2019s make empty containers for all of those:
<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CSS Tabs<\/title>\n <style> \/* No CSS to display yet *\/ <\/style>\n<\/head>\n<body>\n <div class="tabs">\n\t<div class="tab">\n\t \/* THIS IS OUR PLAN IN ACTION*\/\n\t\t\/*input *\/ \n\t\t<input type="radio" id="tab-1" name="tab-group-1" checked\/>\n \t \/*label for input *\/\n\t\t<label for="tab-1">Label 1<\/label>\n \/* content *\/\n <div class="content">Our content will go here<\/div>\n \n<\/div>\n\t<div class="tab">\n\t\t<input type="radio" id="tab-2" name="tab-group-1" checked\/>\n\t\t<label for="tab-2">Label 2<\/label>\n <div class="content gryffindor">Our content will go here<\/div>\n <\/div>\n\t<div class="tab">Try these two on your own! Follow the same convention as above for your class names and ids - I am using a HP theme, but name them whatever you'd like!<\/div>\n\t<div class="tab"><\/div>\n <\/div>\n<body>\n<\/html>\n<\/pre><\/div>\n\n\n\nInside the content class name will be our content. You can use whatever content you\u2019d like, but it\u2019s standard practice to use associated content on one tab.<\/p>\n\n\n\n
Time to Start CSS:<\/h2>\n\n\n\n
When it comes to writing the CSS, start on the biggest container and work your way to the smallest container. Here is the minimum we need to do to get it to work:
<\/p>\n\n\n\n
- Set a wild card selector to a box-sizing: border-box.<\/li>
- On the main container, we need to have the display property set to flex and have the position set to relative. Display: flex allows the tabs to lay next to each other in a row and the relative position basically acts as a boundary or fence that contains the content of the tab. <\/li><\/ol>\n\n\n\n
At this point you will see what looks to be four blocks of text with a radio button and some content. Next we have to figure out a way to show the checked block and hide the other blocks. <\/p>\n\n\n\n
<\/p>\n\n\n\n
- On the .tab container, we\u2019ll set up the styling for the label:
- 1px solid border in any color you wish.<\/li>
- Padding: 5px, 10px \u2013 will add some space around the label text<\/li>
- Border-radius 10px, 10px, 0px, 0px \u2013 this will make the label look more like a traditional tab. <\/li><\/ol><\/li><\/ol>\n\n\n\n
If you check your work now, you will see that the labels have the circular radio buttons to the left of them. So it looks more like a traditional tab, but to still keep the checked attribute of the button, we need to hide the circular portion of the radio button.
<\/p>\n\n\n\n
- To actually select the button, we use .tab [type=’radio’]. To hide it, we set display to none. <\/li><\/ol>\n\n\n\n
Next, we need to tackle the actual content so that it only shows one tab at a time.
<\/p>\n\n\n\n
- Select the content div and then set the position to absolute. When the absolute position is set, the div can be set anywhere inside the relative parent. Using top, right, left and bottom, you can set the content where you want to inside the parent div. In this case, set the left and right properties to 0. We also want to create a border and set a background color to a non-transparent color. <\/li><\/ol>\n\n\n\n
- Setting the z-index of the selected tab will put that tab\u2019s panel on top. To do so, select the checked button and its content. To do this we use [type=’radio’]:checked ~ label ~ .content. The \u201c~ \u201c in between the elements in CSS tells us that we want the content class that occurs after a label element that occurs after a checked radio button. <\/li><\/ol>\n\n\n\n
- To show which tab is active, set [type=’radio’]:checked ~ label to a different background color. <\/li><\/ol>\n\n\n\n
Now when the user clicks on each of the tabs, they should be able to successfully go from one to the other without seeing the content of the other panels. This is the minimum you need to get the tabbed navigation to work. Try playing around with the CSS to change up the styling! A working implementation is coded out below:
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>CSS Tabs<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Roboto';\n }\n \n .tabs {\n max-width: 700px;\n min-height: 100px;\n margin: 25px 0;\n width: 100%;\n display: flex;\n \/* allows for tabs to be next to each other *\/\n position: relative;\n \/* relative here contains the width of the content *\/\n }\n \n .tab label {\n padding: 5px 10px;\n border: 1px solid #ccc;\n cursor: pointer;\n border-radius: 10px 10px 0 0;\n }\n \n .tab [type='radio'] {\n display: none;\n \/* this makes the radio buttons disappear - we are only keeping track if they are checked or not *\/\n }\n \n h3 {\n margin: 10px 40px;\n }\n \n ul {\n list-style-type: none;\n }\n .content {\n padding: 10px;\n border-radius: 0px 10px 10px 10px;\n position: absolute;\n left: 0;\n right: 0;\n background: white;\n border: 1px solid #ccc;\n \/* the left and right at 0 help the tabs to overlap each other *\/\n }\n \n \/* This allows the selected tab to be on top *\/\n [type='radio']:checked ~ label ~ .content {\n z-index: 1;\n }\n \n [type="radio"]:checked ~ label {\n background: lightgrey;\n }\n \/* color scheme for tabs *\/\n [type='radio']:checked ~ #gryffindor {\n background: #ec9086;\n color: #241806;\n }\n [type='radio']:checked ~ #ravenclaw {\n background: #3054ca;\n color: #241806;\n }\n \n [type='radio']:checked ~ #slytherin {\n background: #089714;\n color: #252525;\n }\n [type='radio']:checked ~ #hufflepuff {\n background: #f0d695;\n color: #372e29;\n }\n \n [type='radio'] ~ #slytherin {\n background: #033807;\n color: #aaaaaa;\n }\n [type='radio'] ~ #hufflepuff {\n background: #f0c75e;\n color: #372e29;\n }\n [type='radio'] ~ #gryffindor {\n background: #9c1203;\n color: #e3a000;\n }\n [type='radio'] ~ #ravenclaw {\n background: #0e1a40;\n color: #946b2d;\n }\n .gryffindor {\n background: #9c1203;\n color: #e3a000;\n }\n .slytherin {\n background: #033807;\n color: #aaaaaa;\n }\n .hufflepuff {\n background: #f0c75e;\n color: #372e29;\n }\n .ravenclaw {\n background: #0e1a40;\n color: #946b2d;\n }\n \n <\/style>\n<\/head>\n<body>\n <div class="tabs">\n <div class="tab">\n <input type="radio" id="tab-1" name="tab-group-1" checked\/>\n <label id="gryffindor" for="tab-1">Gryffindor<\/label>\n <div class="content gryffindor">\n <h3>HP Chars in Gryffindor<\/h3>\n <ul class="gryffindor-students">\n <li>Harry Potter<\/li>\n <li>Hermione Grainger<\/li>\n <li>Ron Weasley<\/li>\n <li>Albus Dumbledore<\/li>\n <li>Katie Bell<\/li>\n <li>Neville Longbottom<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class="tab">\n <input type="radio" id="tab-2" name="tab-group-1"\/>\n <label id="slytherin" for="tab-2">Slytherin<\/label>\n <div class="content slytherin">\n <h3>HP Chars in Slytherin<\/h3>\n <ul class="slytherin-students">\n <li>Draco Malfoy<\/li>\n <li>Narcissa Black<\/li>\n <li>Lucius Malfoy<\/li>\n <li>Severus Snape<\/li>\n <li>Tom Riddle<\/li>\n <li>Dolores Umbridge<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class="tab">\n <input type="radio" id="tab-3" name="tab-group-1"\/>\n <label for="tab-3" id="ravenclaw">Ravenclaw<\/label>\n <div class="content ravenclaw">\n <h3>HP Chars in Ravenclaw<\/h3>\n <ul class="ravenclaw-students">\n <li>Lisa Turpin<\/li>\n <li>Luna Lovegood<\/li>\n <li>Gilderoy Lockhart<\/li>\n <li>Garrick Ollivander<\/li>\n <li>Padma Patil<\/li>\n <li>Sybil Trelawney<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class="tab">\n <input type="radio" id="tab-4" name="tab-group-1">\n <label for="tab-4" id="hufflepuff">Hufflepuff<\/label>\n \n <div class="content hufflepuff">\n <h3>HP Chars in Hufflepuff<\/h3>\n <ul class="hufflepuff-students">\n <li>Cedric Diggory<\/li>\n <li>Newton Scamander<\/li>\n <li>Nymphadora Tonks<\/li>\n <li>Pomona Sprout<\/li>\n <li>Susan Bones<\/li>\n <li>Teddy Lupin<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"CSS Tabs are really great at displaying associated information in one easy-to-navigate place. They essentially look like tabbed dividers that you would see in a recipe box or a binder. Here are some examples of websites using tabbed navigation: Southwest Airlines uses tabbed navigation to let the user navigate between checking in for a flight,…","protected":false},"author":77,"featured_media":10909,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18939","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nCreating Tabs in CSS Without Using JavaScript | Career Karma<\/title>\n<meta name=\"description\" content=\"Designers and developers utilize tabs in their applications to help guide the user experience of an application. Learn how to create tabs using pure CSS with this tutorial!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-tabs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Tabs in CSS Without Using JavaScript\" \/>\n<meta property=\"og:description\" content=\"Designers and developers utilize tabs in their applications to help guide the user experience of an application. Learn how to create tabs using pure CSS with this tutorial!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-tabs\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-02T23:04:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:48:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/kobu-agency-ipARHaxETRk-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Creating Tabs in CSS Without Using JavaScript\",\"datePublished\":\"2020-07-02T23:04:19+00:00\",\"dateModified\":\"2020-12-29T19:48:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/\"},\"wordCount\":842,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/kobu-agency-ipARHaxETRk-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/\",\"name\":\"Creating Tabs in CSS Without Using JavaScript | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/kobu-agency-ipARHaxETRk-unsplash.jpg\",\"datePublished\":\"2020-07-02T23:04:19+00:00\",\"dateModified\":\"2020-12-29T19:48:15+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Designers and developers utilize tabs in their applications to help guide the user experience of an application. Learn how to create tabs using pure CSS with this tutorial!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/kobu-agency-ipARHaxETRk-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/kobu-agency-ipARHaxETRk-unsplash.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-tabs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creating Tabs in CSS Without Using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Tabs in CSS Without Using JavaScript | Career Karma","description":"Designers and developers utilize tabs in their applications to help guide the user experience of an application. Learn how to create tabs using pure CSS with this tutorial!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-tabs\/","og_locale":"en_US","og_type":"article","og_title":"Creating Tabs in CSS Without Using JavaScript","og_description":"Designers and developers utilize tabs in their applications to help guide the user experience of an application. Learn how to create tabs using pure CSS with this tutorial!","og_url":"https:\/\/careerkarma.com\/blog\/css-tabs\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-02T23:04:19+00:00","article_modified_time":"2020-12-29T19:48:15+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/kobu-agency-ipARHaxETRk-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-tabs\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-tabs\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Creating Tabs in CSS Without Using JavaScript","datePublished":"2020-07-02T23:04:19+00:00","dateModified":"2020-12-29T19:48:15+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-tabs\/"},"wordCount":842,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-tabs\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/kobu-agency-ipARHaxETRk-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-tabs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-tabs\/","url":"https:\/\/careerkarma.com\/blog\/css-tabs\/","name":"Creating Tabs in CSS Without Using JavaScript | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-tabs\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-tabs\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/kobu-agency-ipARHaxETRk-unsplash.jpg","datePublished":"2020-07-02T23:04:19+00:00","dateModified":"2020-12-29T19:48:15+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Designers and developers utilize tabs in their applications to help guide the user experience of an application. Learn how to create tabs using pure CSS with this tutorial!","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-tabs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-tabs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-tabs\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/kobu-agency-ipARHaxETRk-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/kobu-agency-ipARHaxETRk-unsplash.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-tabs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"Creating Tabs in CSS Without Using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18939"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18939\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/10909"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}