{"id":9252,"date":"2022-09-18T00:54:15","date_gmt":"2022-09-17T19:24:15","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/"},"modified":"2022-09-18T00:54:15","modified_gmt":"2022-09-17T19:24:15","slug":"solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/","title":{"rendered":"[Solved] CSS code works if put in style=””, fails if put in external css file"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

Applying CSS via the style<\/code> attribute always* trumps styles provided via stylesheets, due to specificity, as @Kirean mentions.<\/p>\n

That means that when you move your CSS to an external stylesheet, it has to compete with other defined styles.<\/p>\n

You can make your style selector more specific than the other definition, but you have to know what you are competing with.<\/p>\n

.fooLink<\/code> is more specific than a<\/code><\/p>\n

a.fooLink<\/code> is more specific than .fooLink<\/code><\/p>\n

span a.fooLink<\/code> is more specific still, etc, etc<\/p>\n

According to the W3C specification, your .fooLink<\/code> selector can be trumped by any selector with: more class selectors (.foo .fooLink<\/code>), the same number of class selectors and more type selectors (.foo a<\/code>), or any selector with an ID (#foo *<\/code>), assuming the selector applies to the same element.<\/p>\n

Now, the caveat (as implied by the asterisk above) is that you can override this behavior using !important<\/code>. !important<\/code> trumps other defined style attributes. If there are multiple !important<\/code> declarations, they are resolved according to standard specificity rules.<\/p>\n

So, the best solution is to make your style as specific as possible, and edit other styles which may be conflicting.<\/p>\n

If, however, those other definitions are out of your control (site-wide CSS stylesheets or something like that), use !important<\/code>:<\/p>\n

.fooLink\n{\n    padding-left: 20%; \n    padding-top: 0px;\n    display:block !important;\n}\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            2<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved CSS code works if put in style=””, fails if put in external css file <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] Applying CSS via the style attribute always* trumps styles provided via stylesheets, due to specificity, as @Kirean mentions. That means that when you move your CSS to an external stylesheet, it has to compete with other defined styles. You can make your style selector more specific than the other definition, but you have to … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346],"class_list":["post-9252","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html"],"yoast_head":"\n[Solved] CSS code works if put in style="", fails if put in external css file - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] CSS code works if put in style="", fails if put in external css file - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Applying CSS via the style attribute always* trumps styles provided via stylesheets, due to specificity, as @Kirean mentions. That means that when you move your CSS to an external stylesheet, it has to compete with other defined styles. You can make your style selector more specific than the other definition, but you have to ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-17T19:24:15+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] CSS code works if put in style=””, fails if put in external css file\",\"datePublished\":\"2022-09-17T19:24:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/\"},\"wordCount\":221,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/\",\"name\":\"[Solved] CSS code works if put in style=\\\"\\\", fails if put in external css file - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-17T19:24:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] CSS code works if put in style=””, fails if put in external css file\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] CSS code works if put in style=\"\", fails if put in external css file - JassWeb","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:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] CSS code works if put in style=\"\", fails if put in external css file - JassWeb","og_description":"[ad_1] Applying CSS via the style attribute always* trumps styles provided via stylesheets, due to specificity, as @Kirean mentions. That means that when you move your CSS to an external stylesheet, it has to compete with other defined styles. You can make your style selector more specific than the other definition, but you have to ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/","og_site_name":"JassWeb","article_published_time":"2022-09-17T19:24:15+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] CSS code works if put in style=””, fails if put in external css file","datePublished":"2022-09-17T19:24:15+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/"},"wordCount":221,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/","url":"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/","name":"[Solved] CSS code works if put in style=\"\", fails if put in external css file - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-17T19:24:15+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-css-code-works-if-put-in-style-fails-if-put-in-external-css-file\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] CSS code works if put in style=””, fails if put in external css file"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=9252"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9252\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=9252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=9252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=9252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}