CSS (Cascading Style Sheets) Overview
Get Some Style
by D1J1T — in CSS — Updated: Feb 9, 2015 at 9:40 am
* Note: Although HTML and CSS are often learned at the same time, it may still be best to first read the overview of HTML, then come back to this overview.
HTML defines the general content of a web page. CSS, as its name implies, defines the style and formatting of that content. Also as the name implies, the styles cascade, are inherited; and their different sources have a particular priority to which they are applied.
All browsers support CSS. It is a standard and is used in nearly every existing web page.
CSS selectors are used to target a specific (or even several different types at the same time) HTML tag. The CSS selector is then assigned specific key/value pairs that match the desired property/properties to be altered. Here is a simple example:
p { color: #0000FF; }This says to the program "Find ALL HTML <p> tags (paragraphs), and make their color blue." * Note: Different color formats can be used. The above is RGB hex for the color blue.
Global changes can be made throughout the site easily in this way using CSS, given that an external stylesheet is linked. This is the preferred method, however, internal styles can also be used on the HTML page itself using the HTML <style> tag as in the example below.
<p style="color: #0000FF;">My paragraph with blue text.<p>In this example, only this particular paragraph will be styled blue.
* Note: Overuse of inline styles like above tend to clutter up the HTML code and are not necessary, rather used only as quick fixes and for testing in my case. Any specific tag can be selected by CSS in an external stylesheet instead.
Wow, blue text... What else can CSS do?
There are several hundreds of CSS properties that can be selected and changed for each HTML element. Here are a just a few off the top of my head: text-align, opacity, z-index, border, background-image, margin, padding, font-family.
With CSS3, animations, transitions, border images and other features have been included, and it's spec is still in the works!
If you find these articles to be helpful, I could always use another cup of coffee! Social media likes/+1s are also much appreciated. Thanks for reading!