{"id":18910,"date":"2020-07-02T14:39:23","date_gmt":"2020-07-02T21:39:23","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18910"},"modified":"2020-07-02T16:22:42","modified_gmt":"2020-07-02T23:22:42","slug":"css-important","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-important\/","title":{"rendered":"CSS !important Rule: When to Use it"},"content":{"rendered":"\n<p>The !important<strong> <\/strong>rule is used to override the styling of a webpage. In all honesty, there are more instances of why you<strong> shouldn\u2019t <\/strong>use the !important rule vs why you should. Let\u2019s discuss how it\u2019s used and then why it should only be used sparingly.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Overriding user-agent stylesheets<\/h3>\n\n\n\n<p>When writing CSS, there will be some cases where you need to overwrite the stylesheet that is given. If using CSS frameworks like <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/getting-started\/introduction\/\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">Bootstrap<\/a> to get a project up and running, you may want to customize the styling that\u2019s built into the framework.<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n   &lt;head&gt;\n       &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n       &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n       &lt;title&gt;CSS Important Keyword: Overriding Bootstrap&lt;\/title&gt;\n       &lt;link\n           rel=&quot;stylesheet&quot;\n           href=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css&quot;\n           integrity=&quot;sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk&quot;\n           crossorigin=&quot;anonymous&quot;\n       \/&gt;\n       &lt;style&gt;\n           .container {\n               display: flex;\n           }\n           .nav {\n               color: black;\n               background-color: pink;\n           }\n       &lt;\/style&gt;\n   &lt;\/head&gt;\n   &lt;body&gt;\n       &lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;\n           &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;\/a&gt;\n           &lt;button\n               class=&quot;navbar-toggler&quot;\n               type=&quot;button&quot;\n               data-toggle=&quot;collapse&quot;\n               data-target=&quot;#navbarSupportedContent&quot;\n               aria-controls=&quot;navbarSupportedContent&quot;\n               aria-expanded=&quot;false&quot;\n               aria-label=&quot;Toggle navigation&quot;\n           &gt;\n               &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;\/span&gt;\n           &lt;\/button&gt;\n \n           &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;\n               &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;\n                   &lt;li class=&quot;nav-item active&quot;&gt;\n                       &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;\n                           &gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;\/span&gt;&lt;\/a\n                       &gt;\n                   &lt;\/li&gt;\n                   &lt;li class=&quot;nav-item&quot;&gt;\n                       &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;\/a&gt;\n                   &lt;\/li&gt;\n                   &lt;li class=&quot;nav-item dropdown&quot;&gt;\n                       &lt;a\n                           class=&quot;nav-link dropdown-toggle&quot;\n                           href=&quot;#&quot;\n                           id=&quot;navbarDropdown&quot;\n                           role=&quot;button&quot;\n                           data-toggle=&quot;dropdown&quot;\n                           aria-haspopup=&quot;true&quot;\n                           aria-expanded=&quot;false&quot;\n                       &gt;\n                           Dropdown\n                       &lt;\/a&gt;\n                       &lt;div\n                           class=&quot;dropdown-menu&quot;\n                           aria-labelledby=&quot;navbarDropdown&quot;\n                       &gt;\n                           &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;\/a&gt;\n                           &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;\/a&gt;\n                           &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;\/div&gt;\n                           &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;\n                               &gt;Something else here&lt;\/a\n                           &gt;\n                       &lt;\/div&gt;\n                   &lt;\/li&gt;\n                   &lt;li class=&quot;nav-item&quot;&gt;\n                       &lt;a\n                           class=&quot;nav-link disabled&quot;\n                           href=&quot;#&quot;\n                           tabindex=&quot;-1&quot;\n                           aria-disabled=&quot;true&quot;\n                           &gt;Disabled&lt;\/a\n                       &gt;\n                   &lt;\/li&gt;\n               &lt;\/ul&gt;\n               &lt;form class=&quot;form-inline my-2 my-lg-0&quot;&gt;\n                   &lt;input\n                       class=&quot;form-control mr-sm-2&quot;\n                       type=&quot;search&quot;\n                       placeholder=&quot;Search&quot;\n                       aria-label=&quot;Search&quot;\n                   \/&gt;\n                   &lt;button\n                       class=&quot;btn btn-outline-success my-2 my-sm-0&quot;\n                       type=&quot;submit&quot;\n                   &gt;\n                       Search\n                   &lt;\/button&gt;\n               &lt;\/form&gt;\n           &lt;\/div&gt;\n       &lt;\/nav&gt;\n       &lt;div class=&quot;container&quot;&gt;\n           &lt;div class=&quot;card&quot; style=&quot;width: 18rem;&quot;&gt;\n               &lt;div class=&quot;card-body&quot;&gt;\n                   &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;\/h5&gt;\n                   &lt;p class=&quot;card-text&quot;&gt;\n                       Some quick example text to build on the card title and\n                       make up the bulk of the card's content.\n                   &lt;\/p&gt;\n                   &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;\/a&gt;\n               &lt;\/div&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n \n       &lt;script\n           src=&quot;https:\/\/code.jquery.com\/jquery-3.5.1.slim.min.js&quot;\n           integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj\/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot;\n           crossorigin=&quot;anonymous&quot;\n       &gt;&lt;\/script&gt;\n       &lt;script\n           src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.0\/dist\/umd\/popper.min.js&quot;\n           integrity=&quot;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&quot;\n           crossorigin=&quot;anonymous&quot;\n       &gt;&lt;\/script&gt;\n       &lt;script\n           src=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/js\/bootstrap.min.js&quot;\n           integrity=&quot;sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh\/kR0JKI&quot;\n           crossorigin=&quot;anonymous&quot;\n       &gt;&lt;\/script&gt;\n   &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Don\u2019t worry too much about understanding what\u2019s going on in the code editor above. Hit the run button and take stock of the things you <strong><em>do<\/em><\/strong> know about. We have some HTML that looks like it has classes and\/or ids, a link to a CSS stylesheet that indicates it may be from Bootstrap, and then some of our own styling in the <code>&lt;head&gt; <\/code>of the document that\u2019s not being properly rendered.&nbsp;&nbsp;<br><\/p>\n\n\n\n<p>In the <code>.navbar<\/code> selector, where it mentions <code>background-color: pink;<\/code>, type in&nbsp;<\/p>\n\n\n\n<p>\u2018!important\u2019. Include a space in between the color and the !important rule. Run the code again. Did it change the background color of the navbar?&nbsp;<br><\/p>\n\n\n\n<p>This is the first use case of the !important rule. When given a user-agent stylesheet from a CSS framework or elsewhere, you can use the rule to override the styles that Bootstrap comes with.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Overriding inline-styles<\/h3>\n\n\n\n<p>Another use case is where we would need to override the inline styles of an element.<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n   &lt;meta charset=&quot;UTF-8&quot;&gt;\n   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n   &lt;title&gt;CSS Important Keyword: Overriding Inline Styles&lt;\/title&gt;\n   &lt;style&gt;\n       .line-item:first-child{\n           color: purple;\n       }\n       .line-item:last-child {\n           color: crimson;\n           font-size: xx-large;\n           font-variant: normal;\n       }\n   &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n   &lt;h1&gt;Doctor Who Characters&lt;\/h1&gt;\n   &lt;ul&gt;\n       &lt;li class=&quot;line-item&quot; style=&quot;color: rosybrown; font-size: large;&quot;&gt;Rose Tyler&lt;\/li&gt;\n       &lt;li class=&quot;line-item&quot;&gt;Jackie Tyler&lt;\/li&gt;\n       &lt;li class=&quot;line-item&quot;&gt;Mickey&lt;\/li&gt;\n       &lt;li class=&quot;line-item&quot; style=&quot;color:royalblue; font-size: larger; font-variant:small-caps;&quot;&gt;The Doctor&lt;\/li&gt;\n   &lt;\/ul&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n\n<p>Notice that we have some inline styles in the body of the code and then some potential styling to override it in the <code>&lt;style&gt;<\/code> tag in the code editor above. Use the !important rule in the CSS to override the inline styles.&nbsp;<br><\/p>\n\n\n\n<p>Please remember that the !important rule is not necessarily best practice and should be used relatively sparingly. It has the potential to lead to hard-to-find bugs later on down the road.&nbsp;<br>If you feel the need to use the !important rule and you are not using a framework, you can usually reorganize your selectors to better render what you would like to see. <\/p>\n","protected":false},"excerpt":{"rendered":"The !important rule is used to override the styling of a webpage. In all honesty, there are more instances of why you shouldn\u2019t use the !important rule vs why you should. Let\u2019s discuss how it\u2019s used and then why it should only be used sparingly.&nbsp; Overriding user-agent stylesheets When writing CSS, there will be some&hellip;","protected":false},"author":77,"featured_media":18911,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18910","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":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Resources: CSS Important | Career Karma<\/title>\n<meta name=\"description\" content=\"When coders use CSS, it might be necessary to use the !important rule. Learn when and how to use it here.\" \/>\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-important\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS !important Rule: When to Use it\" \/>\n<meta property=\"og:description\" content=\"When coders use CSS, it might be necessary to use the !important rule. Learn when and how to use it here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-important\/\" \/>\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-02T21:39:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-02T23:22:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"CSS !important Rule: When to Use it\",\"datePublished\":\"2020-07-02T21:39:23+00:00\",\"dateModified\":\"2020-07-02T23:22:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/\"},\"wordCount\":373,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/\",\"name\":\"CSS Resources: CSS Important | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg\",\"datePublished\":\"2020-07-02T21:39:23+00:00\",\"dateModified\":\"2020-07-02T23:22:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"When coders use CSS, it might be necessary to use the !important rule. Learn when and how to use it here.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-important\\\/#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 !important Rule: When to Use it\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; 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":"CSS Resources: CSS Important | Career Karma","description":"When coders use CSS, it might be necessary to use the !important rule. Learn when and how to use it here.","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-important\/","og_locale":"en_US","og_type":"article","og_title":"CSS !important Rule: When to Use it","og_description":"When coders use CSS, it might be necessary to use the !important rule. Learn when and how to use it here.","og_url":"https:\/\/careerkarma.com\/blog\/css-important\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-02T21:39:23+00:00","article_modified_time":"2020-07-02T23:22:42+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-important\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-important\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"CSS !important Rule: When to Use it","datePublished":"2020-07-02T21:39:23+00:00","dateModified":"2020-07-02T23:22:42+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-important\/"},"wordCount":373,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-important\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-important\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-important\/","url":"https:\/\/careerkarma.com\/blog\/css-important\/","name":"CSS Resources: CSS Important | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-important\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-important\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg","datePublished":"2020-07-02T21:39:23+00:00","dateModified":"2020-07-02T23:22:42+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"When coders use CSS, it might be necessary to use the !important rule. Learn when and how to use it here.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-important\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-important\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-important\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-important\/#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 !important Rule: When to Use it"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; 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\/18910","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=18910"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18910\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18911"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}