{"id":473,"date":"2018-02-26T07:00:00","date_gmt":"2018-02-26T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=473"},"modified":"2018-02-15T12:18:12","modified_gmt":"2018-02-15T19:18:12","slug":"css-terminology","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/02\/26\/css-terminology\/","title":{"rendered":"CSS Terminology"},"content":{"rendered":"

A few weeks ago, I showed you what all the various bits and pieces of HTML are called in the HTML Terminology tip<\/a>. Today we’re going to find out what all the basic CSS terms refer to.<\/p>\n

Let’s use this CSS as a starting point:<\/p>\n

.example {\r\n    color: green;\r\n    font-weight: bold;\r\n}<\/code><\/pre>\n
That entire thing is called a rule<\/strong>.  In older versions of the CSS specification it was also referred to as a rule set<\/strong>.<\/p>\n
The first part of this rule is the selector<\/strong>:<\/p>\n
.example<\/code><\/pre>\n
The selector specifies which elements this CSS rule applies to.  It selects<\/em> the elements (hence the name).  In this case this CSS rule applies to all elements with the example<\/code> class.<\/p>\n
CSS rules can have multiple selectors, separated by commas, like this:<\/p>\n
.example, h2, #primary<\/code><\/pre>\n
That would select all elements with the example<\/code> class, all h2<\/code> elements, and the elements with an id<\/code> of primary<\/code>.<\/p>\n
The second part of our example rule above are the declarations<\/strong>, which is everything between the curly braces:<\/p>\n
color: green;\r\nfont-weight: bold;<\/code><\/pre>\n
The declarations define how the elements specified by the selector will be altered.  In this case there are two declarations, one to make the foreground color green, and the other to make the font weight bold.<\/p>\n
Each declaration is made up of a property<\/strong> and a value<\/strong>.  Take this declaration, for example:<\/p>\n
color: green;<\/code><\/pre>\n
In this declaration the property is color<\/code> and the value is green<\/code>.<\/p>\n
A CSS rule can have as few or as many declarations as you wish.<\/p>\n
Now you know the basics of CSS terminology!<\/p>\n","protected":false},"excerpt":{"rendered":"
Wondering what a selector is in CSS?  What about a rule, or a declaration?  Find out in this tip!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-473","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=473"}],"version-history":[{"count":8,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/473\/revisions"}],"predecessor-version":[{"id":558,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/473\/revisions\/558"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}