2024-03-10
Coding is not about just writing code and leave it as is. We need to style our websites in a way that it is appealing to the eye.
Blog post by MF Mabala
Using CSS to style websites
CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS can be used to beautify our websites and make them more responsive. CSS is used to selectively style HTML elements. This means you can have a different style for all your HTML elements on your website.
Ways to style HTML
- Inline styling-this is when you style your HTML elements directly inside the HTML file or your code.
- External styling- this is when you create a css file and style the HTML elements inside the file.
External CSS Styling
When using CSS to style your elements you can name the file how you see fit as long as you use the ".css" extension after the name. Here is an example of how you can name your CSS files:
There are a various ways to style your properties
- Style a single property on its own.
- Style using Class Name
- Style using ID name
Using Class vs Id to style html
ClassName
If you have a bunch of code and you want to style some of the properties in the same way you can you class to that. By using class you eliminate the need to style those properties individually. When you style using a class you use a dot(.) followed by the name of the class you gave to your property. Below is a screenshot of how you give a class to your properties
When looking the screenshot above there is a div that surrounds the properties which are <h2></h2>, <br></br> and <p></p>. Please note that when you style the "left-inner-contact" the styles will be applied to all the properties under that specific div unless there are styles specified for those properties. Below is how to use the class inside your styles file:
ID for styling
When using an id for styling note that you can only use it for a single property. When writing code in CSS the id is identified by a (#)followed by the name it was given in html. Below show how you name an id
Also see how you use it in your external styles file.