Introduction to CSS
What is CSS?
CSS is the abbreviation of Cascading Style Sheets which is a coding language commonly used in web development as it allows us to define specific styles to HTML elements and define the presentation of a web page. It allows us to specify how big or small an element should be, what colour that specific element should be, where the element should be placed on the web page, the overall layout of the web page and other properties like how the web page will be displayed across various devices as well as basic animation properties and hover states that can be used for basic interactions throughout the document.[1]
CSS can also be used for defining specific typeface rules throughout the HTML document, it allows us to state what typeface we would like to use along with options of a chosen fall back typeface and the classification of the typeface. It also allows us to build a visual hierarchy throughout our content by defining specific sizing and colour values to heading elements to make them different characteristics to the body text throughout the content.[2]
Why Bother With CSS?
There are a number of reasons why we should make the most of CSS within web design, from a user experience point of view CSS is perfect for allowing us to create a great user experience in a website as we can define specific typography properties to improve readability and legibility throughout the content of the website in addition to using it to create visual hierarchy and follow other UX laws through the use of colour, sizing, position and spacing.
Another reason why we should bother with CSS is that it allows us to make our website more visually appealing to the user, I read somewhere that if a user goes to a website and it takes to long to load or it looks unprofessional they will go back and find another website within 5 seconds. Having a website that is both presentable and easy to use and navigate is crucial to a websites success. CSS also allows us to follow specific brand guidelines if we are creating a web page for a business or company, we are able to define specific colour values and typography values in order to fit the design into the guidelines of the brand.
History Of Designing For The Web
CSS has been massively developed over the years since its initial release in 1996, the creator of the CSS language Håkon Wuim Lie initially proposed the idea in 1994 where he worked at CERN alongside the creator of HTML and the World Wide Web, Tim Berners Lee.[3] CSS has changed drastically over the years where initial website were very plain and didn’t have much style to them, commonly featuring a white background with black text and basic hyperlinks that are underlined blue, this is due to the fact that upon the initial release of CCS1 the properties were very basic and developers were limited as to what they could do with it. Since the development of CSS to current version of CSS3 that we are currently using in the industry today the language has come along way since it was first released in 1996, this is evident in certain websites like Apple’s website for example where the designers and developers have create interesting and interactive scroll animations to take the user on a journey through their products. This was near enough impossible for developers using CSS at the end of the 1990’s going into the 2000’s.
After researching into the history of web development I came across a website that was created in 2005 by Alex Tew who was a student in my home county of Wiltshire in England. Tew created a website known as The Million Dollar Website which consisted of 1 million pixels in a grid layout, Alex Tew started selling each individual pixel for $1 each to businesses and companies around the world, this was extremely innovative as the World Wide Web was still a new innovation in 2005 and was still being developed, once companies started to notice more people were using the internet they saw the need for advertising on the web. Alex Tew grossed over one million dollars for the website totalling at £1,037,100.[4]
WYSIWYG Editors
WYSIWYG stands for What You See Is What You Get, this is a term commonly used for software that allows us to visually change the appearance of our website without having to know the basics of HTML and CSS. There are numerous advantages and disadvantages to WYSIWYG editors, one advantage is that they are an extremely good starting point for a project as it often gives you access to templates that you can use for your own projects, having this foundation is extremely useful and saves a lot of time making the project more efficient. Another advantage is that they are good piece of content to learn from and develop your skills as a web developer as they allow you to view the code that is used to create the elements and components on the website which you can replicate and learn how it was created so you can implement it into personal projects.
Some disadvantages to WYSIWYG editors is that they are extremely saturated and extremely limited in the capabilities and what your are able to achieve with them, over the past few years they have become extremely popular among self employed individuals and small business owners as it allows them an affordable option to web development but if everyone is using the same WYSIWYG editor and/or template the business isn’t going to stand out and have its own personality. Another disadvantage is that there is still a learning curve to the software, maybe not as much as learning code though. Learning the software and learning how to manage the website once its live can be tricky especially if you’re wanting it to be a successful investment for the business or personal brand. Some common WYSIWYG editors are WordPress, WIX and SquareSpace alongside some more recent editors like Shopify, Weebly and the likes of Webflow which is extremely advanced.
Advantages Of CSS
CSS is extremely useful when it comes to web development for the modern world as it helps improve accessibility issues like visual impairments for example, CSS can be used to change the size and colour of typography to allow for more contrast making the text easier to read. Another advantage of CSS is the fact that just simply makes the web look good and improves the user experience of the web overall, we now have websites that are full of interactions and animations making it a lot more enjoyable than website that were developed on the initial release of HTML and CSS. CSS is extremely easy to edit and maintain through the use of external CSS where the code is in a separate document the the .html file, this can be enhanced through the use of SCSS and SASS which allows you to create certain variables for sizing, colour and other properties in your CSS file as well as the ability to nest CSS rules without having to specify the rule path every time you want an element to have a separate style, this is extremely useful for large scale projects and is something I have worked with in the past throughout my Interactive Media course at Northern Regional College where I used SCSS variables to follow brand guidelines and used nesting to allow for a more efficient workflow as the project I was working on was quite big.
Writing CSS Rule
Anatomy of CSS
A CSS rule is usually display liked this:
p {
font-family: helvetica, arial, sans-serif;
}
The overall block of code if classed as the CSS rule, the selected tag, in our example is the p tag for a paragraph, is the selector of the CSS rule which defines which element we are targeting. The declaration is the line of CSS code that define the font-family used for the paragraph in our example above. CSS rules can become extremely advanced and they can build up over time so it is key to have good organisation to make it easier to navigate the document.[1]
CSS Selectors
CSS selectors allow you to target specific HTML elements to assign specific styles to the overall document to specific content on the web page. There are multiple ways you can target HTML elements within your CSS file, these include the basic CSS selectors like the class selector, ID selector, type selector and universal selector but there are also more complicated CSS selectors like the child selector, descendant selector and sibling selectors.[1] A * is used to define a universal CSS rule to the HTML document which will override any default CSS rules, a type selector is often defined by the HTML element itself, for example a h1 element, a class selector is defined as .class-name which can be used to target multiple elements at once that are not the same type of element, the ID selector is defined by #id-name which applies CSS rules to specific element with that ID name, the downside to this is that the class name can only be used once but that makes it good for section labelling on a website. Those are the basic CSS selectors we covered in our workshop, you can also target multiple elements and class names by defining the CSS selector as h1, h2, h3 for example, this would target all of the h1, h2 and h3 HTML elements in the document.[1]
Internal & External CSS
CSS can be used in a couple of ways, the first being internal CSS which refers to writing the CSS code directly into the HTML documents, this will be through the use of the style attribute on HTML elements, a disadvantage of this is that it can make the code become extremely messy and hard to read especially if the project is being shared between multiple developers. This doesn’t require the use of the link tag in your HTML document as the styles are defined to each specific element.
This is where external CSS comes in, external CSS refers to writing the CSS code in a separate document to the HTML code, this will be through a .css file and will require you to use the link tag in the head section of your HTML document to allow you to sync the .css file with the .html file. A benefit to this is that it allows us the edit and maintain the styling rules across the overall website without have all the HTML code too, this makes it extremely easy to read and follow when sharing projects with other developers and/or companies.
CSS Resets
CSS resets are extremely useful for modern web design as we now have access to a variety of web browsers, different web browsers have different factory setting for styling basic HTML code so it is important to have a basic CSS reset in place to allow you to create a consistent design across all web browsers like Google Chrome, Firefox, Opera and Safari. If there was no CSS reset then the website might be displayed differently on other browsers in terms of padding, margin, line height and typography.
I have included an example of a good starting point for a basic CSS reset below, the * is the CSS selector for the overall document and acts almost like a master CSS rule which overrides everything specified in the web browser.
The Magical CSS Reset
* {
padding: 0px;
margin: 0px;
font-size: 100%;
line-height: 1em;
}
The Box Model
The box model is a systematic way of breaking down the production of web development, using a box model allows you to block out each element so you known which HTML tags you will need before you even start coding. The box model can be useful when it comes to design layouts as it allows you to block out the design into a grid and work from that, this will allow for a faster production of the website as the developer will be able to place all their content based off a structured grid system. Another advantage of using the box model approach to development is in typography where you can mark out typographical elements for example block quotes, italic and bold typography, headings and paragraphs, this will make it a lot easier when it comes to inserting the content into the HTML document.[1] The margin defines the amount of spacing on the outside of the HTML element, the padding defines the amount of spacing on the inside of the element and the border defines the width of the border of the HTML element
I have included an image below to illustrate how the box model approach is used to give a rough idea on the development of HTML code.
Sizing with CSS
There are various ways you can define the sizing of a HTML element using CSS, this can be through the basic pixel value which is displayed as px or it could be through other sizing properties like em values and rem values. Generic pixel values are fixed to a certain pixel size which can be useful when defining the maximum width of an element but not when you’re focusing on making your design responsive across multiple devices, em values are useful for defining the size of an element relative to the screen, this can become more advanced through the use of rem values as they can become responsive to the size of the devices display and can shrink and grow with the screen size.
Colour with CSS
There are numerous ways you can define the colour of a HTML element using CSS, this can be through the use of HEX values, RGB values, RGBA values and generic colour names. Each option has its own advantages and disadvantages as some are just generic colours already defined for you, sound allow you to define the specific colour you want and some allow more advanced options like opacity settings like the RGBA colour property.
I have included an example of each colour value below to give you an idea on what they would look like.
Colour Names – Colour can be defined by using generic colour names, for example black, white or blue. This is a very limited colour palette and only has a select few colours you can choose from so it it usually better to define colour in other values like HEX, RGB or RGBA.
HEX Values – Hex values can be defined through a HEX code which will look like this, #FFFFFF, there are multiple codes in which you can use to define a specific colour you are wanting to use for your project.
RGB Values – RGB values define the amount of red, green and blue used to make up a specific colour, this is often defined in sets of 2 digit numbers like this, 00, 00, 00. RGB is good as it offers a lot fo flexibility with what colours you can use in your project.
RGBA Values – RGBA values are similar to RGB values but have an extra feature that makes it a little more advanced, where the red, green and blue values are defined by 2 digit numbers like RGB. The A allows you to change the opacity value of the colour you have chosen, this would be displayed like this, 00, 00, 00, 0.6. This is perfect for image overlays and other elements that would work with a reduced opacity value.
Task – Styling Baskerville Web Page
During our workshop we were tasked with adding CSS rules to the Baskerville HTML document we have made the week prior, we were asked to use what we had learnt to add styles to the HTML elements and create a visual hierarchy between the headings and the body content. For this I task I wanted to refresh my knowledge on CSS as I haven’t used it in about a year, I thought it would be a good opportunity for me to ease myself back into coding and build websites.
I have include a screenshot of my Baskerville project both with and without CSS styles so you can see the difference CSS can make to a website in terms of overall aesthetic and the accessibility of the website.
References & Sources
- Duckett, J., 2011. HTML and CSS. John Wiley & Sons.
- CSS Tutorial. 2021. CSS Tutorial. Available at: https://www.w3schools.com/css/default.asp.
- Wikipedia. 2021. CSS – Wikipedia. Available at: https://en.wikipedia.org/wiki/CSS.
- Wikipedia. 2021. The Million Dollar Homepage – Wikipedia. Available at: https://en.wikipedia.org/wiki/The_Million_Dollar_Homepage.