CSS · Viking Code School

CSS3 with Viking Code School

The CSS section immediately followed the HTML section of Viking Code School‘s advanced prep work. I had previously had some brief experience with CSS, so the basics were already familiar to me. The course covered the basic elements of CSS, including selectors, properties, and values and how they work in connection with the HTML elements. The box model was discussed in depth starting with the base reading and additional resources. The positioning of elements with CSS, working with fonts and typography, applying backgrounds and gradients, styling lists, working with images and other media, and styling tables were all explained. I was able to practice and play around with a bit of CSS on CodePen while reading through the lessons.

Again, as with the HTML section, a great external resource that provided a lot of guidance was Shay Howe’s set of tutorials. I will likely be returning to them when questions arise during my first work with CSS.

The MDN reference guide for CSS that lists and describes all of the different properties available for use can be found here. Here are a good reset CSS file and normalize CSS file that can be used to zero out the properties of any browser to ensure your styling is applied uniformly. Google Fonts, Paletton colors, a guide to named CSS colors, and the Adobe Color Wheel are all very useful tools to use whenever styling.

The following are a series of questions that cover some of the topics of the CSS section of the course that I answered to review the material and test my knowledge.

Introduction to CSS3

What does CSS stand for?

Cascading Style Sheets

What are a few new CSS3 features?

Media queries are one of the biggest additions to CSS3, which enable webpages to have a responsive design, adapting to different screen sizes and devices.  The media query asks the browser for properties, such as how wide the screen is and then applies different styling values for that occurrence. CSS3 also allows the targeting of elements based on their attributes, not just their tag, class, or ID, which allows for easy selection of HTML pieces to style. The new border-radius property in CSS3, makes it much easier to apply rounded corners to a particular box. Finally, another feature CSS3 added was the ability to perform simple arithmetic calculations inside a calc() function directly without having to use JavaScript.

What are browser prefixes?

Browser prefixes are added to particular properties that older browser versions are not able to recognize and process properly. Examples include “-webkit”, “-moz”, and “-o”.

CSS Basics

What are selectors?

Selectors are the basic building block of CSS. They target (or select) a particular HTML element tag, class, id, or property. Different styling properties and corresponding values are then included within the curly braces of the selector, which are all modified for that particular selection. Example of a paragraph selector:

selector

In general, how specific should you be when targeting elements using selectors?

Selectors can be as specific as they need to be for whatever styling you are doing. Elements can be targeted by their tag, class, ID, or property. Selectors can also be defined by more than one of these items. Additionally, if all of one element tag are styled a certain way, one particular class or ID of that element tag can then be styled differently and overwritten.

What’s the difference between using %, em and rem to specify sizes?

% changes the font size by a certain percentage. For example, 16px changed by 50% would be 8px. Using rem units changes the font size based on the font size of the root html element. So, 16px changed by 10rem would equal 160px. Using em units changes the font size based on the font size of the element being styled. A 16px element changed by 10em would be equal to 160px.

How do you select an element inside another element?

There are multiply ways to specify a particular element. A class or ID can be assigned to elements to target them more specifically. A certain tag type can also be specified with a class. For example:

tag.class

How do you target the immediate child of an element?

Using a greater than symbol (>) between an element and a child element, will select all child elements of that type. For example, to select all the list item children of an unordered list you would use:

child selector

How do you target a class inside a class?

Write the class name followed by a space and the next class. For example:

classclass

How do you target a class inside an ID?

Write the ID name followed by a space and then the class. For example:

idclass

How would you target “all the links inside li elements that have the class axes which are inside the unordered list with the id tools-listing”?

complexselect

What are the three ways to include CSS in your project?

  • CSS can be included within a separate .css file, which can then be linked within the HTML using the link tag.
  • CSS can be included directly within the .html file by writing it within style tags of the head tags.
  • CSS can be incorporated via JavaScript with a linked .js file or within HTML script tags within the head tags.

How do you import an external stylesheet?

An external stylesheet is imported by including the URL for the stylesheet within link tags in the head tags.

What is the browser’s default stylesheet?

Each browser has their own default styling for HTML. A Github repo with a listing of each can be found here.

What is a “CSS Reset” file and why is it helpful?

A reset file or normalize file helps to zero out the styling that comes as default within different browsers before any other styling is run. This is helpful because it eliminates the possibility that styling in one browser will appear different in another.

Which stylesheet has preference if you import multiple ones and there are overlapping styles?

Whichever stylesheet is loaded last has preference. Cascading Style Sheets are called cascading because they cascade or flow from top to bottom. Whichever style for a particular element comes first is then overwritten by any subsequent styling affecting the same element.

What is the order of priority of selectors (e.g. if you specify that the <body> has color black but <h1> tags have the color blue but class main-title has the color red, which will be used by <body style=”color:yellow”><h1 class=”main-title”style=”color:green”>Howdy!</h1><body>?)

In the example given, the h1 would appear green, as the style attribute in the h1 tag takes precedence over all of the others. In the CSS, the last style to affect an element is applied, but this is overridden still if a style is directly assigned within the tag of the HTML.

The CSS Box Model

What’s the difference between margin and padding?

Within the box model, the padding is the layer just outside the content. It’s the space between the content and the border. The margin is the outermost layer of the box model between the element and its parent element. Adding to the margin gives the visual effect of increasing the content size of the parent element.

How do borders affect the size of the box?

The border is a layer within the box model that can be assigned color and style. It usually is a small width, sometimes of only 1px. It increases the size of overall box by that px amount on each side.

How can margins be used to center an element horizontally on the page?

If an element’s width is set, the margin can be given a value of auto and it will center that element horizontally on the page.

What does it mean that “margins are collapsed”?

Margins collapse between adjacent elements. Only the margin of the element with the largest margin value will be displayed, while the smaller will be collapsed to zero.

What is the difference between block, inline-block and inline elements when thinking about the box model?

Inline elements display without disrupting the flow of the text, such as a links. Block level elements such as headings and paragraphs use an entire line and block the flow of the text. An inline-block element are like inline elements, but can have a width and height.

When are you required to specify the width of an element vs letting the browser figure it out for you?

Block elements occupy any available width on a new line. Inline elements occupy only the width their content requires and line up on the same line, one after the other. Elements all have a default width, though some may be zero. Block elements have a default width of 100%, consuming the entire horizontal space. Inline elements cannot have a fixed size, so width and height properties are only relevant to non-inline elements.

How can you check an element’s box model in your developer tools (it’s a helpful graphic)?

Under the Styles tab in the Chrome developer tools there is a graphical representation of the box model for whatever element that is currently being selected.

box

Positioning Elements with CSS

What is the DOM?

The Document Object Model (DOM) is the structural layout of a page. It consists of every element on the page, laid out in a hierarchy.

How do elements get placed in the DOM by default?

Elements are placed within the DOM according to the tree structure of the HTML tags or nodes.

How can you override element positioning using the position attribute?

The position property in CSS allows you to specify a type of static, fixed, absolute, or relative. Static is the default. Fixed removes the element from the normal document flow and positions it relative to the outermost element. Absolute positions the element relative to the next highest relatively or absolutely positioned element. Relative positions the element relative to the current position and keeps it within the document flow.

When are you able to use the top left right and bottom attributes?

After the position property is set, the left, right, top, and bottom properties can be given a value.

What is the difference between float and position? What is the difference between floating right and floating left?

The float property can be used to remove an element from the normal flow of the document and place it to the right or left of its parent element. All other elements will then flow around the floated element. A floated image for example will allow text to wrap around it.

Which element acts as the parent for a floated element?

The parent is the element that the floated element is nested within.

If you have a bunch of elements floated next to each other and you make the browser narrower, what happens?

The elements will begin to overlap each other.

What’s the practical difference between relative and absolute positioning?

Absolute positions the element relative to the next highest relatively or absolutely positioned element. Relative positions the element relative to the current position and keeps it within the document flow.

Which element acts as the parent for an absolutely or relatively positioned element?

The next highest relatively or absolutely positioned element.

How would you set up a grid of 20×20 boxes on the page using floats? Using lists?

Using float, five lines of elements can be given a width of one fourth the total width and floated next to each other. Using lists, five lists of 4 items each can then each be displayed with css inline-block with a slight margin.

What are negative margins useful for?

Negative top and left margins move an element up and left, while negative right and bottom margins move the following elements left and up.

Working with Fonts and Typography in CSS

What are “web safe fonts”?

Web safe fonts are those fonts that are available on all systems and considered safe to use because they are so common.

What are a few examples of web safe fonts?

Arial, Courier New, Georgia, Times New Roman, Trebuchet MS, Verdana

What are generic “catch all” or “fail safe” fonts?

These are even more generic fonts than the web safe fonts above and ensure that at least some font is available for use.

What are a few examples of generic “catch all” fonts?

serif, sans-serif, monospace, cursive, fantasy

How do you set the default font for the entire document?

Using an html selector, the font-family property can be given a value that will apply it to the entire HTML document.

How do you change the font size with CSS? Thickness?

Font size is modified by the font-size property and fed a value in px or em, thought px is most commonly used. Thickness is altered by the font-weight property.

How would you go about importing a font from Google Fonts?

Google Fonts are a great selection of fonts available to anyone. A font can be selected on their website and then the URL for the selected font is simply entered in a link tag within the head tags of the html. After doing so, this font name can be used as a value for the font-family property in any CSS selection.

Applying Backgrounds and Gradients with CSS

How do you set the background of an element to be a solid color?

The background property is used in a selector and given a value of a pre-defined named color, such as red, an rgba value, or a hex value.

How do you set the background to be a repeating image?

The background-image property is used with the value url(“”) – placing the external or relative url of the image location within the quotes. The default is to tile this image across the background.

How would you make the image fill the entire background no matter what screen size is viewing it?

The background-size property is defined with a value of cover in order to spread the image across the background. Doing this, however, will stretch the image size.

How do you create a background gradient with CSS?

To create a simple linear-gradient in the background, the background property is given a value of linear-gradient(#, #), where the # fields are replaced by an rgba or hex value.

Styling Lists in CSS

How do you change the list item style type with CSS? How does this effect ordered vs. unordered lists?

Changing the list-style-type property with a value, such as square, will alter the appearance of the bullets for an unordered list (in this case making them square). This can also be changed for ordered list to alter the numbering to Roman numerals or some other form of numeric expression.

What two approaches are there to display lists in a single line?

The display property for list items can be changed to a value of inline-block, or the list items can be given a value of block for the display property and a float.

When floating list items, to which element does the .clearfix class get applied?

The clearfix class is used on the ul or ol parent tags of the list items being floated.

Working with Images and Other Media

What CSS would be applied to an image to make it responsive?

First, the images to be made responsive are given a class. This class is selected in CSS and given a width property value of 100% and a height property value of auto. To prevent the image from expanding beyond its size in a larger screen, a container div can be wrapped around the images and given a max-width property.

What are common attributes of image tags?

Width and height are attributes that can be used directly within the HTML tag for an image.

How do you load a smaller version of an image?

The width and height can be modified to a specific px amount or as a percentage of the actual size of the image file.

How do you get an image to fill up an element?

Applying a value of 100% to the width and height properties of the image will expand it to the fill the element it is contained within.

How can you save load times by using appropriately sized images?

Saving an image file in the appropriate size instead of having the CSS resize it will save loading time significantly. Less information has to be processed by the browser in order to load the image this way.

When should you store images externally vs on your server?

If image sizes are large, it may be better to store them externally on a third party server, which will decrease the amount of bandwidth being used on your server and help to decrease load times.

What are the main types of image files and how are they different?

.gif, .jpg, and .png are the main image file types. gif files only have a maximum of 256 colors and are best used for simple animations or graphics with flat colors. jpg files are lossy, meaning that they conserve file size by compressing color data. jpg can include millions of different colors and are good for photography and still images. png files are lossless, unlike jpg, and will preserve every pixel of color exactly. They also can access millions of different colors. png are best used for photography and images where colors must be exact or where transparency needs to be used. png preserves the best possible image, but also demands a larger file size and creates a longer loading time for user in the browser.

Which file types let you use animation?

gif files allow for animations.

Which file types let you use transparent colors?

png files allow for transparency.

Which file types are best for photos? Graphics?

jpg and png are best for photos, though jpg is best as it has a much smaller file size than png with only very minimal loss to the quality. gif is best for graphics with flat colors, while png or svg are best for more detailed graphics with a much larger array of colors available.

Which file type lets you scale an image as big as you want without affecting file size (and why)?

gifs can be scaled larger without affecting file size as they only use a limited number of colors and information.

What’s the difference between raster and vector images?

Vector images are created using lines and curves within mathematical modeling. If you zoom in on a vector image, the edges will always appear smooth. Text is one of the most common types of vector images. If you increase a font’s size, its appearance and edges never change. Logos and insignia are often created as vector images then saved to raster copies for print and web publishing. This allows for easy sizing of the image without losing any quality. Raster images are composed of a bitmap, constructed by coloring millions of tiny pixel squares. If you zoom in close enough on any raster image you will eventually see the square pixels and the edges will appear jagged. Raster images are great for photography and the majority of images on the web are raster images.

Styling Tables in CSS

What CSS must be applied to a table to make its borders display as connected lines?

A table must have the border-collapse property set to collapse and a px size value for the border property must be defined.

To which elements will you likely be applying most of your styles in a table?

Most styles will be applied to the table element itself for things such as the border and spacing. The table header can have separate styles, as can each row or table data cell.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s