CSS Checklist Flashcards
All the Essential Concepts on CSS
Do you know why we use CSS (Cascading Style Sheets)?
CSS is a coding language we use to instruct the browser to style our HTML skeleton code. We use CSS to adjust elements’ colors, fonts, add effect to images and generally to make web pages look good and presentable.
Do you know why CSS is called a Cascading Styling Sheet?
Because more than one style rules can apply to a particular piece of HTML element, there has to be a known way of determining which rule takes priority. To know which style rule takes priority, CSS performs a set of rules called cascading which evaluates the strength of the applied styles and determines the winner, i.e., the style rule which has more weight wins.
Do you know the different ways to include CSS in your projects?
Inline CSS: This is basically including CSS directly into your HTML elements by using style attribute and providing properties to it. Example: <h1 style="color: blue"> Hello world! </h1>
Internal CSS: Here, you use style element in the head section of your HTML document to include your CSS. Example:
<head>
<style>
h1 { color: blue; }</style></head>
External CSS (most recommended way): To include an external CSS to your HTML document, you will need to create a separate stylesheet with a .css extension and include its link in the head section of your HTML document like this:<link></link>
Do you understand the key CSS concepts to help you writer your CSS quicker?
Understanding of the most common CSS measuring units, such as pixel(px), em, rem, and %
Thinking in terms of containers, meaning wrapping elements in containers for better organization
Naming containers and elements to make them uniquely identifiable
CSS styling rule has selector (an HTML tag at which a style will be applied to. This could be any tag), property (a type of attribute of HTML tag. In short, all HTML attributes are converted into CSS properties. They could be color, border, etc.) and value ( are assigned to properties. For instance, color property can have red as property) as its components.
Do you know the most common CSS selectors?
The most common CSS selectors are universal or * selector, type or element selectors, attribute selectors, descendant selector, child selector or > selector, class selector, and Id selector.
Do you know what the universal selector or * selector does?
The * enables you to select all elements of a particular selector. For example, if you used *p and then added CSS styles to that, it would do it to all elements in your document with a
tag. This makes it easy to target parts of your website globally.
Do you know what the !important property does?
When you want one CSS statement to get absolute preference over any other similar statements that could potentially change the styling, you add the !important key at the end of your CSS statement.
Do you know how you can apply a single CSS rule to multiple classes or selectors without repeating the same exact CSS several times?
This is better explained by giving examples. Let us assume you want to add an identical border around all images, the blog section and the sidebar. You don’t have to write out the same exact CSS for your three elements. Just list the selectors for each elements separated by commas and apply your CSS like this: h1, h2, h3 { color: green; } or .blog, img, .sidebar { border: 1px; }
Do you know what an element or a type selector does?
Type selector simply matches the name of an element type to be styled. For example we can use h1 {color: red} to give color to all h1s
Do you know why we use Class or Id selectors and what their difference is?
Classes or Ids are names/attributes given to a specific HTML element for purposes of styling. You can give any name you think is appropriate for the Class or Id. The difference between Classes and Ids is that classes are like family names and can be used multiple times.
Example: <p class= “puppyContainers”></p>. Ids however are unique names and you can not use similar Id names in a single HTML page. Example: <p id= “bannerImage”></p>
Do you know the difference between descendant selector, adjacent sibling selector and direct child selectors?
Descendant selector is used when we want to apply a style rule to a particular element only when that element LIES INSIDE a particular element. Let us say we have ul a {color: red}. The red color will apply to a tag element only when it lies inside the ul tag.
Adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and “adjacent” means “immediately following”. For example, if we have div + p { color: yellow;} in the following example, it will be the “p” outside of the “div” that will have yellow color because it immediately precedes the “div”
Direct child selector (> selector) rule will affect the styling of direct children of an element that is selected. If we have body > p {color: red}, the rule only applies to paragraphs that are only the DIRECT CHILDREN of the body element.
Do you know what an attribute selector is?
Attribute selector is a selector used to style an HTML using one of its attributes.
In the following example a[href=”https://example.org”] { color: green}, all <a> elements with an href matching “https://example.org” will have a green color.</a>
Do you know what the CSS units such as px, %, em, rem and px do?
Pixel(px) CSS unit s a unit of length which roughly corresponds to the width or height of a single dot (0.26mm) that can be comfortably seen by the human eye without strain, but is otherwise as small as possible.
Percentage (%) CSS unit describes your element in relation with other elements, usually in relation to its containing (parent) elements
em and rem CSS units measure font sizes. We use em to measure font-size relative to the parent. We use rem to define font sizes relative to font-size of the root element.
Do you know the most commonly used HTML containers or wrapping elements and why they are important in mastering CSS?
The most commonly used wrapping elements are <header>, <section>, <div> <span>, and <footer>. It is very important to organize your HTML or group related elements together in a container because it allows you to style multiple elements at once and to make your code logical and readable.</span>
Do you know the difference between centering a text and centering a block?
Text is centered in the following manner: text-align:center. Please note that text-align property in this example will only center texts, not block elements like p or div
A div (or any other block element like image) can be centered by adding the block property to it, and then using auto margins. The CSS would look like this: img { display: block; margin-left: auto; margin-right: auto }
