{"id":14914,"date":"2020-04-18T00:08:11","date_gmt":"2020-04-18T07:08:11","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14914"},"modified":"2023-12-01T02:42:27","modified_gmt":"2023-12-01T10:42:27","slug":"css-input","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-input\/","title":{"rendered":"CSS Input"},"content":{"rendered":"\n

Web forms are an essential part of many websites, and allow the operator of a website to accept input from a user. For example, a web form could be used to accept the email addresses of users who want to sign up to a website\u2019s email newsletter.
<\/p>\n\n\n\n

By using CSS, you can add custom styles to form inputs on a web page. This allows you to create aesthetically pleasing form fields which visitors can use to submit information.
<\/p>\n\n\n\n

This tutorial will discuss, with examples, the basics of HTML inputs and how to use CSS to style input fields on a web page. By the end of reading this tutorial, you\u2019ll be an expert at styling input fields using CSS.
<\/p>\n\n\n\n

HTML and CSS Input<\/h2>\n\n\n\n

To define a form on a web page, we must use HTML. The HTML language allows us to define the structure of our form\u2014what form fields will appear, and where\u2014then we can use CSS to apply custom styles to the elements in our form.
<\/p>\n\n\n\n

In HTML, the <input> tag is used to accept user input in a form. The basic syntax for a HTML <input> is:<\/p>\n\n\n\n

<input type=\"typeOfInput\"><\/pre><\/div>\n\n\n\n
Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
If you\u2019re interested in learning more about HTML inputs, read our beginner\u2019s guide to HTML inputs<\/a>. Here is a basic example of a form field that accepts a user\u2019s name: <\/p>\n\n\n\n
<label for=\"userName\">Name<\/label>\n<input type=\"text\" name=\"userName\"><\/pre><\/div>\n\n\n\n
Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
Our input field uses the default HTML styles for the <input> tag, which are rather basic. We also use a <label> tag to add a label to our form. To add custom designs, we can use CSS.
<\/p>\n\n\n\n
CSS Input<\/h2>\n\n\n\n
Let\u2019s walk through a few examples of how to style form elements using CSS.
<\/p>\n\n\n\n
Setting the Width of an Input<\/h3>\n\n\n\n
Suppose we are designing a form field for a local stamp club that collects the names of people submitting the form. This form should take up 50% of the width of a web page. We could create this form using the following code:<\/p>\n\n\n\n
<html>\n<label for=\"userName\">Name<\/label>\n<input type=\"text\" name=\"userName\">\n<style>\ninput {\n\twidth: 50%;\n}<\/pre><\/div>\n\n\n\n
Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
In this example, we have created a form field that is equal to 50% of the width of the web page.
<\/p>\n\n\n\n
In our HTML code, we used the <label> tag to add the label Name<\/code> to our form. Then we used an <input> tag to define our form. Then, in our CSS code, we set the width of all <input> tags to be equal to 50% of their parent container. In this case, because the parent container is the web page, our <input> tag takes up 50% of the width of our site.
<\/p>\n\n\n\n
Input with Border<\/h3>\n\n\n\n
The Seattle Stamp Club has asked us to add a light blue border around each form field because light blue is their club\u2019s color. The border should have a width of 3px. We could use the border property to add a border around each form input field.
<\/p>\n\n\n\n
Here is the code we would use to add borders around our input field:<\/p>\n\n\n\n
<html>\n<label for=\"userName\">Name<\/label>\n<input type=\"text\" name=\"userName\">\n<style>\ninput {\n\tborder: 3px solid lightblue;\n}<\/pre><\/div>\n\n\n\n
Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
In our code, we use the border style to add a border around our input field. This border is 3px thick. As you can see, our form field has a light blue border.
<\/p>\n\n\n\n
If you\u2019re interested in learning more about CSS borders, read our ultimate guide to CSS borders<\/a>.
<\/p>\n\n\n\n
Input with Bottom Border<\/h3>\n\n\n\n
In addition, we can also add a border to a specific edge of our form. So, if we only want a border to appear at the bottom of a field, we could use the border-bottom property. Here is the code we would use:
<\/p>\n\n\n\n
<html>\n<label for=\"userName\">Name<\/label>\n<input type=\"text\" name=\"userName\">\n<style>\ninput {\n\tborder-bottom: 3px solid lightblue;\n}<\/pre><\/div>\n\n\n\n
Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
In our code, we use the border-bottom property to add a border to the bottom of our input field.
<\/p>\n\n\n\n
Input with Padding<\/h3>\n\n\n\n
The Seattle Stamp Club has asked us to make space appear between the contents of the form\u2014the space where the user enters information\u2014and the border of the form.
<\/p>\n\n\n\n
The Club wants a 10px padding to appear between the top and bottom borders and the content of the form. The Club also wants a 15px padding to appear between the left and right borders and the content of the form.<\/p>\n\n\n\n
We could accomplish this task using the following code:<\/p>\n\n\n\n
<html>\n<label for=\"userName\">Name<\/label>\n<input type=\"text\" name=\"userName\">\n<style>\ninput {\n\tpadding: 10px 15px;\n\tbox-sizing: border-box;\n}<\/pre><\/div>\n\n\n\n
Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
In this example, we used the padding style to apply padding between the contents of our form field and the borders of the form field. The first value (10px) sets the padding for the top and bottom edges, and the second value (15px) sets the padding for the left and right edges.
<\/p>\n\n\n\n
We have also set the value of the box-sizing property to border-box<\/code>. This ensures the padding is included in the total width of the elements.
<\/p>\n\n\n\n
If you\u2019re interested in learning more about the CSS padding property, read our guide to CSS padding<\/a>.
<\/p>\n\n\n\n
Styles with Focused Input<\/h3>\n\n\n\n
In most browsers, when you click on a form field, a blue outline will be added to the field. This feature is used to highlight the form you are currently focused on.
<\/p>\n\n\n\n
However, we can customize this by using the :focus CSS selector. The Seattle Stamp Club has asked us to add a light gray border to the bottom of our form when the user clicks on the form. We could do so using this code:<\/p>\n\n\n\n
<html>\n<label for=\"userName\">Name<\/label>\n<input type=\"text\" name=\"userName\">\n<style>\ninput:focus {\n\toutline: none;\n\tborder-bottom: 3px solid lightgray;\n}<\/pre><\/div>\n\n\n\n
Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
The webform appears using the default HTML styles. However, when you click on the form, a 3px-wide solid light gray border is applied to the bottom of our form.
<\/p>\n\n\n\n
This is because we have used a :focus selector, which allows us to apply a style when the user clicks on the input field. We also used the outline: none rule, which stops the default blue outline from appearing when the user clicks on the form input field.
<\/p>\n\n\n\n
To learn more about the focus selector, read our guide to the CSS :focus selector<\/a>.
<\/p>\n\n\n\n
Input with Rounded Corners<\/h3>\n\n\n\n
The Seattle Stamp Club has asked us to add a light gray border around every edge of the input field, and round the corners of the inputs. We could do so using the border-radius property, which allows you to create a rounded corners<\/code> effect in CSS.
<\/p>\n\n\n\n
Here is the code we would use to create a form field with rounded corners:<\/p>\n\n\n\n
<html>\n<label for=\"userName\">Name<\/label>\n<input type=\"text\" name=\"userName\">\n<style>\ninput {\n\tborder: 3px solid lightgray;\n\tborder-radius: 10px;\n}<\/pre><\/div>\n\n\n\n
Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
In this example, we define a 3px-wide solid light gray border that appears around our input field. Then, we use the border-radius property to round the corners of our form field.
<\/p>\n\n\n\n
If you\u2019re interested in learning more about how to apply rounded corners to an HTML element on a web page, read our guide to CSS rounded corners<\/a>.
<\/p>\n\n\n\n
Input with Background Color<\/h3>\n\n\n\n
The Seattle Stamp Club has asked us to make one final form field. This form field should have a 3px-wide solid light gray border and have a light blue background.
<\/p>\n\n\n\n
We could use the following code to create this form field:
<\/p>\n\n\n\n
<html>\n<label for=\"userName\">Name<\/label>\n<input type=\"text\" name=\"userName\">\n<style>\ninput {\n\tborder: 3px solid lightgray;\n\tbackground-color: lightblue;\n}<\/pre><\/div>\n\n\n\n
Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
In our code, we used the border property to define a 3px-wide solid light gray border around our input fields. Then, we used the background-color property to set the background color of our form field to light blue.
<\/p>\n\n\n\n
Apply Styles to Specific Input Fields<\/h2>\n\n\n\n
In this tutorial, we have discussed how to apply styles to <input> fields. However, there is a way that you can apply styles to only a specific input type.
<\/p>\n\n\n\n
That\u2019s where attribute selectors come in. Instead of using input<\/code> in your styles, if you want to apply styles to only a specific input, you could try to use one of these selectors:
<\/p>\n\n\n\n
    \n
  • input[type=text]: Applies a style to all text fields.<\/li>\n\n\n\n
  • input[type=email]: Applies a style to all email fields.<\/li>\n\n\n\n
  • input[type=password]: Applies a style to all password fields.<\/li>\n\n\n\n
  • input[id=userName]: Applies a style to the element with the ID userName<\/code>.<\/li>\n<\/ul>\n\n\n\n
    To learn more about how attribute selectors work, read our Career Karma guide to CSS attribute selectors.
    <\/p>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    By using CSS, you can create custom-designed web forms that are both aesthetically pleasing and functional. First, you use HTML to design the structure of a form, then you can use CSS styles to apply styles to the form.
    <\/p>\n\n\n\n
    This tutorial discussed, with reference to examples, the basics of HTML inputs and how you can use CSS to style input fields. Now you\u2019re equipped with the knowledge you need to style your input fields like an expert using CSS!
    <\/p>\n","protected":false},"excerpt":{"rendered":"Web forms are an essential part of many websites, and allow the operator of a website to accept input from a user. For example, a web form could be used to accept the email addresses of users who want to sign up to a website\u2019s email newsletter. By using CSS, you can add custom styles…","protected":false},"author":240,"featured_media":14915,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14914","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":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"\nHow to use inputs and CSS to style them on a web page<\/title>\n<meta name=\"description\" content=\"CSS can be used to style input fields to create aesthetically pleasing forms. On Career Karma, learn how to style form inputs using CSS.\" \/>\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-input\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Input\" \/>\n<meta property=\"og:description\" content=\"CSS can be used to style input fields to create aesthetically pleasing forms. On Career Karma, learn how to style form inputs using CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-input\/\" \/>\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-04-18T07:08:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:42:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/work-1627703_640.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"618\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\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=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-input\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-input\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Input\",\"datePublished\":\"2020-04-18T07:08:11+00:00\",\"dateModified\":\"2023-12-01T10:42:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-input\/\"},\"wordCount\":1542,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-input\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/work-1627703_640.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-input\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-input\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-input\/\",\"name\":\"How to use inputs and CSS to style them on a web page\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-input\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-input\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/work-1627703_640.jpg\",\"datePublished\":\"2020-04-18T07:08:11+00:00\",\"dateModified\":\"2023-12-01T10:42:27+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"CSS can be used to style input fields to create aesthetically pleasing forms. On Career Karma, learn how to style form inputs using CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-input\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-input\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-input\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/work-1627703_640.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/work-1627703_640.jpg\",\"width\":1020,\"height\":618},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-input\/#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\":\"CSS Input\"}]},{\"@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\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to use inputs and CSS to style them on a web page","description":"CSS can be used to style input fields to create aesthetically pleasing forms. On Career Karma, learn how to style form inputs using CSS.","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-input\/","og_locale":"en_US","og_type":"article","og_title":"CSS Input","og_description":"CSS can be used to style input fields to create aesthetically pleasing forms. On Career Karma, learn how to style form inputs using CSS.","og_url":"https:\/\/careerkarma.com\/blog\/css-input\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-18T07:08:11+00:00","article_modified_time":"2023-12-01T10:42:27+00:00","og_image":[{"width":1020,"height":618,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/work-1627703_640.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-input\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-input\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Input","datePublished":"2020-04-18T07:08:11+00:00","dateModified":"2023-12-01T10:42:27+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-input\/"},"wordCount":1542,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-input\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/work-1627703_640.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-input\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-input\/","url":"https:\/\/careerkarma.com\/blog\/css-input\/","name":"How to use inputs and CSS to style them on a web page","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-input\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-input\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/work-1627703_640.jpg","datePublished":"2020-04-18T07:08:11+00:00","dateModified":"2023-12-01T10:42:27+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"CSS can be used to style input fields to create aesthetically pleasing forms. On Career Karma, learn how to style form inputs using CSS.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-input\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-input\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-input\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/work-1627703_640.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/work-1627703_640.jpg","width":1020,"height":618},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-input\/#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":"CSS Input"}]},{"@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\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14914","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\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14914"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14914\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14915"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}