After 4 years of this website basically sitting on the sidelines, it’s time to start updating the content and sharing some of the knowledge I have learn’t over the last years.
Since 2019, I have been building up a design team for a large consulting firm from the ground up. I will aim to share my experiences and some of the learnings from this process over the next few months.
More to follow soon
This section focuses on the border property and will explore border styles, weight, colour and how to apply images and gradients to borders.
Borders are part of the CSS box model and can be applied to all fours sides of an HTML element.
You can find out more about the CSS – Box model in a previous section.
To add a border we must always define the width of the border, we can also define the style and colour of the border.
The result shows the position of the default border around our block of text.
We can use display:inline-block to make text an inline element, this will make the border fit around the text, as shown below.
To adjust the space between the headline and the border we add padding. In the example below, padding:30px is used to add space on all sides.
The border has three main properties – the border-width, the border-style and the border-color.
Each of these properties can be combined into the a single shorthand border property using the following syntax:
Using CSS shorthand is a great way to reduce the amount of CSS we need to write. The example below shows we can combine three properties and values into a single line of CSS.
Let’s explore in detail the three main border properties border-width, border-style and border-color.
Border width adjusts the width of the border to any or all sides of an HTML element. The size of the border can be adjusted using either thin, medium, thick, absolute values (pt, px, pc etc) or relative values (%, rem, em, etc).
border-width:thin;
border-width: 5px;
border-width: 0.75rem;
Border width can be set on each side using the following syntax:
We can also use shorthand to add different border widths to each side using the border-width property.
Below are examples of these different shorthand border-width properties.
border-width:5px;
border-width:5px 10px;
border-width:5px 10px 20px;
border-width:5px 10px 20px 40px;
The border-style property is used to adjust the visual appearance of the border. The default border style is solid, other styles included dotted, dashed, double, groove, ridge, inset and outset.
Below are examples of all border styles:
border-style:solid;
border-style:dotted;
border-style:dashed;
border-style:double;
border-style:groove;
border-style:ridge;
border-style:inset;
border-style:outset;
Please note some of these borders styles vary depending on the user agent (browser), so use the above examples only as a general guide.
The border style can be defined on each side using the following syntax.
We can use border-style shorthand to add different styles to each side.
The examples below show how different styles can be applied to each side using the shorthand border-style property.
border-style:solid;
border-style:solid dashed;
border-style:solid dashed dotted;
border-style:solid dashed dotted double;
Most HTML elements have a border-style set by default to none, which means than no border is applied to the element.
Setting the border-style value to hidden, border-style:hidden; will make the border invisible but preserves any space it would occupy.
Colour can be applied to borders using border-color, this works with named colours, RGB, RGBa, HSL, HSLa or HEX colour values.
Like border-width and border-style, we can target each side of the border using the following syntax:
We can use border-color shorthand equivalent to target the colour applied to each side.
border-color: blue;
border-color: blue rgb(255,0,0);
border-color: blue rgb(255,0,0) #00FFFF;
border-color: blue rgb(255,0,0)
#00FFFF hsla(0, 0%, 0%, 0.5);
The border-radius property allows a rectangular element to be displayed with rounded corners.
Each corner of the element can be targeted using the following syntax:
The shorthand equivalent can be used to target each corner with absolute or relative values using border-radius. These values follow a clockwise direction starting from top-left corner.
border-radius: 50px;
border-radius: 0px 50px;
border-radius: 50px 25px 0px;
border-radius: 50px 25px 10px 0px;
These examples show how border-radius can adjust the corner of our HTML element and we can also use border-radius to turn rectangles into ellipses and squares into circles.
We already know that by adding border-radius value above 0, we will create a rectangle with rounded corners.
If we apply a border-radius above 50% of the height and width of an element then it will create either an ellipse or a circle depending on the proportions of the element.
To create a circle we add border-radius:50%; to a square element.
border-radius:0%;
border-radius:33%;
border-radius:50%;
The border-image property can be used to add either an image or gradient fill to a border.
Firstly, we look at adding an image to the border which uses the following four properties:
In the examples below, we will explore these properties in order to make a border with stars.
The border-image-source: url(…) property is used to link to the image used in the border.
Images used in border are divided in 9 slices, these are the four corners, the four sides and the center.
To make a border of stars we need to create an image using multiple stars, as shown below. 
The grey stars are used to illustrate how the image is displayed on the sides, we don’t need a star in the center as this is where the content will be.
The border-image-slice property is used to define the position of the corners and sides of the image, in the example above this is 33.33% (one third).
Each corner (blue stars) of our image is in a fixed position, the sides (grey stars) are dynamic and can be repeated or stretched using the border-image-repeat property.
The border-image-width property defines the width of the border image.
The border-image-repeat property defines how the sides of the image are displayed. Four values can be used stretch, space, repeat and round.
Stretch
This stretches the image slices on the top, left, right and bottom sides. Stretch is the default value for border-image-repeat.
border-image-repeat: stretch
Space
This repeats the image slices on all sides and adds an equal amount of space between each slice.
border-image-repeat: space
Repeat
This repeats the image slice on each side without stretching or distorting the image.
border-image-repeat: repeat
Round
Repeats the images on each side, stretching and distorting the image to fill the available area.
border-image-repeat: round
The border-image property can be combined into shorthand using the following syntax:
The border-image-outset property can be used to move the position of the border image outside of the box content.
The border-image property can apply a gradient to the border.
We use the following syntax for the a gradient border fills:
We can use shorthand properties:
So how do we add
Below are examples of the border gradient.
Border Image - Linear Gradient
Here is an example of a repeating-linear-gradient border, complete with free optical illusion.
Border Image - Repeating Linear Gradient
To learn more about Gradients visit the previous section CSS – Color where we explore in more detail linear gradients, radial gradients, repeating linear gradients and repeating radial gradients.
The outline property is not part of the border property but is included here as it can apply a similar visual effect. An outline will add a line around the outside of the border on all sides.
Although similar, outlines and borders have some key differences between them.
Outlines are not part of the box model and therefore they will not alter the position of an HTML element.
Outlines are applied equally around all sides of an element, so you can’t specify different values for each side like you can with borders.
Outlines can be styled using the following syntax:
The shorthand outline can be used to combine all these properties.
solid red border with blue dashed outline
The example above shows a dashed outline in blue on the outer edge of the HTML element’s red border.
Visual space can be added between border and the outline using the outline-offset property, this adds an equal amount of space on all sides between the HTML element and the outline.
outline with 10px offset
The example show how a 10px space is added between the HTML elements outline and the border.
We have now reached the end of this section which covers the main elements of the border and outline properties. Next we look at fonts and typographic styling.
Next step
CSS – 5 – Fonts
Here we explore the different types of colour values and how to add colour, gradients and shadows to elements.
The most common way to add colour is to use the color property to apply colour to the foreground object (text).
The above CSS would style all paragraph texts in blue.
To change the colour of an area we use background-color property.
This CSS makes the background colour of our paragraph text light grey.
We can also change the colour for the border of an element using border-color property.
The colour of the border can also be defined in the border property, as illustrated in the last section border:2px solid blue;.
A number of different colour values can be used in CSS.
We have already used the named colours, blue and lightgray in the examples above. CSS recognises 140 named colours, each with its own unique name.
16 named colours were first introduced in 1999 with practical and simple colours like red, blue, black and white. As more colours were introduced the names became more complicated and colours more obscure, such as aliceblue, lavendarblush and palegoldenrod.
Named colours may be limited to 140 colours but we can specify millions of colours if we use RGB, RGBa, HEX, HSL or HSLa colour values.
RGB colour is the mixture of Red, Green and Blue coloured light.
Each of these three colours can have a value from 0-255 which defines the intensity of the colour. This combination of red, green and blue colours allows us to specify 16,777, 216 colours.
Red is produced when the colour values are set to 255, 0, 0, blue when colours are set to 0, 255, 0 and green when colours are set to 0, 0, 255.
White is produced when all three colour values are set to 255, 255, 255 and black when the values are set to 0, 0, 0.
The above RGB colours values display the same colour blue and light grey as the named colours used in the previous example.
RGB colour values can also be added as percentages, the below percentage colour values produces the same blue and light grey colour.
RGBa uses the same colour values as RGB but adds an additional value a, an alpha channel to specifiy the opacity of the colour. The alpha value is a numberical setting from 0.0 (transparent) to 1.0 (opaque).
The above CSS would display a 50% transparent blue colour and the background light grey colour would be 20% of the full strength colour.
HEX colour uses hexadecimal numbers to define the red, green and blue colour values. HEX colour is specified using the hash symbol (#) followed by a combination of six numbers (0-9) or letter (a-f). The first two digits represent the red colour, followed by two blue and two green digits color:#RRGGBB.
The above HEX colours produce the same blue and light grey.
HEX colours can be written in shorthand when a HEX number contains three double-digit numbers, for example, black #000000 can be written as #000 and white #fff is the same as #ffffff.
Both the above colour values display the same blue colour.
HSL defines a colour using Hue, Saturation and Lightness.
Hue is the degree of colour on a colour wheel (0 to 360 degree). Red is 0 or 360 degrees, green is 120 degrees and blue is 240 degrees.
Saturation is the intensity of the colour as a percentage from full colour (100%) to grey (0%).
Lightness is displayed as a percentage from white (100%) to black (0%).
Here we use HSL to define the same blue and lightgray colours.
HSL is a much more intuitive colour system than HEX and RGB. Once a colour is defined, it can be made lighter and dark simply by adjusting the L (Lightness) values and by altering S (Saturation) values we can make the colour more intense or muted.
HSLa includes an alpha channel Hue, Saturation, Lightness and alpha, which functions in the same way as the RGBa alpha channel, where 0.0 is fully transparent and 1.0 is opaque.
Here we use HSLa to define the blue with 50% transparency and lightgray colours with an 80% transparency.
Each of the colour values has its own benefits, so the answer depends on what you are using the colour for.
Named Colours – These can be quick and easy to use when developing a small project or testing a concept.
HEX – With over 16 million colour combination this is great for solid colours but it has its limitation as it doesn’t allow for transparency.
RGB/RGBa – RGB has all the advantages of HEX but if we use RGBa then we also have the added benefit of transparency.
HSL/HSLa – is much more intuitive than RGB and HEX as you can adjust the lightness and darkness or saturation values for a colour in order to create matching shades and tones. Additionally, HSLa allows for transparency which makes it a great alternative to RGBa.
We have looked at adding solid colours to text, backgrounds and strokes, now we look at how we can use gradients to smoothly blend two or more colours using CSS.
Gradients smoothly blend one colour to another, the values of these colours can be solid or transparent, the direction of the gradient and the shape of the gradient can be defined using CSS.
Linear gradients blend one colour to another in a linear direction. The syntax for a linear gradient is background:linear-gradient(direction or angle, start colour,..., end colour). The default angle for the gradient blend is top (start colour) to bottom (end colour).
The result shown above is a gradient of red to blue on a 45-degree angle.
Gradients can have more than two colours by simply adding more colours to the linear-gradient. For example, background: linear-gradient(45deg, red, blue, green, yellow); will create a 45-degree gradient of red to blue to green to yellow, each colour will be spaced equally across the element.
Gradients colours can have specific start and end positions which allow for more control over how the linear gradient will look. These positions are added after the colour value and can be defined using absolute or relative values.
The 90-degree gradient above uses three relative values, where red appears at 10%, blue at 30% and cyan at 60%. From 0-10% the colour is red, likewise, from 60-100% the colour is cyan.
Gradient can use transparent colours, which results in some interesting visual effects, especially when transparent gradients are placed over other elements or adding multiple gradient on top of each other.
The above element features three linear gradients placed on top of each other. Each gradient uses a different angle. RGBa colours are used for the gradients with the start colour being solid and the end colour being clear. The 50% value for each end colour sets the transparency to the centre of the element, creating this interesting visual blend of colours.
Gradients can be repeated using the repeating-linear-gradient property. Repeating linear gradients needs positional values adding to each of the repeating colours. The values and positions of these colours are then repeated across the gradient.
The above repeated linear gradient includes the start and end position for the first three colours (red, blue and cyan) which are defined in pixels (px). These colours are then repeated across the whole rectangle.
In the above example, the end position of one colour and the start position of another colour are the same which makes the gradient appears as a series of solid colour.
Radial gradients define the colour gradient from the centre to the edges of an element. The syntax is background: radial-gradient (shape size at position, start colour,..., last colour);.
The gradient shape is either an ellipse or circle. The ellipse is the default setting which creates an elliptical gradient that matches the shape of the element. The circle shape creates a gradient with a consistent circle blend from the centre of the element.
Like linear blends, radial gradients can include multiple colours by adding more colours to the radial gradient property background: radial-gradient (circle, colour1, colour2, colour3,...);.
The size of the gradient can be controlled using the closest-side, farthest-side, closest-cornerand farthest-corner to define where the gradient will end.
The position of this blend can be altered by defining the horizontal and vertical start position for the centre of the radial-gradient.
The above radial-gradient sets the gradient to the farthest-corner and positions the starting point as 10% from the left and 20% from the top.
To produce a repeating radial gradient we use repeating-radial-gradient, which defines the repeating gradient from the center of the radial gradient.
Here the centre of the repeating-radial-gradient is a circle positioned at 40% from the left and 80% from the top of the rectangle. The radial gradient repeats red and blue from the center.
We can add depth to our elements using the text-shadow and box-shadow properties.
The text-shadow property is used to add shadow to text elements.
The syntax for this is text-shadow: horizontal-position vertical-position blur-radius color. Adding positive values to the text shadow positions will position the shadow to the right and down, negative values will position the shadow left and up. Blur radius defines how soft the shadow is, by default the text shadow is a solid copy of the text.
The three examples above show how the shadows can be defined to create different visual effects.
The box-shadow property is used to adds shadow properties to an elements.
The syntax is box-shadow: horizontal-position vertical-position blur-radius spread color. Most of these properties are similar to text shadow, horizontal-position and vertical-position are used to define the position of the shadow, blur-radius is used to define the softness of the shadow and spread is used to define the size of the shadow.
The above example adds a solid blue shadow 5px to the right and 5px from the top the white block.
This example uses a transparent shadow defined by the alpha colour of rgba(0,0,255,0.5) and uses a 5px blur to create a soft edged shadow positioned 10px right and 10px down.
This example uses a more transparent shadow rgba(0,0,255,0.2) with a larger blur and a 5px spread which increases the size of the shadow.
Box shadow can also add a shadow to the inside of the element by adding inset to the box-shadow syntax.
The above examples show an inset box with a 15px soft blue shadow, this is inset 5px from the left and 5px from the top.
This section introduces colour and explores the potential with some basic examples. and more examples will be used in the following sections.
In the meantime here are some great CSS colour resources and tools to explore:
htmlcolorcodes.com
Use this tool to explore your perfect colours and create your own colour palette with colours in HEX, RGB and HSL values.
cssgradient.io
Make your own gradients with this free awesome online tool. Make sure you explore some of the other great resources and examples they have.
css3 patterns
Here is a mind-blowing gallery showing what is possible applying multiple gradients to create some elaborate background patterns.
shadow generator by mozilla
Experiment using shadows and altering, colour, positions, blur softness and size. Click the + button to add another shadow, yes – multiple shadows… have fun.
Next step
CSS – 4 – Border
HTML elements are contained within rectangular boxes, in CSS this is referred to as the box model.
Each HTML element has a box which wraps around the outer edges of the element. At the centre of this box is the content which is surrounded by padding, border and margin.
Content
The content is the area where text or an image is positioned.
Padding
The padding is a clear area around the content. Padding defines the distance between the content and the border.
Border
The border is a visible element around both the content and padding.
Margin
The margin is the transparent space between the HTML element and other HTML elements.
Let’s see how these properties can be applied to a <h1> headline.
<h1>CSS Headline<h1>
h1 {
width: 240px;
color: blue;
background-color: white;
padding: 20px;
border:2px solid blue;
margin:50px ;
}
The first three properties of the CSS rule (above) are settings for the content, we apply a width of 240 px (pixels) to h1 element, set the colour of the text to blue and the background colour to white.
Following this, we add 20px padding around the content, a solid blue 2px border and then a margin around the border of 50px.
The border property has three values which are separated by space. Firstly we define the width of the border, followed by the border style (solid, dashed, dotted, etc) and then the border colour.
When we don’t want a visible border we set the width of the border to either zero 0 or use the value of none.
Browsers (user agents) set the default border value for most HTML element to null, so elements like headlines and text appear without a visible border.
Padding and margin both define a clear or empty space (whitespace).
Earlier we defined the padding and margin for an <h1> element using a single value (20px for padding and 50px for margin), both these figures are shorthand properties for adding an equal amount of space on all four sides (top, right, bottom and left) of the content.
Padding and margin can have different values on each side.
Padding can be controlled individually on all sides using the following syntax:
In CSS, shorthand properties save development time and minimise code.
We already know the shorthand properties for adding an equal amount of padding around our content.
Shorthand properties can also be used to add different padding values to each side. Values are applied in the following order top, right, bottom and left. To help remember this order, we should first add the top value and then work clockwise around the object to define each side.
Shorthand properties can also be written to add equal padding top and bottom, left and right.
If we use two values this will apply equal padding top and bottom and equal padding to the left and right.
Using three values we apply different to the top and bottom and an equal amount of padding to the right and left sides.
Shorthand properties seem complex at first but once mastered can be used on different properties in a similar way.
Margin properties use a similar naming structure and shorthand properties for values as padding.
Margins, unlike padding, can have a negative value.
To define the size of the content we use the width and height property.
This size relates only to content, so any padding, margin and border will be added to the overall size of the element displayed.
To calculate the width on an element we add the left margin + left border + left padding + content width + right padding + right border + right margin.
Likewise, to calculate the height we also need to need to add all the values of the of an element – top margin + top border + top padding + content height + bottom padding + bottom border + bottom margin.
width: 50 + 5 + 40 + 600 + 20 + 5 + 50 = 770 pixels
height: 50 + 5 + 10 + 400 + 30 + 5 + 50 = 550 pixels
This obviously makes calcualting the size an element more complicated than it would first appear. Fortunately, CSS has an alternative way to define the box size using the box-sizing property.
The default CSS box model can be altered so that the dimension for the border and padding are included in the overall width and height dimensions of the box.
In order to do this, we have to set the box-sizing property to border-box.
Here we use the universal selector to make border-box a standard across all elements with our HTML document.
By default, box-sizing is set to box-sizing: content-box;
Setting box-sizing: border-box; is a great way to define content size as this makes life much simpler to calculate the overal size of an elements.
People use different devices (viewports) to view HTML content. Sometimes we need to restrict the size of the content being displayed on the different devices so that it looks and reads as it was intended.
We can use min and max sizing to set restrictions for the size of an element.
The above CSS defines maximum width of the paragraph at 600px. The paragraph maybe smaller than 600px but it will never appear larger.
The syntax for the min and max properties:
| max-height | Defines the maximum height | |
| min-height | Defines the minimum height | |
| max-width | Defines the maximum width | |
| min-width | Defines the minimum width | |
All the above CSS examples have used px (pixels) as the unit of measurement. This is called an absolute unit of measurement and one of many different types of measurement which can be used in CSS.
Absolute units are fixed measurements and include the following units:
| pt | Points | |
| px | Pixels | |
| pc | Picas | |
| mm | Millimeters | |
| cm | Centimeters | |
| in | Inches | |
Relative units change size based on the related size they are based on.
For example, if we have an element which 2em in size and one em is equal to 16px then the size of the 2em element is 32px, if we change the value of em to 20px then 2em will be 40px.
Relative units measurements include the following:
| % | Percentage relative to current size | |
| em | Relative to current font size | |
| rem | Relative to font at root level | |
| vw | Relative to 1% width of viewport | |
| vh | Relative to 1% height of viewport | |
| vmin | Relative to 1% height of viewport smaller dimension | |
| vmax | Relative to 1% height of viewport larger dimension | |
Responsive design uses relative units, especially em and rem, to make adjustments to content for different sizes of device.
More information on the different types of units can be found here.
Next step
CSS – 3 – Colour
Syntax is the arrangement of words to create sentences. In computer code, it is the arrangement of symbols and statements that create instructions in a computer language.
CSS rule consists of a selector, which targets a specific HTML element and one or more declarations used to style its content.
Declarations are placed between curly brackets/braces ({ }), the declaration block. Each declaration defines a property and a value. The colon (:) symbol is used to separate the property and value and the semicolon (;) finishes the declaration.
Multiple declarations can be added in between the curly brackets.
Even though the above CSS rule is valid, it is better to write each declaration on separate lines so they are easier to read.
CSS Selectors identify which HTML item will be targeted by the CSS rule.
Different types and combinations of selectors can be used to target different elements, classes and IDs within an HTML document.
The Element Selector is the most basic type of selector. To target an HTML element we use the elements tagname as the selector in CSS.
The ID Selector targets IDs within an HTML document. An ID selector is written with a hashtag (#) followed by the name of the ID.
Class Selectors target classes within the HTML document. To write a class selector, add a period (.) followed by the name of the class.
One selectors targets all element within the HTML document. This is called the Universal Selector and is written with an asterisk (*) symbol.
The Universal Selector is helpful to define the base styles for an HTML document, such as background colour, font, etc.
The Grouped Selector is used to target more than one element with the same CSS rule. To make a grouping of selectors we add the comma (,) symbol between each selector.
This CSS rule will display all h1-h5 headlines in blue and in the Work Sans typeface or a default Sans Serif system font if Work Sans is unavailable.
To target any element (child) nested within another element (parent), we first add the selector for the parent element followed by a space and then the child selector.
The above CSS rule would make all <p> paragraph texts within the <div> element blue and italic.
To target the direct child element of a parent element, which ignores other descendants of the parent element, we use the greater-than symbol (>) between the parent selector and the child selector.
This CSS targets all the child <p> paragraph texts directly nested inside the parent element and changes the colour of the text to gray and 20px in size. Any <p> paragraph texts within the parent element but nested within another <div> elements would be unaffected by this CSS rule.
To style an element which immediately follows another element we use the plus symbol (+) as the combinator between the two selectors.
This CSs would target the first <p> paragraph text following any <h1> headline and display this text in 18px and italicized.
The General Sibling Selector is similar to the Adjacent Sibling Selector but allows for more elements to be targeted after the first element. This combinator uses the tilde (~) symbol placed between the sibling combinators.
This would result in any <ul> unordered list following a <p> paragraph text, with the same parent, to display a list items in blue on a yellow background.
This CSS selector tester is a really useful interactive guide to show how different selectors can target different content within a webpage.
We will look at more Selectors in detail in later chapters, for example, the :hover pseudo-class selector which alter the appearance of an element only when the cursor hovers over it (mouses over).
CSS comments are super useful for designers/developers to add notes explaining what an area or line of code does and can be invaluable when returning to a project to understand what was written previously.
All CSS comments are ignored by the browsers, so whatever is written is only ever seen by designers/developers.
Next step
CSS – 2 – Box Model
CSS (Cascading Style Sheet) defines the look and position of the HTML content and how it is displayed on screen or other media.
Web browsers (user agents) apply their own default CSS styling to display HTML elements. When we write CSS rules we are simply replacing existing styling with new styles.
Multiple CSS rules can be written for the same element either intentionally or by mistake. To avoid any conflict on which styles will be displayed, CSS uses a cascading order where the last matching (or most specific) CSS rule is the one applied.
So if in our CSS, we add a rule to change all <h1> headlines to red and later we add another rule to make the <h1> headlines blue, then all <h1> headlines will appear in blue as this is last matching CSS rule.
<h1>Headline</h1>
h1 {
color:red;
}
…
h1 {
color:blue;
}
However, if we use a more specific CSS rule, then this will be the style displayed and not the last matching style.
<h1 class=”redtext”>Headline</h1>
h1.redtext {
color:red;
}
…
h1 {
color:blue;
}
Remember: the last or most relevant styling declaration is the one displayed.
CSS can be applied to an HTML element in 3 different ways.
Inline CSS adds styling directly to the body of the HTML. Inline CSS use the style="" attribute which contains the CSS declarations to style an HTML element.
Inline CSS should be avoided as it is not an efficient way to apply CSS.
The disadvantage with Inline CSS is that each element requires the styles to be added inside the HTML element. This makes the HTML document much more difficult to read and the CSS more challenging to update.
Internal CSS styles are declared in the <head> of a HTML document and applied to all items within the same document.
The advantage of using internal CSS is that the styles are written once at the top of the document. This makes them much easier than inline styles to develop and maintain.
The disadvantage of internal CSS is that large proportions of the CSS will probably need repeating in each document within a project. This can easily lead to visual inconsistency between documents during development and maintenance.
External CSS is an external document containing only CSS syntax. This CSS document is then linked to the HTML by adding a link in the <head> of the HTML document.
The main advantage of using external CSS files is that it is a single source of truth for the CSS which can easily be linked to multiple pages. As a result the external CSS files provide consistent style rules across all linked documents making development faster and future updates much easier.
CSS styles should be separated from the HTML content.
Using external CSS is usually the best method for adding CSS, but each project should be defined by the amount of work needed. For example, if you have a one-page website, you may choose to use internal CSS styles and place all CSS in the <head> of the HTML document.
Larger projects require more organisation and sometimes using more than one external CSS stylesheet can make CSS development and maintenance simpler and more efficient. For example, using one external CSS style sheet for global styles and additional style sheets for specific pages or elements.
Every user agent (browser) has default CSS styling, unfortunately, this styling is not the same for each user agent. As a result, before adding any of our own CSS styles we need to apply CSS baseline rules to create a consistent starting point for all browsers.
These are often called CSS resets and fortunately, some very nice people have developed and shared their own CSS resets online. Two of the most popular methods are CSS Reset by Eric Meyer and CSS Normalise by Nicolas Gallager and Johnathon Neal.
CSS Reset can be described as a hard-reset as it removes all default CSS styling and resets styling values to null. The designer/developer then need to add styling for every element they use within a project.
CSS Normalise is a soft-reset which creates a consistent look across browser but maintains some of the useful built-in characteristics provided by the user agents.
CSS Reset and CSS Normalise are usually added to a project as an external style sheet.
Next step
CSS – 1 – Syntax
After learning about HTML, it’s now time to look at how CSS can be used to give HTML some style.
The CSS section will be explored over the next 6 months. Notice the timeline is a little looser than HTML section, that’s due to some of these sections being quite lengthy and writing something in a simple clear way often requires many rewrites (a lesson learned from writing the HTML section). Also, my summer vacations will impact the timeline as I intend to be unplugged for a month.
I use Atom, a free open source text editor developed by GitHub. I find it works the best for me, but if you want to try something else you will find other free alternatives on the resources page.
Demos for the CSS will be added as needed, some probably using embedded pens from Codepen.
Codepen is front-end developer environment which you can use directly in your browser. It is a developers playground and has some wonderfully inspirational demos that you can lose a few hours looking at, visit it at www.codepen.io
These are the main subject areas for CSS section:
The introduction will explain the benefits of CSS and how to link an external CSS file to an HTML document.
This section will look at the CSS syntax and how to write CSS documents.
Boxes surround all HTML elements, here we look at how CSS can be used to target these areas and how that alters how an element is displayed.
Here we explore the different ways to apply colour using CSS.
Explaining the different type of borders and styles that can be applied to and HTML element.
This section will look at how to display web fonts instead of default system fonts and how to apply font styles.
After looking at fonts, we look at how to add icons using CSS.
We examine the different ways CSS can be used to style an image.
Here we learn how to use CSS to style the background of an HTML element.
After focusing on how CSS change the appearance of the HTML elements, we look at how CSS can reposition an element on the screen.
Flexbox enables HTML elements to be displayed across the screen either horizontally or vertically, here we learn how and when to use this property.
We examine this relatively new CSS property which allows HTML content to be displayed using grid structures and how these can be manipulated to reorder the HTML content.
Here we look at the display property and how we can use it make things magically disappear using CSS.
Websites need to be displayed on multiple devices, here we learn about using CSS to make responsive websites using media queries.
We discover how to alter the appearance of an element on the screen when the cursor moves over it or when it is clicked on.
Discovering what a pseudo element is and how it can be used to target specific parts of an HTML element.
Learning how to use the transition property to move an HTML element from a start position to an end position.
Beyond transitions, we explore how to use CSS Animation to add keyframes to animate elements in a more dynamic way.
Discovering how to use Variables to save time when writing CSS.
This section will explore popular current front-end frameworks such as Bootstrap, Foundation and Bulma.
Next step
CSS – 1 – Introduction to CSS
After completing the HTML part of this site I took a bit of pause from writing and enrolled in a Codecademy course – Build Website UIs.
This is an intensive course which teaches HTML, CSS and design principals mixed with tutorials and a final coding project. You spend on average <2 hours a day, 5 lessons a week for 8 weeks. This is quite intensive, especially if you already have a very busy schedule, but you can complete the lessons at your own pace within the 10 weeks and I found myself catching up in batches and at the weekends.
The course was super helpful for learning new skills quickly and in an organized way. By the time I had finished the course, I felt much more confident in the knowledge that I had already gained and understood clearly what more I needed to work on to reach my goals.
This is a premium course ($199 US dollars), which is not cheap, but if you have the time and the money to invest in yourself then it definitely worth taking a look at.
So now I have explained why I haven’t been writing for a while, it is time to start writing again. Next is CSS, which I am really excited to work on.
So that’s a quick guide to HTML.
HTML is relatively easy to understand and once you have learned the basics you can simply combine elements you have learned to create a functioning website.
If you are looking to expand your knowledge further, Mozilla is a great place to learn and one of the resources I used the most
https://developer.mozilla.org/en-US/docs/Web/HTML
You can find many places to learn how to code in HTML, I have tried both Codeacademy and Freecodecamp and they are great.
Codeacadmey
Freecodecamp
The best way to learn, once you have built up some knowledge, is through doing. So, go open your text editor and spend some time making simple HTML demos.
I hope that by sharing this it has helped you on your own journey to learn how to code. For me its time to take a look at CSS, so that I can make the design of a basic HTML page come to life with colour, layout, animation and other visual effects.
Semantics is the science of meaning. Semantic HTML is the writing of code to makes it easier for both humans and computers to understand the content within an HTML document.
Semantic elements replace non-semantic elements such as <div> and <span>, which are not descriptive, with more relevant terms.
Semantic HTML uses meaningful human terms to describe what an HTML element contains. For example, <header> is used to define content for the header of a page or section.
Semantic elements associated with document layout:
| <header> | the top of a document or section | ||
| <nav> | a group of navigation links | ||
| <main> | main content of a document | ||
| <article> | self contained article | ||
| <section> | defines a section within a document | ||
| <aside> | indirectly related document | ||
| <footer> | the base of a document or section | ||
Using these standardised semantic HTML terms makes markup easier to create, organise and maintain.
The diagram below illustrates how Semantic markup can be used to group and organise HTML content.
Semantic markup can be divided into areas which make the HTML document easier to organise.
Semantic elements can also be nested within other semantic elements. For example, a <header> element may have <nav> nested within it, a <section> and <footer> could also include a nested <nav> element.
<header><nav class="main-menu"><ul><li>Menu item</li><li>Menu item</li><li>Menu item</li></ul></nav></header><section><nav class="section-menu"><ul><li>Section menu item</li><li>Section meun item</li><li>Section meun item</li></ul></nav></section><footer><nav class="footer-menu"><ul><li>Footer menu item</li><li>Footer menu item</li><li>Footer menu item</li></ul></nav></footer>Search engines can better understand semantic markup as it uses standardised terms to describe the content. This makes it is easier for search engines to index content and deliver more accurate and relevant search results.
Semantic markup aids accessibility by helping screenreaders to understand which are the significant areas of content, especially when used in conjunction with Aria terms.
Semantic HTML markup should be used to make create a standardised HTML code which is simple to understand and can be easily shared with other designers/developers for any future updates.
Next step
HTML – 10 – Learning more