Create an Organization Website(Lesson 3: Styling Your Website)
We are on a Journey on the process I use to create an organization website using HTML, CSS and JavaScript.
If you are just joining us, you can check the first two lessons before continuing.
Lesson 1: Process overview and Design
So, you have already created a base structure of your website using HTML. Now, its time to make the website look great with CSS.
Using CSS, you can:
style the text and other elements
create unique layouts
set background images and videos
add basic animations and effects
Styling Text and Other Elements
Words are the backbone of every website. You can use CSS to style the text by adjusting:
font family
font weight
text alignment
text color
line spacing
letter spacing
For the other elements other than text, you can adjust their:
background color
border radius(rounded or square corners)
size(width and height)
margin
padding
borders
Create Unique Layouts
With HTML, the content is arranged in one column from top to bottom. CSS allows you move the content around and create different types of layouts. You can arrange your content into 2, 3, or 4 columns.
Currently, the most widely accepted methods of creating layouts are CSS Flexbox and CSS Grid. Previously, CSS float was the most widely used method.
In my case I like using CSS Flexbox in most instances.
While creating layouts, you will also need to adjust the spacing and alignment of all elements.
Set Background Images
Sometimes, you will be required to add a background image to a website. CSS `background-image` property allows you to do that.
Add basic animations and effects
The last thing I like to add is the basic animation. You can use transform and animations to make sure the website visitors get the feedback when they interact with buttons, links or other interactive elements. Use hover sparingly because visitors on mobile devices will not benefit from it.
Final Words
1. Learn and use selectors properly
In most instances, element and class selectors are sufficient. However, you can use other selectors as need arises.
2. Remember to keep your CSS organized.
As your continue to style your website, your CSS code will start to grow big. These guidelines can help you to keep the CSS organized and readable.
Useful Resources Links
Read more about