What is CSS?
“Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML.” -Wikipedia
The whole world wide web uses CSS, and is used to style web pages. Without CSS the internet would look like plain old text.
How do you apply CSS?
There are 3 ways to apply CSS.
- In the head tag of an HTML file
- In a div in line of an HTML file
- Create a separate file usually named main.css
There are some concepts to understand visually
The most important concept to understand about CSS is selectors. Selectors allow you to target exactly what you want to change. Here is a list of CSS Selectors.
There are so many different selectors to choose from but the most common are just the element tags already made in HTML. Also classes and id’s made within HTML are common selectors.
CSS reads from the top to bottom because of that the bottom code overrides previous changes made on the same element. However, the more specific you are with choosing a selector it will override other changes. Essentially the longest chain of events to be triggered to get to the targeted selector overrides any change for that element.
Here is a great source for CSS properties it also shows you how it affect the web page visually next to the property name. The most common properties to refer back to are in regards to style text, box model, box sizing, display, and positioning elements.
Besides properties and selectors another concept to understand is units used to make changes in properties and selectors. The most common ones you’ll run into are PX, EM, REM, PER.
PX just stands for pixels which is used for fonts and images.
EM is relative to the font-size of the element (2em means 2 times the size of the current font). This however affects the closest parent.
REM is relative to font-size of the root element so this is based off the top line of code.
PER only affects the closet parent as well.<div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-155635758-645-5d077d8b969f6' data-src='https://widgets.wp.com/likes/#blog_id=155635758&post_id=645&origin=trilamanila.com&obj_id=155635758-645-5d077d8b969f6' data-name='like-post-frame-155635758-645-5d077d8b969f6'><h3 class="sd-title">Like this:</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class="loading">Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div>