This article is all about basic CSS
Few things about CSS
- From the title, CSS means, Cascading Style Sheet (I never knew this)
- It is case sensitive, so you have to be careful with capitalization
- CSS allows you to customize/control so many things like your colours, fonts, spacing, etc
- There are different ways to apply CSS. It can be inline directly to an HTML element using the style attribute or you could place within tags in an HTML document. You can also write the rules via an external style sheet.
Remember the Cat photo app we started with HTML 5 here? Just look at how different it is now with CSS(check out the picture below). It's so different and beautiful, eh? Yes I know right. CSS was used to add various styles to the app, more elements and attributes were also introduced in this lesson. There were so many things I learnt in this challenge. Some sticked right away while i've already forgotten some but the good thing is that the "more you learn, the more you know".
Below are my top 5 lessons and fun facts of Cascading Style Sheets aka CSS. I hope you enjoy this one as much as I enjoyed learning it.
1) First I learnt how to change the colours of a text (<h2 style="color: blue;">CatPhotoApp</h2>. I also learnt how to use hex code for specific colours and mixing colours. In addition, I learnt more about RGB and how to also mix colours using the RGB. This was an interesting challenge as I love colours and I will like to bring life into my codes.
 |
| Using Hex Code for Colour Sample. Picture from here |
 |
| Mixing colours with RGB. Picture from here |
2) Classes was also introduced in this challenge. Classes allow you to use the same CSS styles on multiple HTML elements. Here, I learnt how to change the font size of texts (I played around with this one), change the font family (e.g from Times New Roman to Monospace). Example of creating a class is creating a font class, style or image. In the example below, I created a class in a style tag for a smaller image with 100px width and then added the class to my image.
<style>
.smaller-image {
width: 100px;
}
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat"</a>
3) Do you know how to import a google font? Well I know you don't but I do now, so learn from the boss (hahhaha..kidding). Tip: To import a Google Font, you can copy the font(s) URL from the Google Fonts library and then paste it in your HTML. The example below shows that I already imported the 'Lobster font' & I wrapped it in my main element
<main>
<h2 class="red-text">CatPhotoApp</h2>
<style>
h2 {font-family: Lobster;}
</style>
4) Setting the id of an attribute and using the id attribute to style an element was another great challenge. I also learnt that id is not reusable and should only be applied to one element. As an example, I changed the background colour of my form element using this
<form action="/submit-cat-photo" id="cat-photo-form">
<style>
#cat-photo-form {
background-color: green;
}
</style>
The outcome of this is a green background:
5) Finally in this challenge, I learnt about creating custom variable. To create a CSS Variable, you just need to give it a
name with two dashes in front of it and assign it a value e.g: (--bird-skin: black;). After you create a variable, you can assign it to other CSS property and just reference it. Another important lesson with custom variables is that, when you create your variables, for example, if you have a variable :root created, this will set the value of that variable for the whole page and can be referenced or called anywhere in your code.
Fun Facts
- I use blogger for my blog page and I have done a lot of HTML and CSS which I mentioned here. This CSS lesson brought back a lot of memories especially in relation to width, sizes and how I place pictures on my blog
- You can apply multiple classes to an element using its class attribute, by separating each class with a space. E.g <img class="class1 class2">
- Three important properties control the space that surrounds each HTML element:
padding (padding controls the amount of space between the content and the border), margin (margin controls the amount of space between the border and the surrounding elements), and border. Quick fact: if you set an element's margin to a negative value, the element will grow larger.
- Do you know that every HTML page has a body element and browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last. As an example, the inline styles will override all the CSS declarations in your
style element. Note: when you absolutely need to be sure that an element has specific CSS, you can use !important
- Think of the
:root element as a container for your entire HTML document, in the same way that an html element is a container for the body element.Final Thoughts:
Introduction to CSS was an interesting one. CSS definitely has more features than HTML and i'm beginning to sink myself in the names of elements and how they are used. Guess what? this is just the beginning, there is more CSS lessons coming & I will be summarizing them in a couple of my next posts. Thank you for stopping by today as usual. I hope you have learnt something as much as i'm learning daily. See you in the next lessons...
