Cascading Style Sheets (CSS)
A language which dictates how HTML elements are to be displayed or styled.
Best practices
- Comments: provide a brief explanation or label for the code
- Use responsive styling to ensure the layout adapts to screen size appropriately
- Accessibility:
select fonts which are appropriate for low vision
ensure sufficient contrast
ensure spacing is suitable for magnification - Formatting:
ensure a logical order
group code with the same styling
utilise media queries - Validate the code: check the code for errors using a CSS validator
Hints
- Check the spelling of each class
- Check container levels
- Check folder pathway
- Check color contrast
- Check mobile version in the portrait and landscape modes
- Google Fonts provides a range of free font options
- Use media queries to make the webpage responsive to different screen sizes
Flexbox
Flexbox is a style of layout that allows containers to flexibly adjust to different screen sizes.
Parent properies
- justify-content
- align-items
- flex-wrap
- align-content
- gap
- flex-direction
- flex-flow
Child properites
- flex
- flex-basis
- flex-shrink
- flex-grow
- order
- align-self
One & Done
- Borders require information regarding their width, color, and type
- Width and height can be measured in pixels or percentages or can be relative using flexbox
- You can use calculations to set widths that adapt to screen size
- Break-inside dictates how a column behaves inside a container and can stop any break within a box
- Responsive typography: "em" is relative to the parent element's font-size whereas "rem" is relative to root font-size
- Font options should consider legibility in relation to accessbility following Vision Australia's "Typography in Inclusive Design" part 1 and part 2
- Change the cursor style as it hovers over selected elements or features
- Margin vs padding: margin is the space outside of an element whereas padding is the space surrounding the content within an element
- Uniform image sizing
- Make a div invisible to clicks
- Rotate an element
- Use media queries and display:none or display:block to make divs appear/disappear at different screen widths
- Increase scrolling smoothness
- Box-sizing includes padding and border in the elements total height and width and box-sizing: border-box keeps the child container within the confines of the parent container
- To make an indent start from the second line, you can use a negative indent value to relatively shift the top line to the left
- text-underline-offset property can increase the distance between the text and the writing
- Make sure the button style is eye catching, simple, and containswith minimal contextual text
- The opacity property is inherited by child elements, so to prevent inheritance, use the .element-class::before selector to change the opacity
- Resize and image whilst maintaining proportions
- The z-index sets the order in terms of layering for an element
- The !important rule can be added to any property and overrides all previous styling rules for the specific property on the element
- The object-fit property sets how an image or video should be re-sized within it's container
- display: inline-block allows the list items to be displayed horizontally instead of vertically
- Maintain the aspect ratio with responsive sizing