What does the acronym CSS stand for?
Cascading style sheets are the words used to make up the acronym CSS. Before CSS, most styling was contained within the HTML tags of the document. CSS lets you describe the design, layout, and style of the HTML document.
Why is the word “cascading” very important in CSS?
CSS follows an order of importance. By default, what is most important is what was mentioned first in the program. Therefore, instructions cascade downward by importance, much like a waterfall. That cascade can be overwritten by selecting an element and applying unique styling. For example, if you first apply a background color of “red” to an HTML page and then later give it a background color of “blue”, then the background color will be the value that came last – “blue” – as the programming cascades downward.
How would you describe CSS to someone who’s never used it before?
The easiest way to describe CSS might be to avoid “cascading style sheets” and instead refer to it as the “color, size, and shape” of elements on a web page. All of the colors, sizes, and shapes amount to the styling of a web document.
What is the relationship between HTML and CSS?
HTML elements are the foundation of any web document. Many HTML tags come with some CSS styles by default. We can alter that styling by applying CSS attributes and values to the elements.
What is the relationship between HTML, CSS, and JavaScript?
HTML elements can be styled with CSS, and CSS does include some dynamic attributes as well as animations. However, any advanced programming for the styling of the site will need to be done using JavaScript.
What’s the most current version of CSS and when was it released?
CSS 4.0 in 2017 and CSS 4.15 12/2020. However, that versioning is very much a misnomer, and it’s to be said that CSS4 does not exist — per the web. Currently, “CSS3” is used in conjunction with “HTML5” and JavaScript to create modern web page experiences.
What are three possible ways to apply CSS to an Index HTML document?
Inline: Giving style attributes and values directly to HTML elements in the document. Typically, inline styling is to be avoided because it can make it very difficult to debug across multiple device viewports.
Internal: Styling within the <head> of an HTML document and contained within <style> tags. Internal styling is usually used in a component-based architecture, such as React.js, to apply styling to individual components as they’re rendered across the development.
Imported: CSS styling imported into an HTML document from an outside `.css` file. This is the most common type of CSS usage in web development projects as it adheres to the “separation of concerns” best practice in which we abstract away potentially confusing coding for the sake of the human developer and not the machine’s computations.
Where would a `<style>` tag go in an HTML document?
If the header of the project called for internal styling or after an opening <head> and before a closing </head> tag. The <style> tag opens and closes </style>. Inside of the <style> tag, we use the CSS ruleset to isolate elements, apply attributes, and define values.
What is the difference between an attribute and a value in CSS?
Attributes are pre-scripted properties that alter the styling of HTML elements. Values are applied to attributes to receive the desired styling.
How are the attributes in a <h1> tag different from those in an <h4> tag?
An h1 will render at 32 pixels and h4 at 16 pixels. These values are in pixels, an absolute length, which will not scale depending on the device. An h1 element will be 32 pixels on a tiny smartphone as well as on an ultra-wide television.
How are selectors used?
Selectors are used to tell the browser which element to apply certain styles to. Some HTML tags have no styling by default, but many like <h1> tags and list tags do have styling by default. Other elements, however, may get custom ID selectors or query selectors to target in on them and apply specific styling during a project.
What is an id selector?
This selector uses the `id` element to specify an element within the HTML document. Each `id` should be unique so that there is no confusion when applying these very specific stylings.
What is a query selector?
A query selector, like an id selector, is used to isolate a specific element within an HTML index by using a `querySelector()` method to return the very first element found. Unlike an id selector, you can also use the `querySelectorAll()` method to find all elements with that query and order them as an array.
What is the CSS “ruleset” for isolating elements and giving them attributes?
The entire set of rules that govern applying CSS to an HTML document. These include knowledge of selector, pseudo-class, pseudo-element, declaration block, declaration, attributes, values, and keywords used in modern web development front-end styling.
What are the two types of length units?
Relative length, like em and xm, are units that specify a length relative to other length properties. On the contrary, absolute length units are fixed in relation to each other, like pixels or inches.
What are pseudo elements and can you name any?
Pseudo elements are keywords added to a selector that lets you style a specific part of the selected element. Some examples are ` ::after` and `::before`.
What are pseudo classes and can you name any?
Pseudo classes define the special state of an element. The state of an element can be changed due to events or interactions from users. Some examples include: hover and: active to trigger actions when an element has the cursor hovering over it or when an element has been toggled into “active”.
Explain the difference between margin and padding.
Margin is the space outside the border, and padding is the space between the element and the border. We can think of the HTML element as a picture on the wall with its own height and width. In that case, then the padding would be the amount of space between the edge of the picture and the edge of the picture frame. More, in that case, the margin could be thought of as the amount of space between the pictures.