CSS Examples

Example 1: background and text colour

The default background colour and text colour has been changed within the CSS for the html element, creating a dark-mode style appearance.


Example 2: containers for examples

I have created CSS for a div with the class "container" to create a slightly lighter box than the main background colour which visually separates each CSS example. They fit the size of the contents, with a width up to a maximum of 50% of the window width. They also have a rounded border and a dropshadow to make them stand out more on the background of the page.
The width is also given a minimum, so that it isn't any smaller than 25% of the window.


Example 3: id changed element (heading)

I have made a change to the CSS for the above heading ("Example 3") which is given the id "head2-change-1" to make specifically this instance larger than a normal instance of the h2 element (see titles for above examples for reference of original size). I have also made the title a different colour to the default, to show that the override only changes the one h2 instance.


Example 4: alternate container using a different class

This example shows a separate div using the class "container2" which is the same as others except it is instead slightly darker than the background instead of lighter, the header colour is changed to aqua (as will all headers within a "container2" div) and all text within p elements within a "container2" div are automatically made bold.


Example 5: different ways to define colours

This example shows that colours can be defined in multiple ways, as in the CSS the names for each will be different colours and use the respective methods. The methods are Red/Green/Blue, hex code, Hue/Saturation/Lightness, Red/Green/Blue/Alpha, Hue/Saturation/Lightness/Alpha, and colour name. Colour can be applied to text, the background, to a border, or to many other things for different effects.


- Red/Green/Blue (or RGB) works by providing a value from 0 to 255 for the channels of red green and blue, which is how light combines into various colours as those are the primary colours of light (or "additive colour mixing"). This is also used by Red/Green/Blue/Alpha (or RGBA) but the added channel "Alpha" is used for transparency, with a value from 0.0 (completely transparent) to 1.0 (fully opaque).

- Hex code is one of the most used ways to describe colour for computers. It is seen as a # symbol followed by 6 "digits" of haxadecimal (numbers form 0-9 and letters from a-f to represent numbers from 10-15, with 10 in hexadecimal being the same as 16 in decimal). Each group of 2 digits is used for the same channels as RGB in order. So since the colour being used to represent hex codes in this example is #3aefeb it is equivalent to an RGB value of [58,239,235] which makes it the light blue/green colour that you see. Hex codes are also able to use the alpha channel by adding another 2 digits to the code, with higher values being more opaque and lower values being more transparent.

- Hue/Saturation/Lightness (HSL) and Hue/Saturation/Lightness/Alpha (HSLA) are in contrast less widely used. The value for Hue goes through each colour ranging from 0 to 359 (0 is the same as 360, being red, and all other values are a different part of the light spectrum), and the Saturation and Lightness values range from 0% to 100%. HSLA is like RGBA in which it also adds in the Alpha channel, with the same value range.

- The web also has 140 colour names that are supported by all browsers, which are symbols pointing to predefined hex code values. The colour used to represent colour names for this example is magenta, which means it is the equivalent of #ff00ff.

Example 6: background images

This example shows that it is also possible to use an image for a background in a container instead of just a colour.

The background image is also capable of being repeated (such as for a tileable pattern you want to use for a given box or container) or it can be set to not do so. It is also possible to only set it to repeat either horizontally or vertically.

If the background is set to not be repeated, then the rest of the backgorund will be set to look the same as the background behind the element being assigned an image, unless it is also given a background colour, which will show behind the image so a background colour would only show if the image is either transparent or doesn't fill the whole box similar to how this one has a sunset that doesn't fill the box.

There is also a property for changing the size of the background, so it could make a background image match the size of the element it is assigned to. This is set to "contain" in this example so that the image is made larger so that its height matches the container while keeping the same proportions so the width doesn't make it look squashed or stretched.

This example also gives the text a dark shadow so that it is somewhat easier to read with the image behind it.

Example 7: element borders

Borders can be given to elements, and can be styled in many ways. The other examples don't have a border, while this one shoes the border styled as dashed while being cyan in colour. All examples also have a border radius which rounds the corners of the boxes, making them smoother to look at. A short hand property is also available to combine each border property at once (ordered as width, style, colour).

The border width is also able to be changed, so that it can be made to stand out more or to be more subtle.

Borders can also be styled to be hidden in case an element you don't want to have a border is inheriting one from somewhere else.

Each separate side of the border is capable of being defined separately for each property (such as if you wanted the bottom border to be a double line)

Example 8: margins

Margins change the position of the element they are applied to. This example shows the margin changed so that the left and right margins have the value auto, which causes the container to be rendered in the center of the page. It also has a larger gap between it and the other examples.

This example is done by making use of assignment of multiple classes, using the base "container" class and an extra "auto-margin" class.

Example 9: padding

Padding is used for setting the distance between the edge of the container and the content. This example shows a larger padding than the rest of the examples.
It is possible to apply padding to only specific sides, although I am using the shorthand to apply 40px of padding to the top and bottom, while applying 100px padding to the left and right. This makes the container for this example wider than the others.

Example 10: differing height and width

This example shows that the height and width of an element can be altered, as the container uses the existing base "container" class and one which sets a specific height, causing it to be larger than it would be if it was set to fit its contents.
However, when viewed with a window that has a thin enough width, the text will instead overflow the container.

The max width has also been changed to go up to a maximum of 75% of the window's width, which causes it to be longer than other examples due to still being set to fit the content.

Example 11: Text

The text within this example is set to show many different ways to alter text. This includes, but is not limited to, the text's colour (represented here by being magenta), the text align property causing it to be aligned to the right instead of the left, a wavy underline in cyan for text decoration (which can be done either through a single property or deparate properties that do individual parts of the combined one), a text indent which causes the first line to be indented (despite being aligned right, it indents from the left), and an increased letter spacing which causes each letter to be further apart from others around them.

This text has been given an increased line height, which is difficult to see without a good amount of text, so it will be followed by some Lorem ipsum text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id accumsan enim, ut auctor massa. Curabitur ac porttitor nisi. Morbi venenatis, justo ut dictum lacinia, enim ex fermentum tortor, vitae dignissim nulla magna ut dolor. Suspendisse potenti. Aenean congue lorem nec lectus maximus venenatis. Donec id risus vel tellus auctor gravida. Donec tempor elit eget nisi faucibus, in faucibus orci convallis. Aenean malesuada neque erat, sit amet convallis urna consectetur vel.

This text was written to be normal, but has been given the "text-transform" property with the value "capitalize" which causes each word to be capitalised. It also has options for forcing the text to be all lowercase, all uppercase, or none in case it is inheriting a transformation from a parent and you don't want it to.

This text is given the direction of right to left, and is given the "unicode-bidi" property with the "bidi-override" value in order to cause the text to be mirrored (but not the letters themselves). If you can read this properly, then you either have a mirror or are good at reversing things in your head.

Other properties that can be used are: word spacing (increasing or reducing the space between words), white space (which can specify how whitespace is handled in various ways), text shadow (to add a shadow to the text), and more.

Example 12: fonts

Using the font-family property, it is possible to change the font that text is rendered with, as seen by how the fonts in this example are different to the fonts in other examples, most notably the lack of serifs for this example. The heading is also a different font from the paragraph.
It is also possible to use font-style to make an entire element's text show in italics, and font-weight to change how thick or thin the lettering is for the text.

The above text makes use of fonts that can come pre-installed with a web browser, but this text instead uses a font that has been downloaded and provided within the website's files named "ComicRelief-Regular". If the browser this is being viewed in is not compatible with .ttf files for fonts, you will instead see the "sans-serif" font that comes pre-installed on browsers.
It is also possible for outside fonts to be added through a ling to the repository holding it, so that it doesn't have to be downloaded to the website's files directly.

Example 13: Icons

There are a number of ways that icons can be implemented. One way is through the use of Font Awesome Icons, which are able to show icons like a house for a home button (), a thumbs up for a like button (), and many many more such as logos for various companies or social medias that may be linked to by a website.
Other options are using Google Icons, which has many icons for making various buttons, and Bootstrap Icons which similarly to the other 2 options has many icons for various purposes.
Font Awesome is also able to apply animations to icons, so it is possible to have a red beating heart as shown here:
It also has a number of icons that require the use of a paid plan, and within the list of icons those are given a "pro" label.

As icons are added within text, they can be manipulated in the same way that text can (such as altering the size, colour, and using them for the "text" of an a element for a link).
Each of these ways to use icons use SVG files (or "Scalable Vector Graphics" files) which means they don't lose their resolution or definition when increased in size.

Example 14: Links

Links (using the "a" tag) are easily made to look different from how they normally do via using text related properties.
For an example, here is a link (which opens a new tab in Bing, so that it shows as unvisited) that uses the default style for a link. In comparison, This link goes to the same place, but has been changed so that it is a dark aqua colour, doesn't have an underline, has a different font to the surrounding text, and is bold. It is also possible to make a link change when it is different states (normal otherwise known as "link", visited, hovered, and active), which you can see if you do each with the second link.

When the second link is hovered over, it will become lighter and get an underline the colour of the normal text while seeming to lift off the page due to getting a text shadow with a short transition to the new state. Also, while "active" (which means in the process of being clicked on) the link returns to the darker colour and the shadow recedes to suggest it is being clicked and held down but the bottom border stays. Finally, once the link has been visited it will turn a dark red when not hovered over or activated.

In the CSS, the styles need to be done in order of "link, visited, hover, active" but they aren't all needed at once if you only want to change a the hover and active states, for example.

Example 15: Lists

There are various types of lists available for use in a web page, and CSS can style them in various ways. Here we have an "Ordered List", marked to show an order:

  1. This list has been styled so that it is marked with roman numerals, as opposed to the default numbers.
  2. This means that you will see that before each part of the list.
  3. this creates the appearacne of a specific order required, and can be used for things like steps for doing something.
  4. The use of roman numerals can work well for a website with that sort of theme, although it is better to make use of arabic numbers (1, 5, 10, etc.) as they are more intuitive for most people.

The list of options for different ordered list styles are as follows, in alphabetical order of name:

  1. "armenian", which uses traditional Armenian numbering.
  2. "decimal", which is a decimal number and the default for an ordered list.
  3. "decimal-leading-zero", a decimal number with a leading zeros, such as 01, 02, 03, etc.
  4. "georgian", which uses traditional Georgian numbering.
  5. "lower-alpha", lower case use of english letters.
  6. "lower-greek", lower case use of greek letters, such as α, β, γ, δ, etc.
  7. "lower-latin", which displays the same as lower-alpha.
  8. "lower-roman", which uses roman numerals with the letters used in lower case (such as i, ii, iii, iv).
  9. "upper-alpha", upper case use of english letters.
  10. "upper-greek", upper case use of greek letters, such as Α, Β, Γ, Δ, etc.
  11. "upper-latin", which displays the same as upper-alpha.
  12. "upper-roman", which uses roman numerals with the letters used in upper case (such as I, II, III, IV).

And here, we have an "unordered list", marked without showing a specific order:

The following is a list of some options for using with an unordered list:

It is possible to use options intended for ordered lists with unordered lists and vice versa, although it is better to keep them for the specific type of list they are for.

There are also a few extra list styles, as there is "none" which removes markers before each item, and also a way to use images instead for a custom marker in the case of a website with a very specific theme.

Lists are most used for containing the navigation at the top of the page, showing the links for each page so that the user can go between them. This site does not have muultiple pages, so there isn't an example here, but you can see it used by looking at the navigation for my ITOL-practical-site-one on GitHub.