Example 1
On the left, there is a CSS file which defines a hexadecimal value for the background-color attribute.
Summary and personal opinion
This session was devoted to styling HTML with CSS stylesheets. These Cascading Style Sheets contain information about layout (fonts, colours, spacing, positioning and sizing, etc.).
There are three possibilities regarding CSS integration. CSS can be integrated within any tag through the style attribute (inline CSS), within the <style> tag in the <head> section (embedded CSS) and in another file (external CSS). An inline CSS defines a style for an HTML element, whereas internal CSS defines it for an HTML webpage and external CSS is used for many HTML pages. External CSS are the most time saving because the style is totally isolated from the content in HTML files.
Thanks to CSS, it is very simple to change the style of several web pages, which can be easily consistent. When creating CSS files, it is useful to define the language by clicking on Language (in the toolbar) and then on CSS (drop down menu) because we can clearly see the syntax and avoid errors.
On CSS files, we need to define the HTML element that we want to style, such as <body>, <h1>, <h2>, <p>. Then we add curly brackets and attributes, which are <background-color>, <text-align>, <font-family>, <color>, <font-size>, etc. After attributes, we need to place a colon, a value and a semicolon.
In HTML files, colours are values. For example, for <background-color>, we would typically specify a colour in RGB or hexadecimal format. Hexadecimal codes consist of a number sign (#) and six letters or numbers. For example, #000000 is used to display black and #FFFFFF for white. RGB means red, green, blue, which are the primary colours. Each number specifies the intensity of red, green and blue between 0 and 255. For example, rgb(0, 255, 0) is green. rgb(0, 0, 0) means black and rgb(255, 255, 255) displays black.
There is also a list of 140 HTML colour names which are supported by any browser: instead of writing #FF6347 or #00FF7F, we can use tomato or spring green. Concerning colours, we can use tools like Paletton, which recommends colour combinations, Contrast Checker, which checks if our foreground colour is visible enough when combined with our background colour, and ColorZilla, an add-on which translates colours that we see on the Internet into RGB or hexadecimal formats.
If we want to have specific styles within a CSS stylesheet, we can use classes and IDs. An ID identifies one element, whereas a class can identify more than one. In order to define classes, we need to add a dot. For IDs we need a number sign (#).
This lecture was very interesting because it is very time-saving to isolate content and layout. For my portfolio, I decided to use a template. However, I had to change many elements and try many possibilities before figuring what code to include in css sheets, so in the end it has been time-consuming. It would also be interesting to learn a little bit more about possible attributes.
During the hands-on session, we modified HTML and CSS files and we also learnt how to create favicons through favicon.cc. They are small images which appear at the top bar of the browser. I had never thought about it and it might be useful if I decide to create a personal website in the future. I have applied what we did on this website.
There are some examples of the lab below.
Example 2
Here you can see how I used ColorZilla to identify the colour of a banner on a website in RGB and hexadecimal format.
Example 3
On this screenshot, there is a website created using the University of Geneva css sheet.
Example 4
This picture shows how I modified the previous css sheet (colour).