{"id":108,"date":"2021-06-03T22:03:53","date_gmt":"2021-06-03T21:03:53","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/?page_id=108"},"modified":"2023-09-28T15:24:47","modified_gmt":"2023-09-28T14:24:47","slug":"priority-of-styles","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/css\/priority-of-styles\/","title":{"rendered":"Priority of Styles"},"content":{"rendered":"<p><a href=\"https:\/\/www.w3schools.com\/css\/css_specificity.asp\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"image-59 alignright\" src=\"https:\/\/glow-prod-sh.s3.eu-west-1.amazonaws.com\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2021\/06\/03210120\/w3schools-150x150.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&#038;X-Amz-Security-Token=IQoJb3JpZ2luX2VjEE8aCWV1LXdlc3QtMSJHMEUCIQDxM6YiQF4yBmDtwowOJC6b0jigPQSzmCDDla3pVBEergIgd%2Ffi0R0XBZ1L5xyadjv6O9UY5bu1ij51I7HVNFl9wxwquAUIGBAFGgwyNzM1NzAxOTU0MzMiDMyrKtx%2FbKagKA8HGiqVBR%2FPei8m5kWAVB2X0nEDS5gp8EdxqcqrBLskmcQan6kHrsejKotuoe174dOd51ZpYrGX%2Fp2mMA7a0bAUetkMWYbJGx6GKK6lI4Id3oPdJlcMIkIfz1EzwTR6IitURBtHbfGmuSULSq7j7TIKEjF0gXsvRlqpmD6%2Fx6tgea1GlDur0AdaxsJpkBlvK0jXy3b5%2FAvlqIFT%2F3kL7W2N0Rk5BNoADSgEnAHJPCmFiinF8mCYW3Cp%2FBFZfYcFyNNcdWCdko0i6mAYDlqSN09nqXTpeiYgGH7NZgixaAuXcYvY0gZ2%2Fc5x02Vu7BIH5LdoXMhfAATm9MzlLfyTHF25DqXXDuoQe9Ex361M6obJh84c%2FDiHJCNTlLM17iNDg2Y%2BC2Ff4C4xXyN6qR49gTUk2tSsrRKtpEmikEyD7KF%2B3P8KNoKcRXpIAO%2B7kf6FpU8Ax6ezJoFBANOWAjwQuJ8yxXt7sJMkApCCaHpdj7Ss2T6oyR5S9KQP0ryOZVJ1R8JoWDN8Tlm67FqKqcAM7nd7AUmeAHcMtwHd%2FizNt7bnzljpE35dDs32f1hsM%2FigyoOAj6hRLsej61WaJySmYmsTHuu%2BytEVJw0TuFToLMvcoAYqKReMMroRmu1Dz6784BjEER65S1noS0W4NwczeKdhm1nAS6ubM%2BLjOi8SWw67NOWaMOUDUra3EpHOsi%2FLlwhbtJswh7TPJAEubpojAUcSBHU6ruGsZmBK9oJ%2F31kvp4z6iyV%2Fwlu85AS5%2BEV1KF0s1yuXz1b7JmgSlA4qk8ZwLQ9aKY%2B%2B981elKc8LvvwKnbJ0baOYXzcvnYVDdSKeOohDVd6w3hsGZoLJ3jy1saPjSzsjliuc5g3M%2FIMQ5DA2%2BsfDPkaxu%2B%2FQe8wspGXzwY6sQGbk%2BWiM5%2Ff%2B172cLYKeWgeM6VB%2BopX0%2Bbdhu74zBwjtEZ86%2BySIw1XhJWPicF2nUMkZK2afQj7sR3mBzEyXqFC6yAMmKmnyKg%2B9o64KuoXH6BIL6NJ2RIMx9kJ%2FRquyXLloQQAbr2idsvomYUXehzfAZORzrKFod4P5a2A55bi%2BlokZBOm1g%2BNAu%2BKqpWFjWmYXF6fw4Ww8KWCpnX3yWvW1GuOCp9o9zpMRaVTAL%2Fz%2F0A%3D&#038;X-Amz-Algorithm=AWS4-HMAC-SHA256&#038;X-Amz-Credential=ASIAT7MQN47UUQAL7HMR%2F20260420%2Feu-west-1%2Fs3%2Faws4_request&#038;X-Amz-Date=20260420T064418Z&#038;X-Amz-SignedHeaders=host&#038;X-Amz-Expires=899&#038;X-Amz-Signature=9cce5639ceb7a1661bd9db2668545be6f069be2c6b5258f51ad865e22f25b856\" alt=\"\" width=\"50\" height=\"47\" \/><\/a>An object on a page may have several, conflicting, rules that apply to it. To know which rules are applied, you need to consider <strong>where<\/strong> rules are specified and the <strong>type<\/strong> of rule.<\/p>\n<h2>Location of Settings<\/h2>\n<p>Rules are applied in the order they are given &#8211; <strong>later rules for the same element\/class\/id will override earlier rules<\/strong><\/p>\n<ul>\n<li><strong>inline styles<\/strong> override <strong>internal styles <\/strong>override <strong>external styles<\/strong><\/li>\n<\/ul>\n<pre><strong>styles.css\r\n<\/strong>p { font-family: \"Times;\"}\r\np { font-family: \"Arial;\" \r\n    color: orange; \r\n    text-align: left;}\r\n\r\n<strong>&lt;style&gt; ... &lt;\/style&gt;<\/strong>\r\np { color: red;                       \r\n    text-align: right;}\r\n\r\n<strong>&lt;body&gt; ... &lt;\/body&gt;<\/strong>\r\n&lt;p style=\"text-align: centre;\"&gt;<span style=\"color: #ff0000\"><strong>This paragraph is centered, in red Arial<\/strong><\/span>&lt;\/p&gt;\r\n\r\n<\/pre>\n<h2>Element, class or id<\/h2>\n<p>The more specific a rule, the higher its priority.<\/p>\n<ul>\n<li><strong>id rules <\/strong>override <strong>class rules<\/strong> override <strong>html element rules<br \/>\n<\/strong><em style=\"font-size: 1rem\">eg There can be lots of paragraphs, but several of them can be the same class. Only one paragraph can have a given id.<\/em><\/li>\n<\/ul>\n<pre><strong>styles.css\r\n<\/strong>p { font-family: \"Arial;\" \r\n    color: orange; \r\n} \r\n\r\n.quotation{\r\n    color: red;\r\n} \r\n\r\n#titlequotation {\r\n   color: gold\r\n}\r\n\r\n<strong>html<\/strong>\r\n&lt;p&gt;This paragraph will be orange (from p element)&lt;\/p&gt;\r\n&lt;p class=\"quotation\"&gt;This paragraph will red (from class)&lt;\/p&gt;\r\n&lt;p id=\"titlequotation\"&gt;This paragraph will gold (from id)&lt;\/p&gt;\r\n\r\n&lt;p class=\"quotation\" id=\"titlequotation\"&gt;This paragraph is gold (id overrules class)&lt;\/p&gt;\r\n&lt;p class=\"quotation\" id=\"titlequotation\" style=\"color:green;\"&gt;This paragraph is green\r\n(inline overrules everything)&lt;\/p&gt;\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An object on a page may have several, conflicting, rules that apply to it. To know which rules are applied, you need to consider where rules are specified and the type of rule. Location of Settings Rules are applied in the order they are given &#8211; later rules for the same element\/class\/id will override earlier rules inline styles override internal styles override external styles styles.css p { font-family: &#8220;Times;&#8221;} p<\/p>\n<p><a class=\"more-link\" href=\"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/css\/priority-of-styles\/\">Read More<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"parent":78,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-108","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":9,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/108\/revisions"}],"predecessor-version":[{"id":447,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/108\/revisions\/447"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/78"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/media?parent=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}