Skip to content

CSS Dev Tools

Links: 116 CSS Index

Dev Tools

  • Grid & Flex box editor
    • attachments/Pasted image 20230325110822.jpg
    • attachments/Pasted image 20230325110924.jpg
  • We can change the colour in the browser in the styles tab.
  • Going to the computed tab we can see the styles that are being applied to the element and see where they are coming from.
    • attachments/Pasted image 20230325132557.jpg
    • This method can be easier to find which code is applying the style rather than searching in the styles tab.
For box model visualization padding: green, border: yellow and margin: orange.
  • We can adjust values directly in the box model.
  • We can toggle the hover state of an element
    • attachments/Pasted image 20230325133044.jpg
    • We can also toggle other states
  • Finding out particular media queries a site is using
    • attachments/Pasted image 20230325133311.jpg
    • attachments/Pasted image 20230325133348.jpg
  • If we want to apply a style to the selected element we do it in element.style in the styles tab.
    • attachments/Pasted image 20230325133756.jpg
  • But if we want to create a new style altogether like having a different colour for all the paragraph elements then we can use the + symbol.
  • Firefox is great for debugging CSS it can tell you why some style is not working
    • attachments/Pasted image 20230325134407.jpg

References

Last updated: 2023-03-25