CSS Transitions for Beginners [2022]

Image source

What are Transitions in CSS?

Transitions are used to change the properties or the style of an element.

The transition is kind of like the “animation” that occurs between the two states of the element. Although CSS animations are a different thing. Which is confusing. Sorry.

Transitions and animations are great for grabbing people’s attention (for example in a banner ad) or for enhancing User Experience (UX). In other words, transitions look nice.

Transitions are the bit that happens when an element, like a box for example, changes size to a new state.

Original State —Transition—> New State

Box with 200px width —user clicks to cause transition—> Box with 400px

Gif Source

You might use transitions for example, to dictate how an element changes when it is “hovered” over with a mouse pointer.

With the code above, the element given the class of “box”, will change from 200px width to 400px when someone hovers over it with their mouse.

The code above will have no transition, it will just change from one to the other.

With transition-property and transition duration added, the box will move gradually from 200px to 400px, over the course of 1 second.

Transition-duration can be set in ms (milliseconds) or seconds in CSS, but Javascript, only uses ms.

Transition Properties

To create a CSS transition, you need to specify the transition-property and the transition duration.

The transition-property dictates, what is going to change, for example, the width and height:

transition-property: width, height;

The transition duration dictates the length of time a transition should take, e.g.

 transition-duration: 2s;

Transition-delay, specifies how long a transition should take to being, and transition-timing-function dictates how fast and slow the transition should occur (more info below).

CSS Transition Examples

In the example below, the box is given a class of “box” inside the HTML.

In the CSS sheet, this class is selected with the dot/period/fullstop – “.box” and given styles that include 300px height and width.

Here the box is also given the transition-duration of 350ms and the transition-property style states that the background is what will change.

The .box:hover dictates how the style will change when the box is hovered over with a mouse pointer. In the example, it will rotate 45 degrees and change colour.

The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).

Tip: A transition effect could typically occur when a user hover over an element.

Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.

https://www.w3schools.com/cssref/css3_pr_transition-property.php

Here’s a real-life example of a transition:

You can just write “all”, but best-practice is to state all of the properties you want to change with your transition:

css transition property

Transition-Timing-Function

By default, your transitions will “ease” into the new styles.

ease

Ease is the default value. Ease increases in velocity towards the middle of the transition, slowing back down at the end.

linear

Transitions at an even speed.

ease-in

Starts off slowly, with the transition speed increasing until complete.

ease-out

Starts transitioning quickly, slowing down the transition continues.

ease-in-out

Starts transitioning slowly, speeds up, and then slows down again.cubic-bezier(p1, p2, p3, p4)

Cubic-Bezier

If you really want to, you can also define your own transition speeds using cubic-bezier. The easiest way to do this is to use a generator.

Image Source

Testing Transitions with Chrome Dev Tools

You can “visualise” transitions, using Inspect Element/Chrome Developer Tools and clicking on “ease” or the transition-property you’ve created/stated:

You can also play around with rotation

Remember to copy the code before you exit Chrome dev tools.

Warning about CSS Transitions

If you can limit transitions to transforms and opacity.

A browser can use a graphics card for transforms and opacity.

For other transitions, you can create transitions which will look strange and very jerky for some users. This is especially true if you set the transition-property to “all”, rather than specific elements.

Be careful when using transitions on box shadows, borders, backgrounds etc.

CSS Positions Explained [2022]

Static

Static is the default position for all the HTML elements.

Static, effectively doesn’t do much, it just means the element like an image or text will follow the normal flow of the page/DOM.

Static elements are a bit shit and kinda lazy, static positioned elements cannot have the z-indextopleftright, or bottom properties applied to them.

If Static was a TV character, it would be Onslow from Keeping Up Appearances

Static example

Relative Position

Relative positions are pretty similar to static positions, but you can add z-index, top, left, right, and bottom properties to it.

Relative positions go with the normal flow, but can be taken out of the flow (kind of) by adding properties for its position.

Think of relative position like a dog surfer. For no reason at all.

Only joking, because it goes with the flow, but if you shout at it really loudly, you can make it move in specific directions. Maybe.

Absolute Position

Absolute position, removes the element from the normal document flow.

It goes where it wants, regardless of other elements.

The other elements are not moved or effected by an absolute element.

Absolute positioned elements have their width defaulted to auto instead of being full width like a div

absolute css

https://blog.webdevsimplified.com/2022-01/css-position/

In the above image, the “one” class/element is given 0 for the top and left properties, so it remains in the default position, on the top left of the screen.

Fixed Position

A fixed position in css, is based on the users viewport. A fixed postion element stays in the same place on the users screen, even when the user scrolls.

below is how w3 schools describe fixed positioning:

Sticky Positioning

Sticky elements, stick to the users viewport.

Here’s an example, the heading “do you know all about sticky element”:

source

source

One final, pratical example of positioning :

CSS Grid with Image and Text Side by Side Example

Here’s another example from css-tricks.com

Grid and flexbox are classed as layouts, rather than positions, which is kind of rubbish (according to my Dunning Kruger opinion) in that you use them to position elements.

CSS – Measurement Units [2022]

css measurement units

https://www.udemy.com/course/css-bootcamp-master-in-css-including-css-grid-flexbox/learn/lecture/10772490#overview

Some HTML elements have default sizes. For example, default for paragraph (<p>) text, is 16px.

You can change the size of text with the “font-size:” property in CSS

Relative Sizes in CSS

Relative sizes and measurements are a bit confusing to us newbies.

The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as text-indent: 1.5em and margin: 1em are extremely common in CSS.

https://www.w3.org/Style/Examples/007/units.en.html#:~:text=The%20em%20is%20simply%20the,sizes%20will%20be%20in%20proportion.

Using an em value creates a dynamic or computed font size (historically the em unit was derived from the width of a capital “M” in a given typeface.). The numeric value acts as a multiplier of the font-size property of the element on which it is used. Consider this example:

p {
  font-size: 2em;
}

In this case, the font size of <p> elements will be double the computed font-size inherited by <p> elements. By extension, a font-size of 1em equals the computed font-size of the element on which it is used.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

If a font-size has not been set on any of the <p>‘s ancestors, then 1em will equal the default browser font-size, which is usually 16px.

So, by default 1em is equivalent to 16px, and 2em is equivalent to 32px.

If you were to set a font-size of 20px on the <body> element say, then 1em on the <p> elements would instead be equivalent to 20px, and 2em would be equivalent to 40px.

In order to calculate the em equivalent for any pixel value required, you can use this formula:

em = desired element pixel value / parent element font-size in pixels

For example, suppose the font-size of the <body> of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

The em is a very useful unit in CSS since it automatically adapts its length relative to the font that the reader chooses to use.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

Percentage

When the font-size is specified as a percentage, it is relative to the parent element’s font size

Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

You can use percentage values. They act like em values.

The value is relative to the parent‘s font-size.
As a result, the value will cascade if used on child elements.

Rem

The value is relative to the root element‘s font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

https://cssreference.io/property/font-size/

VH – Viewport Height

The viewport is the browser window size.

1vh will mean that the element or font will take up 1% of the viewport/browser window.

height:100vh, will mean the element, font etc will be 100% and take up the height of the entire browser window

Viewport width, is “vw”

You can set width, for example the width of a background to a percentage of the width of the user’s browser window. For example
width:50vw; will take up 50% of the width of the screen.

If you want to learn more, video below is decent:

CSS Pseudo Classes & Pseudo Elements for beginners [2022]

Pseudo classes – define a special state of an element – for example a:hover (when a mouse pointer is over an element)

Pseudo elements – define the style for a specific part of an element. Pseudo elements use two colons , for example h1::after

Pseudo class examples

a:link pseudo class, defines the normal state of a link – i.e. before someone interacts with it.

a:visited pseudo class, defines the state of the link text when it has been clicked.

a:hover pseudo class defines what happens to the link text when the mouse hovers over it

a:active psuedo class, defines the text link colour when it is clicked

Drop Down Menu Using Pseudo Classes

One really cool thing you can do with pseudo classes, is to create a drop down menu.

W3 school lets anyone, yes anyone! use drop down classes, to create, well, drop down menus. The legends.

In the codepen example above, I just put all this in my HTML, no CSS required. Madness.

<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Dropdown Button</h2>
  <p>Move the mouse over the button to open the dropdown content.</p>
  <div class="w3-dropdown-hover">
    <button class="w3-button w3-black">Hover Over Me!</button>
    <div class="w3-dropdown-content w3-bar-block w3-border">
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

Lists Styles

Apparently, list items are selected using “pseudo-selectors”.

By default lists include bullet points.

Use the – list-style-type property to change the style/numbers etc for each list item.

list-style-type: none – will remove any of the styles from the list – no bullet points or numbers etc.

If you want to style individual list items;

For example – ul li: first child { color:red; } will make the text of the first list item, red.

ul li: nth-child (3) { color:blue; } is another method (it’s actually a “CSS method” in technical terms), that in this case, will color the 3rd list item text blue.

Pseudo Elements

define the style for a specific part of an element. Pseudo elements use two colons , for example h1::after

Pseudo elements can be used to, for example, to style the first letter or line of a specific element

Insert content before a specific element

W3schools have some good info on pseudo elements here.

Some examples in the codepen below:

Before content

h1::before {

content: “this is a before thingy”;

color : green

before psuedo element, will put text before a specific element, there’s also “after”, which as you’ve probably guessed, places the content after the element.

CSS Basics – Inheritance (Beginner Level) 2022

CSS styles can be passed down to “children”, that is elements that are contained within an element.

For example, below, <body> has the children of “heading” or “H1” and “paragraph” or “p”.

<body>
 <h1>heading</h1>
 <p>paragraph</p>
<body>


If we add a style to the body, and there are not specific styles added to the H1 or the <p> elements, they will “inherit” the style from <body>

<style>
 body {
 color: red;
 }
</style>


If the above code is added our webpage (or in a linked-to CSS sheet), and there is no specific styles given for the heading or paragraph, they will both be red.

heading

paragraph

Screenshot from Udemy – https://www.udemy.com/course/css-bootcamp-master-in-css-including-css-grid-flexbox/learn/lecture/10708474#overview

CSS Grid for Beginners [2022]

CSS Grid allows you to layout items in 2 dimensions. It is similar to Flexbox but in 2D, instead of 1D (apparently).

You have a grid container, like in Flexbox. It is like a square perimeter around all the items or elements.

Grid has lines or tracks between the elements.

Getting Started with CSS Grid

You’ll want a code editor thingy, like Sublime Text, Visual Studio or if you’re old school, Notepad.

The easiest way to do this is to use codepen, but if you have Visual Studio, that’s ideal as you can test your code in real time.

Unless your using inline styles, you’ll want to create an HTML doc and a separate CSS sheet.

  • Getting started

If you want to follow along, you’ll want to add the <HTML> tags to declare you’re created a webpage with HTML, and add a <head>, a page title in <title> </title> tags and a <body> to add your content.

You should then save the HTML doc as something like “index.html”, just make sure it has .HTML at the end of the name.

In a separate doc/sheet, create your style sheet and save it as “styles.css”

You can then link to/connect your HTML doc to your CSS sheet in the <head> of the HTML doc with the code in bold:

<html>
 <head>
 <link rel="stylesheet" href="styles.css">
 <title>Grid Example</title>
 </head>
 <body>
 
 </body>
</html>
  1. In your HTML, create a container to wrap all your items in.

You can create a div to wrap all your items or elements within*

<div class = "grid-container">

2. You also need a div (or tag of some kind) to put yo grid items in

<div class="grid-item grid-item-1"> </div>
<div class="grid-item grid-item-2"> </div>
<div class="grid-item grid-item-3"> </div>

So now your HTML doc should look something like this:

<html>
 <head>
 <link rel="stylesheet" href="background_styles.css">
 <title>Grid Example</title>
 </head>
 <body>
  <div class = "grid-container">
   <div class="grid-item grid-item-1"> </div>
   <div class="grid-item grid-item-2"> </div>
   <div class="grid-item grid-item-3"> </div>
  </div>
 </body>
</html>

In your Styles.css sheet, you now need to declare the CSS Grid stuff.

.grid container {
 display: grid;
}

The code above just tells CSS lords that you are going to use grid, now you need to style the columns or rows.

We’ll declare the grid column sizes. You can use pixels, rems, percentages and all sorts. Pixels is prob the easiest.

To create a table/grid with 2 columns, the first being 200px wide and the second 100px, use the CSS code:

.grid container {
 display: grid;
 grid-template-columns: 200px 100px;
}

Because we declared 3 grid items in our CSS, the 3rd item will be put onto a second row:

css grid example

CSS Grid Fractions

People like to use “fractions” for CSS columns. Keeps things relative and simple.

.grid container {
 display: grid;
 grid-template-columns: 2fr 1fr;
}

The code above, would produce the same output as the first example.

we’ve used a total of 3fr’s. 2 thirds are used to set the width of the first column, and 1 third for the final column.

CSS Grid Repeats

If you wanted to have 4 columns, all 100px wide, instead of typing 100px out x 4, you can just use the repeat command (

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 100px);

CSS Grid Auto-Rows

If you don’t know how big your table or whatever will be, you can use:

grid-auto-rows: 150px;

Now, all the rows that are created, will be 150px tall

If you want to make sure you content, copy or images or whatever, fit in the rows, you can use the MinMax thing.

grid-auto-rows: minmax (150px, auto);

CSS Grid Gaps

If grid is a table, then the gaps are the thicknesses of the lines of the table.

You can use “grid-gap: 10px;” to set both the row and column gap width, or

grid-row-gap: 20px;
grid-column-gap:10px;

To set the row gaps to 20px and the column gap to 10px.

Grid template areas

You can name and define different rows with “grid template areas”

CSS sheet


.grid-container {

grid-template-areas:
 
   "header header"
   "sidebar content"
   "sidebar content"
   "sidebar content"
}

More info here – https://www.w3schools.com/cssreF/tryit.php?filename=trycss_grid-template-areas3

The video should start at the grid template areas section:

Grid Alignment

Works similar to flexbox when it comes to aligning items.

  justify-content: center;

justify-content: center; will place all the items in the middle of the page

Centred Grid

To place the content to the left:

  justify-content: start;
justify-content: space-evenly;

Space-evenly, will spread the grid items evenly across the page:

*Everyone tends to use divs, but according to W3 (the internet police) you should be using divs as a last resort. More info here

Instead of <div class =classname>, you could for example, use <article class=”classname”> or <section class = “classname”>

***Remember to add specific styles to the .grid-container in the CSS sheet, and text-specific styles, such as text-align, in the grid.item styles section***

E.g. put this in the .grid-item styles, not the .grid-container:

.grid-item {
background: green;
text-align: center;
}

Styling a Single Grid Item

Let’s say you have made a grid, with 6 items, but you want the first one to be different to the rest. Probably the easiest way to achieve this, is to add a “.grid-item-1” styles section, below the CSS you’ve created for the rest of the grid items.

CSS Grid Layout Generator

The Grid Layout Generator that I find easiest to use, is the try it yourself grid layout tool on w3 schools – https://www.w3schools.com/css/tryit.asp?filename=trycss_grid

I find it easier, as the HTML and CSS is divided nicely to .grid-container and .grid-items.

I made this by copying and pasting the code from the W3schools try it yourself grid tool and adding column and row gaps.

If you use the W3 try it yourself tool, remember to click “Run” on the top left, as the code doesn’t update real time.

css grid equal height rows

If you add the value/property thing in CSS, to the .grid-container section of the CSS (assuming you’ve named the class of your container .grid-container) to “grid-auto-rows: 1fr;” – then all the rows should be equal height. Or you could just set the heights to 100px each

css grid background color

In this codepen example, the line

 background-color: #2196F3;

sets the background colour to blue.

How to use Inspect Element in Chrome [Dev Tools]

I’ve made some notes on how to use the Inspect Element Tool – AKA Chrome Developer Tools.

Sorry about the change in layout for the images, I drafted this post on various computers and devices and used different software to annotate the screenshots.

The main thing that I use inspect element for at the moment, is to work out what’s cuasing

finding white space issues with dev tools

To launch Inspect Element right click and from the drop-down menu that appears, click “Inspect” at the bottom.

When you hover over any element, such as a H1 in the inspect-window, the element will also be highlighted in the view of the webpage.

  • The small horizontal bar shows the location of the element you’re hovering over or selected

Elements > Styles Tab

The styles tab, shows you the styles, or CSS for any element you’re hovering over on the webpage.

You can turn styles off and on, using the check box

on the opposite side of the style, it shows the location, or path of the CSS file

  • I use this tab a lot to find out where spacing i.e. margins and padding is coming from – if it’s not from the individual element, that I can click on the container (usually a “div) and check the marings and padding values on that.

  • You can also turn CSS styles on and off – a checkbox will appear next to each style when you hover over it
  • Right click – copy element – and you can paste headers, images etc into another location on the page
  • You can click & drag elements too

You can also search for specific styles using the box shown below:

search for styles in inspect element

-Computed Styles Tab

Computed styles, are the result of all the CSS in the Styles tab.

You can also clock the + icon to the right of .click, to add a new style to the elements tab. Remember to copy the css if you want to keep itz or you’ll lose it when you refresh the page.

You can use the horizontal box near the middle to search for styles and elements

inspect element search

– Forced Element State

With the Forced Element State menu open, you can tick different boxes and check how an element appears – for example a link, when it’s been clicked, or hovered over with the mouse.

– Console Tab

I’ve never got my head around this tab, but here goes.

  • In the console tab, you can see all the Javascript and console log messages
  • Can use it to check code is working, for example any “if/else” code, you can check which “option” your code took
  • You can also see error messages

According to one of the tutorials I’ve read, this works best when running a code tool like Visual Studio. You can link up Visual Studio and test out your Javascript code real time.

  • Refresh the page whilst you have the Console Tab open, you can check the console tab for any error messages
  • You’ll likely get a load of error messages if you have an Ad Blocker extension
  • You’ll get warnings and “violation” messages in yellow if you are using out of date frameworks or libraries e.g. JS
  • The “no entry” icon will clear the console messages

The two Youtube tutorial below, should start at the sections talking about the Console tab:

  • You can run your own JS in the console tab. For example type “alert(1)” and click enter, you’ll get a pop up with the text “1” within it
  • If you type in code, the line below will usually give you the return value.
    E.g. if you type “1+3” the return value will be “4”
  • “undefined” means there is no return value
  • $0 will return the last item you selected, $1 returns the second to last item you selected, $2 the third to last, etc.

console code inspect dev tools

Editing HTML in Visual Studio or another Code Editor

  • You can also type code into the “webpage window” to the left, in this example:

**You will probably have to refresh the page to see the code output if you don’t have a visual studio plugin**

Network Tab

In this tab, you can see every element, and when it has been loaded

Using the “time bar” at the top, you can click and drag over different time periods and see what loaded.

For example, you can see what took the longest to load

  • You may have to refresh the page for this to work ‘properly’

Sources Tab

In the sources tab, you can navigate different files related to the webpage.

If you are on the homepage, clicking “index” will show you all the HTML code

It’s good for trying to fix code without editing to source files

Lighthouse Tab

You can analyse page speed and performance here.

Alternatively, you can add the Lighthouse Extension for Chrome

Mobile Preview in Chrome Dev Tools

Click the mobile icon, and then choose a mobile device from the drop down menu to preview your webpage in a given device.

For a much more comprehensive (and better) guide, check out Google’s official documentation – https://developer.chrome.com/docs/devtools/overview/

CSS Selectors – A Beginner’s Guide [2022]

Hello, I’m having another go at learning code. I’m an SEO Executive but have been coding quite a few of our SEO-related pages in my day job.

Plan is to do courses on Udemy, then create a blog post about them and do an example. I’ll probably have to do the example on Codepen as I can’t embed code in the free WP blog.

 

CSS selectors, are used in CSS style sheets to determine what styles to apply to what HTML elements.

In Line CSS (bit chavvy)

  • You can apply CSS inline – i.e. just add it onto an HTML element
  • 
    e.g. <H1 style = "margin-bottom 0px;"
    

    CSS in Script Tags

    • You can add it, somewhere on the HTML doc within <style> </style> tags
    <html>
    <head>
    <style>
      h1 {color:red;}
      p {color:blue;}
    </style>
    </head>
    

     

    CSS in an external Style Sheet

    Usually the best solution, is to create a separate Style Sheet

     

    To do this you need a line of code (or markup) linking the HTML doc to the CSS sheet.

     

    For example, if you save and name your stylesheet as styles.css:

     

    <!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" href="styles.css">
    </head>
    

     

    Best practice is to put all your styles in a separate stylesheet. Dunno why, just go with it for now.

    If you put your CSS in script tags, or in a stylesheet, you’ll need to use Bo selectors.

     

    • Imagine you’re a parent.
    • HTML elements are your kids
    • The CSS style sheet are the instructions you’re giving to the baby-sitter on how to look after your kids. 

    Great analogy, I know.

    You can be an overprotective, bit of a bellend of a parent and use inline CSS to give you micro-management and control over your kids, but you generally don’t want to do that.

     

    Types of CSS Selectors

    ID & Class selectors are the most commonly used. Class selectors for sure. But I’ve listed class selectors second, just to be annoying.

     

     

     

    ID selectors

     

      • Id selectors use a hashtag, like Twitter but it’s not full of political wankers and Chinese bots – #
      • Use these selectors sparingly, class selectors usually work better/are preferred. 
      • If you run the codepen below, hopefully you’ll see that I’ve selected only the first ID, and made it blue

      • ID selectors are specific and therefore override more general selectors

    Class Selectors

    • The most commonly used type of selector
    • very versatile
    • Well supported in most browsers – probably all browsers except for like IE 6
    • You can add multiple classes to an HTML element, so you can style it multiple ways with a class selector
    • If you run the pen below, you should see the first class coloured pink

     

    Tag Selectors

    • HTML tags like <h1> and <p> can be targeted directly with tag selectors
    • Tag selectors are sometimes used to unset styles that browsers set by default
    • Tag selectors are not so popular. Stick with class selectors if possible. 
    • Just type the name of the tag e.g. H2 and then open curly brackets, add style and close brackets

     

    Attribute Selectors

    • The value within your HTML tags is called an attribute
    • You can target them directly with CSS attribute selectors

     

    Positional Selectors

    – Decent type of selector when trying to style individual elements of a list or div
    – To style the second item on a list – prefix the CSS with “li”:

    li:nth-child(2)

     

    Here’s a cool CSS Cheat Sheet / infographic

     

    CSS Cheat Sheet

    CSSslectorsCheatSheet

    Image source

     

    For a much better tutorial about CSS selectors visit – https://css-tricks.com/how-css-selectors-work/

     

     

    Here are some more selectors from the quiz on the CSS Bootcamp course on Udemy

     

     

    CSS selectors