Learning to Code: Day 4 — Introduction to CSS Part 1
Hey everyone, it’s Monday and that means I’ve been working my shifts and been to the gym after so this post is coming in a bit later than usual, however I’ve been keen to get back into the coding all day so let’s jump in and learn something new! I added some extra information to the last post at the bottom to finish off those lessons and start new here tonight. Thanks to FreeCodeCamp for these free classes. Got your tea ready?
—
Cascading Style Sheets, also known as CSS
CSS is a programming language that tells the browser how to display the HTML code in the console that we have typed into the editor. CSS is case-sensitive, so be extra cautious when writing code. A few examples from FreeCodeCamp of what you can control in CSS are:
- colour
- fonts
- positioning
- spacing
- sizing
- decorations
- transitions
Three ways to apply CSS styling
According to FreeCodeCamp, using the HTML style attribute in the meta data of the HTML code which is nested in the head tags, you can directly input CSS rules there. You can also apply inline styles into the HTML elements using the style attribute, and thirdly you can write up the CSS rules on an external style sheet and reference that file in the HTML document. It’s considered best practise to use the third option and keep the two languages separate for readability and reusability of that code.
How CSS works with HTML
The DOM (Document Object Model) is an application programming interface (or API) which treats HTML like a tree structure, with each branch of that tree (a node) as an object representing different parts of said document. CSS can then use a selector to manipulate the HTML in the DOM and influence it’s appearance to the user. With me so far?
Change the Colour of Text
Okay let’s try something basic basic. We’re going to type some code which would influence the colour of text which is otherwise black in the browser. This is done by changing the HTML style attribute and adding a color property (American spelling for “colour”). Here’s the code:
<h2 style=”color:red;”>Website Name</h2>
This will display the header (h2) title in red.
Note that the inline style declaration ends with a semi-colon “;”.
Using CSS Selectors to style Elements
Instead of creating an individual code as above to change the colour of the h2 we’re going to create a CSS selector within a style block, which will nest the declaration inside within two curly brackets ({ and }). This will then minipulate all h2 elements that follow. Looks like this:
<style>
h2 {
color: red;
}
</style>To me, this is saying “For all h2 code that comes next, turn all colours red”. Wherever you then type in h2 tags thereafter, this CSS selector will minipulate the colour of the h2 also. This is more useful as it saves time typing the style element (mentioned previous to this section) each time you make a h2 tag in this example. Remember the curly brackets and the semicolon. If you type the code without the semi-colon it will remain idle until you add it. Then the code will identify the color property and the red value will be implemented.
Using a CSS Class to Style an Element
Classes are reusable styles that can be added to HTML elements. A CSS class declaration would begin with a full stop (.) (e.g. “.blue-text”) whereas an HTML elements’ class [attr=type] does not begin with one (e.g. “<h2 class=”blue-text”>Website Name</h2>”). Here is an breakdown of a class declaration with an HTML selector “p” at the beginning where the CSS class selector would also be stated in it’s place:
When you create the h2 in the style element and name the CSS selector as “.blue-text”, you have to then apply the “blue-text” in the HTML element for which header you would want to turn blue and link the two together, thus changing the text colour to blue for that specific header, in this example. Here’s the CSS selector code:
<style>
.blue-text {
color: blue;
}
</style>
And then later on we apply it to this example of a header code:
<h2 class=”blue-text”This is a header</h2>
This specific header will now be coloured blue.
Style multiple Elements with a CSS Class
With this, the CSS class is set up and can be reused throughout the code for whatever you want to affect, simply add the linking code class=“blue-text” to join the CSS class to whatever line of text you would like to affect. For example:
<p class=“blue-text”>Click here to view more </p>
—
Aaaaaaaand let’s call it a day there. Thanks everyone for learning along the way with me. I really enjoyed this post and looking at the very basics of CSS. Looking forward to making more of this tomorrow. See you then!
