{"id":16581,"date":"2011-02-16T18:24:15","date_gmt":"2011-02-16T23:24:15","guid":{"rendered":"https:\/\/friendburst.com\/blog-new\/16581\/sfbpc-css-explained\/"},"modified":"2011-02-16T18:24:15","modified_gmt":"2011-02-16T23:24:15","slug":"sfbpc-css-explained","status":"publish","type":"post","link":"https:\/\/friendburst.com\/blog-new\/16581\/sfbpc-css-explained\/","title":{"rendered":"SFBPC – CSS Explained"},"content":{"rendered":"\n\n\n
\n
\n

\u00ab Index<\/a><\/span><\/p>\n

CSS<\/span><\/p>\n<\/div>\n<\/td>\n

\n
\n

CSS (Cascading Style Sheet)<\/span><\/p>\n

\"CSS\"<\/p>\n

This is a brief explanation of how CSS works.<\/strong><\/p>\n

\n

A CSS rule has two main parts: a selector, and one or more declarations:<\/span><\/p>\n

.selector { property: value; }<\/span><\/p>\n

The selector is normally the HTML element that you want to style.<\/span><\/p>\n

Each declaration consists of a property and a value.<\/span><\/p>\n

The property is the style attribute you want to change.<\/span><\/p>\n

Each property has a value.<\/span><\/p>\n

Example:<\/span><\/p>\n

To change the existing link color, the CSS targets the link HTML element. The HTML tag for a link is “a” (stands for anchor). This tag is referred to in the CSS by calling on that tag in the form of what is called a selector. So, to change the color of the links the CSS rule would normally appear as this:<\/span><\/p>\n

a {
\ncolor: #ffffff;
\n}<\/p>\n

#ffffff is the hex code for white, so the above rule would make all the links white.<\/span><\/p>\n

“a” is the selector, “color” is the property, “#ffffff” is the value.<\/span><\/p>\n

CSS always follows this same “rule”. Another example:<\/span><\/p>\n

body {
\nbackground-color: #000000;
\n}<\/p>\n

The above rule would make the page background black.<\/span><\/p>\n

Sometimes it is necessary to use either a more, or less specific selector. Example:<\/span><\/p>\n

div.block a {
\ncolor: #ffffff;
\n}<\/p>\n

The above rule only targets the block links.<\/span><\/p>\n

* {
\ncolor: #ffffff;
\n}<\/p>\n

The above rule targets all text, including links. Notice the selector. An asterisk can be used as a selector to target all elements.<\/span><\/p>\n

It may be necessary to override default styles. In this case, adding “!important” to the value will usually work. Example:<\/span><\/p>\n

a {
\ncolor: #ffffff !important;
\n}<\/p>\n

CSS looks difficult at first, but once you get used to the structure, and the meaning of the properties and values, it is quite easy.<\/span><\/p>\n<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

\u00ab Index CSS CSS (Cascading Style Sheet) This is a brief explanation of how CSS works. A CSS rule has two main parts: a selector, and one or more declarations: .selector { property: value; } The selector is normally the HTML element that you want to style. Each declaration consists of a property and a […]<\/p>\n","protected":false},"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-16581","post","type-post","status-publish","format-standard","hentry","category-other"],"_links":{"self":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/16581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/comments?post=16581"}],"version-history":[{"count":0,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/posts\/16581\/revisions"}],"wp:attachment":[{"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/media?parent=16581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/categories?post=16581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/friendburst.com\/blog-new\/wp-json\/wp\/v2\/tags?post=16581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}