CSS Basics

Cascading Style Sheets

    If HTML is the ‘nouns’ of a webpage, then CSS could be described as the ‘adjectives.’ CSS allows one to style HTML, and in other words, is just a fancy way of displaying information in a way that is appealing to the eye. In the past, typical front-end development called for two roles. The Web Developer (The programmer) and the Web Designer (The person who comes up with the graphical representation of how the web-page is supposed to look. It was, and in some forms of web development today still is, how web pages get developed. CSS is a way to take the information portion (HTML) and add stylistic additions to the way it is represented. Can you imagine a website with no graphical flair being successful today? For example, the following static website shows HTML only on the left, and HTML + CSS on the right.

  • The above example is pretty simple, but you can already see how the use of basic CSS can make a huge impact on the artistic element of website presentation.  

    Cascading Style sheets is named as such because the final-most style coded chronologically ‘wins out’ versus the predecessors. There are however, a few selectors that behave a little differently, and supersede other selectors.

     How specific is your selector? In CSS you can have multiple styles targeting one element. How do we know which will take precedence? Which selectors are implemented depends on Specificity, Importance and Source Order. You can think of specificity almost as if it means ‘proximity.’ Selecting by <li> will trump <body> if list is inside body. A CSS class selector will trump styles applied to <li> if the element is in an <li>. ID will trump class, as it’s more specific by definition. Importance is the use of !important, to supersede all other CSS rules. Source order is the order of imported stylesheet. It is cascading, that is, the most recently read stylesheet will override the previous.

Common Selectors

  • .class
    • Good way to select a group of elements and make sure they all have the same styles
  • #id
    • Similar to class but can only use the id once.
  • *
    • Applies to all elements
  • element
    • Select an element, apply a style
  • element, element
    •  Both element1 and element 2, apply the same style
  • element element
    • Element2 inside element1, apply a style
  • element > element
    •  Select all element2 that have parents of element1
  • element  + element
    •  Select any element2 that is directly after element 1
  • :hover
    • CSS is applied upon mouse hover
  • :last-child
    • Last ‘child’/element in a selector group
  • :first-child
    • First ‘child’/element in selector group
  • !important
    • Overrides all other CCS rules

The Box Model

Simple Images with CSS

    CSS can be a pretty powerful tool. It’s possible to create pretty good looking simple images. It’s not necessarily always the most convenient way to do things, but there are some added capabilities to creating icons or simple images with pure CSS alone. One of the reasons is it’s easy to create animated frames with a pure CSS image.

FlexBox

    Flexbox is a simple and efficient tool to allocate space for containers if the goal is to have dynamic distributed spacing. Flexbox is used to give a container the ability to alter its items width, height and order. This is particularly useful because it allows for displays of different sizes to better utilize the space on the screen and allows for a better user experience than a plain static spacing. It’s mostly used for components of an application or simpler layouts. 

  • main axis 
        -Not necessarily horizontal, depending on flex direction
  • main-start | main-end
        Items are placed in container start from main start to main end
  • main size
        An items width or height, whichever is main dimension
  • cross axis
        Perpendicular to main axis, depending on direction of main axis
  • cross-start| cross-end
        Flex lines filled with items and placed in container from start to end
  • cross size
        Width or height of flex item, whichever is the cross dimension

Leave a Comment