Function expressions are invoked to avoid polluting the global scope. Instead of your program being aware of many different functions, when you keep them anonymous, they are used and forgotten immediately.
To summarize, function declarations are utilized when you desire to establish a function in the global scope that can be accessed anywhere in your code. On the other hand, function expressions are employed to confine the accessibility of the function, reduce the weight of the global scope, and maintain a neat syntax.
flex:1 – for each of the boxes, makes them evenly distributed in terms of their width. As all the flex items are given a value of 1, they are all the same size.
If you were to change the flex value for .box-1 to 4, then box-1 would take up four-sixths (4/6) of the page:
Change the order of Flex Items
With flexbox you can change the order of the flex-items, (the boxes) without changing the HTML.
To do this use the “order” property.
The code below will put box-1 in the second position, left to right.
Flex-direction: Column
By giving the container the flex-direction property, with a value of “column”, the boxes / flex items will stack on top of each other
Justify-Content
You can use the “justify-content” property to align the boxes within the flex container.
justify-content: flex-end; will push all the flex items to the right
Justify-content:center; will place the boxes in the centre of the container
Justify-content:space-between;
Aligns the content spaced evenly across the entire width of the container, with margins in between:
Space-around will add some “space around” the items, so that they have margins in between the items and also to the sides of the left-most and right-most items:
Flex Grow
If after the dimensions of the flex-items have been set, they leave room or space, you can use the “flex-grow” property.
If you give each flex item a flex grow value of 1, then the items will take up an equal amount of the remaining space.
It could be 1, or 100, it won’t make a difference if all the items have the same value.
Below, flex item “one”, is the only flex item with a “flex grow” property, and it therefore takes up all the space that was left over from left to right by the 3 boxes.
One of the things I’ve found a bit of a ball ache as a developing developer, is sorting out spacing i.e. padding and margin issues when creating pages using Magento.
For example, let’s say I want to change the spacing above an image.
Best thing I’ve found to do to find the margin or padding that I want to change:
Right click on image – choose Inspect Element
In the “styles” tab of dev tools, look for margin and padding styles
In this instance, it’s not the image, or the images div or container that’s causing the spacing that I don’t want:
In this instance, I click on the “Div” or container, that the image resides within (the parent element)
Now I’ve found the issue with the spacing at the top that is too large:
I can now go into the stylesheet and amend the class “content-image section” or just add an in-line style to this individual incidence of the class, and change “margin-top” to something like 15px.
When you are inspecting an element in Chrome, Dev tools will also tend to highlight (in a dark shade) the spacing around that element too, so it shows you which element is generating the padding or margin.
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
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.
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.
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-index, top, left, right, 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
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”:
Block doesn’t appear to be a type of positioning in CSS, but I still see it a lot when looking at code and is kind of related to positioning, so thought I’d better cover it.
Most things are blocks. A paragraph for example is a block.
Block elements always stack on top of one another, even if they have room to go side by side, they don’t.
By default, bock elements have a default of 100% – meaning that they take up the whole width of the page.
The only thing that limits there width, is usually the parent element’s padding or margins.
Inline-elements, are a bit different, in that unlike paragraphs etc. they don’t create a new line. For example, a link uses an inline-block element:
You can’t add padding or margins to inline-elements.
Inline-Block
However! You can give margin and padding to an inline-block.
This can be a good block to use, if you don’t want an element, for example a button, to take up the entire width of the page.
For example, if you want to place three buttons in a row, you can use inline-block.
Grid Positioning Example
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.
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.
Using an emvalue 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.
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.
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.
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.
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.
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 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.
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:
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:
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.
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
Small Business Dad 