CSS Essential 2: Background, Responsive Design
This is my CSS Essential 2 class summary note which following of CSS Essential 1 (Christina Truong’s lecture). Hope you enjoy!
Review: Selectors and Layouts
Combinator selectors
Descendant Selectors
Select the link within the section element
Can also mix different selector types when using descendent selectors
Select multiple selectors in the same element by chaining them together
Child Combinators
Child combinators can be used to select only the child element, using the greater than (>) symbol between the elements.
The parent element is on the left and the child element is on the right.
Sibling Combinators
The plus symbol (+) selects only the adjacent sibling. The selector on the right is the sibling element to be matched.
If you use the tilde symbol (~), this will match any sibling element following the selector on the left.
Pseudo-class Selectors
Pseudo-class is a keyword that is added to selectors using a colon and no spaces. This specifies a certain state of the element. A common one is hover. Used to apply styles when the user mouses over the target item.
-child element
You can also use pseudo-classes for selecting a specific child element based on it’s order. First child selects the first child element of it’s parent, and last child selects the last child as the name implies. For the selector, the keyword is added to the child element.
-type element
There is also a first of type and last of type pseudo-class which is similar with one distinction. These two represent the first or last child element of it’s type.
:nth-child()
The nth child pseudo selector is used to select one or more child elements based on their order within the parent container. Elements are selected by passing in an argument using a keyword, number or algebraic formula.
There are two keywords. Odd and even.
You can also use a single positive number to select a specific child element. To create a specific pattern like every third element, you can use an algebraic formula.
Pseudo-element selectors
Pseudo-Elements are very much like pseudo-classes but instead of targeting a specific state or order of an element, you can style certain parts of the element that are not explicitly part of the html.
:before and :after
It’s used in what’s commonly referred to as the “box model fix” for changing the way elements are sized.
These are used to generate content or style elements that are inserted before or after a selected element. These pseudo-elements do not become part of the actual HTML structure(DOM). For accessibility, :before and :after should only be used for presentational effects since the inserted content cannot be read by screen readers.
- Must always be used with the content property to generate the content to be inserted
- Use a string value, enclosed in quotes (single or double)
String Values
Strings refer to any character. You can use text, numbers, or even leave it blank.
Box model
The box model describes the way CSS handles the sizing and spacing of HTML elements. There are five properties that make up the box model, which are width, height, padding, border, and margin.
All of these properties work together to form the total width and height of the element. So, even though you may set the width and height to a specific value, any padding or border you add to the element will also be included in the total size. Margin only adds space around the element, but it doesn’t add it to its actual size.
By default, the box-sizing is set to content-box. So without the fix, any padding and border will be included in the total width and height of the element. But with the fix, the box-sizing is changed to border-box. With the fix, the content is pushed inward to maintain the size.
Float and display
Block elements
Block elements, by default, stack on top of each other and span 100% the width of its container. Inline elements are only as wide as their content and display in a line, starting on the left.
To change this layout behavior, use the display property with a value of inline-block to retain characteristics of both. One thing to note: when you align inline and in-block elements, a space appears between the elements.
Floats
When no floats are applied, block elements stack on top of each other, no matter the size because that’s the behavior of block elements. In this example, the red line represents the parent container of these elements.
Float is used to align elements to the left or the right of its container. When an element is floated, the elements following it, like the paragraph in this example, will move up next to it as long as there is space. Even when no float has been directly applied to it. But the parent element doesn’t extend to the two floated boxes at the bottom. Parent elements don’t recognize the height of floated elements and only wrap around the non-floated element, the paragraph in this example.
Navigation menu
Traditionally, navigation menus were contained in an HTML list, like in this example.
But many in the deaf community began to question the necessity of using lists when the semantic tag was introduced in HTML5. When styling lists as navigations in CSS, you’ll need to first reset and override all the lists default styles.
Float, display, and position
With so many ways to align elements, how do you know when to use float, display, or position?
Float
- Variable and flexible content like an image surrounded by text: Your image file may change size, or the amount of text may change, but using float will allow the content to flow around it, no matter the size.
- Global or large page structures: Float is also good for laying out major structural parts of your webpage, like a header, footer, and sidebar.
Display
- Align blocks on a page with the extra space that shows between elements
- Able to apply text-aligned center to the child elements, which makes it ideal for centered, horizontal navs.
- Doesn’t changing the page’s natural flow and stacking order when you use display.
Position
- Positioning elements relative to another element.
- Positioning elements that exist outside of the natural page flow, such as a fixed navigation bar,
- or for aligning elements in a specific spot on the page.
Positioning shouldn’t be used for page layouts since it takes the element out of the stacking order, with the exception of relative positioning. Try to keep the natural page flow intact as often as possible.
Float, display, and position can’t be used together on the same element
Layers and the z-index property
Web pages appear to be two-dimensional, but they’re actually three-dimensional. Elements can be positioned along the horizontal x-axis and along the vertical y-axis, but there is a third dimension. The z-axis describes how layers can be stacked on top of each other, referred to as the stacking context. For the z-index value, the higher the value the higher the stacking level.
Resetting stylesheets
A CSS reset style sheet has often been used to work around this issue. It’s a prewritten set of CSS rules that override the browser default styles, to a consistent, unstyled baseline. Resets can be useful, because you’re starting with a clean slate.
Normalize is another option for standardizing styles. The main difference here is rather than removing the styles, the CSS is added to make the base styles more consistent across browsers.
Icon fonts
Web-safe fonts
- preinstalled font files
- Have no control over what users have installed
Web fonts
- Do not need to be installed on the user’s computer
- Two ways to include web fonts: external source (hosted CSS files), internal source (font files)
The background property
Each background property value is specific to that property, so when using shorthand, the order of values don’t matter, but make sure they are separated by a space.
When using background size with the shorthand property, it must be included after background position and separated with a forward slash.
If you’re not using the background position property, just add background size after the shorthand declaration.
If you mix shorthand and longhand, the values will get overwritten.
Alpha transparency and gradients
RGB and Alpha Transparency
Instead of using a keyword or hex code, use an RGB color value instead. RGB values are solid, but you can add an alpha transparency value using RGBA to specify the opacity of a color. Choose a value between zero and one. Zero is fully transparent and one is fully opaque and solid.
Background Image and Color
This all relates back to how the layer order works with z-index. The image background is the lowest on the stack, because it’s enclosing all of the content. Next, the alpha layer is nested, so it’s higher on the stack, and that’s how we can put color on top of the image. And the last layer is the content, which sits on both the background image and the background color.
You can add multiple background images by separating the values with a comma.In the shorthand notation.
Gradient
To overlay a color, instead of using two background images, you can actually use the background image property to add a gradient instead of an image.
Responsive Design
Media queries are used to specify how a document is presented on different media. For responsive web designs, it’s used to customize the document based on specific conditions, such as the viewport width or even the device orientation among other features.
Breakpoints are the browser widths used to determine when to change the styles and layout of your webpage. It’s common to use around three breakpoints to optimize for mobile, tablet, and desktop.
Mobile first
Starting with a smaller screen may help you make more thoughtful decisions about what elements are actually necessary instead of just filling up space.
Graceful degradation
- Designing and developing the best experience for modern browsers first,
- then providing fallbacks to ensure basic functionality for older browsers.
Progressive enhancement
- Focus is on content and accessibility first
- The focus of design and development is on the base level experience first,
- Then, more advanced features are added for enhancements in the browsers that can support it.
Fluid vs. Responsive
- Fluid layouts are relative, but the content and components only get wider or narrower
- Responsive layouts change based on screen size
Media queries
To create responsive designs, use media queries to add conditions for applying specific CSS styles. With media queries, we’ll be able to apply logic like, when the browser viewport is wider than a thousand pixels, apply this CSS.
Media types refer to various devices which can display HTML documents.
Print: matches to printers and other print-related displays like a web browser showing the page in print preview.Speech: matches screen readersScreen: matches all devices that are not print or speechAll: matches all devices. If you don’t specify a type, it will default to all.
Media queries are added to the HTML file using the link tag to load specific CSS files into the HTML. Add the media attribute with the value set to the media feature and type.
The media query conditions are added using @media and a pair of curly braces to contain the CSS specific to that condition.
Width vs. Min- and Max-Width
Width refers to the width of the browser’s visible screen area, or viewport, including the size of a scroll bar. And while you can use just width, it’s not very flexible because the resolution has to be the exact size.
Min- and Max-Width
When mixing max and min widths, avoid using the same value in both declaration.
Instead, make one of the values one pixel smaller or bigger so you don’t have to worry about your declaration orders, and you don’t have to worry about targeting the same size.
Specify a Range
Use more than one condition and combine min- and max-width to specify a range
This is end of <CSS Essential Training 2> note. Hope it was useful. Contents will be continued in the next summary of <CSS Essential Training 3> ✋✋
