CSS Flashcards
(35 cards)
What is CSS selector specificity and how does it work?
Specificity is where you have 2 CSS styles that conflict for example 2 that modify 1 element, this uses a priority system to determine which of the 2 conflicting styles in used using weightings for the elements. An example is if you have a class with in line styling but you also have styling in a style sheet for the element, the priority will use the style from the inline since it has higher weight.
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
CSS resetting as the name implies resets all stylings, this means everything will look the same, for example a h1 or heading 1 will look the same as a heading 2 and the idea is that you’d individually style each of these manually. Normalizing is where you make elements appear the same across all browser based on the code you write. For example if you change a font size it’ll be the same font size regardless of the browser. Personally I’d go with normalizing as I feel it’s a waste to reset all the styling only to manually style it again.
Describe Floats and how they work.
Floats are a positioning style which makes the elements appear in line with the content. For example if you use a float left the text will wrap around the image instead to the right. if for example you used position absolute instead the text would overlap the image. Float is essentially a positioning style to add an element into the flow of the website meaning the other parts of the website like the text will be affected by them.
Describe z-index and how stacking context is formed.
Z index is the view of the html as a 3 dimensional page, where the z index determines how content is stacked. If you have an image and text in the same position if you assign them both z index values, the one with the higher value will overlap the one with the lower value. z index only applies to elements that are positioned such as position absolute.
Describe BFC (Block Formatting Context) and how it works.
Block formatting context works with floats and allows you to create boxes around child elements within the box which works with floats. For example if you have a float left and some text, without block formatting context the container for both of them will wrap around the length of the text, but if BFC is applied then it will apply around the float too.
What are the various clearing techniques and which is appropriate for what context?
the clear property moves the content to be displayed after the floating element depending on the side. For example if you used clear: left it’ll display the content after the left float, this can also be applied to right too or both. There is also a “clearfix” which can be applied to floats which will clear the element so that the container is automatically resized to the size of the float so the content will be displayed below.
How would you approach fixing browser-specific styling issues?
one option is to use a CSS framework which automatically handles the browser specific styling such as bootstrap. you can also use reset or normalize CSS depending on which you prefer which will clear the CSS so that you can individually style each element or use a set of consistent styling between browsers.
How would you approach fixing browser-specific styling issues?
One option is to use a CSS framework which automatically handles the browser specific styling such as bootstrap. you can also use reset or normalize CSS depending on which you prefer which will clear the CSS so that you can individually style each element or use a set of consistent styling between browsers.
How do you serve your pages for feature-constrained browsers?
There are websites that allow you to see what features each browser is compatible with. This can be used to make sure the website meets the target browser specifications. When designing the website it’s possible to have the basic features compatible with all browser types and then add specific features for browsers that support them.
What are the different ways to visually hide content (and make it available only for screen readers)?
Set the visibility to hidden for the element, make the size 0, or use position element with a large value to remove it from screen view. For example, use position absolute then set the position to a really large number to the left or right.
Have you ever used a grid system, and if so, what do you prefer?
In some of my early projects I used the float system, but later on I started using bootstrap more often which uses flex and flexbox which is widely compatible and works well for the times iv needed to use it.
Have you used or implemented media queries or mobile specific layouts/CSS?
Yes on my project during university I had to change the navigation bar for mobiles, so I changed it so that you would click a button and the navigation bar would appear from the left side instead with the navigation links stacked. This only occurred on devices which a screen size below a certain range.
Are you familiar with styling SVG?
SVG are vectors that can be used to create shapes on the website. Just like other elements on the website you can style them to change the colours and other properties. I haven’t used them in my projects but I’ve experimented with using them but never stuck with it.
Can you give an example of an @media property other than screen?
print. Media lets you style based on the device the user is using for example if they have a smaller screen you can change the design to be more suitable.
What are some of the “gotchas” for writing efficient CSS?
Keep the CSS to the top of the page if not in a style sheet is one. Also when styling elements that are child elements, don’t add redundant elements. For example don’t add selectors such as body as it’s not really needed.
What are the advantages/disadvantages of using CSS pre-processors?
Describe what you like and dislike about the CSS pre-processors you have used.
One of the main advantages that I’ve used pre-processors for is the ability to create variables similar to php which can be applied to certain parts of the style sheet. For example if you have a colour that’s going to be used a lot in the stylesheet you can assign the colour to a variable and instead of rewriting the colour every time you can just substitute in the variable. It helps a lot with reducing redundant coding and can save a lot of time in coding because it’s easier to code functions like defining the hover style for a element instead of creating a separate part you can code it within the original element. The drawbacks are the compile time is increased and debugging becomes harder. it’s also a large change compared to the regular style sheet so if you decided at some point you wanted to remove the pre-processor you’re in a position where the amount of work you’d have to to do remove it would be far more the larger the style sheet is. or the more complicated it is.
How would you implement a web design comp that uses non-standard fonts?
You can import a style sheet to import certain fonts, such as google style sheet which has some fonts. You can also use @fontface to declare a custom font. In the past I’ve used an import for google API style to add in fonts in one of my projects.
Explain how a browser determines what elements match a CSS selector.
it starts with the child element and then works it’s way up so for example if you have a style for a bold text which is contained in a list, it’ll first check for bold element, then it’ll look for list and it’ll keep working upwards until it finds the CSS that matches.
Describe pseudo-elements and discuss what they are used for.
Pseudo elements let you control specific parts of elements. For example if you have text that you want to change in some way such as colour when you hover over it, you can use the pseudo element hover to change the style. An example use is if you have a link, you can do li::hover and then change the style to make it appear different for the hover. I used pseudo elements a lot for advanced styling and making the page feel dynamic.
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
The box model is how the content on the page is displayed. Everything is displayed within boxes, for example a paragraph tag has a box, a div tag has a box. There’s parameters to these boxes, you have the width and height of the box, padding which is the space within the box that is pushed in for the content, and margin which is a section outside of the box which is used to separate elements. So if you have a box with no margin the next element or box will be touching the current one, if you have no padding the insides of the box will be up to the edges of the container. These values can be changed to design the contents to the way you want it to appear.
What does * { box-sizing: border-box; } do? What are its advantages?
this makes it so instead of the margin and padding increasing the size of the container past the defined size, it instead retains the same size. Therefore if you want different padding and margin sizes but want the overall box size to remain the same, this will make it so the padding and margin don’t affect the overall size.
What is the CSS display property and can you give a few examples of its use?
The display property lets you choose how the box of the element will be displayed, for example, you can use flex which will make it flow with the rest of the content such as text which will be moved to the side and will wrap around it. There are other types like block which will make it like a paragraph in where it starts on a new line and any content after will appear on a new line too as it takes up the entire width. in-line is similar to a span in how it will not start a new line or separate content.
What’s the difference between inline and inline-block?
The regular inline property does not allow you to resize the width and height of the box, but inline-block does.
What’s the difference between the “nth-of-type()” and “nth-child()” selectors?
The nth child will use all the elements in the parent element for it’s calculations however the nth of type will only the specific type of element. For example if you have a container which contains a h1 and 5 h2, if you used nth child to change the h2 elements, it’d also use the h1 as part of the number calculations such as with odd and even the first value will be calculated with h1, making the actual sequence for h2 start with even instead. Nth of type will only calculate based on the specific element within the parent such as only h2.
