Today I would like to talk about CSS, a term you might have heard before if you are building a website, and explain in the most simple way possible what is CSS, why do we use CSS for and mostly how can CSS help us in the Design of Our website.
What is CSS?
I am pretty sure you are familiar with the word HTML, which is basically a coding language that is been used as the foundation for all web development.
If HTML is one of the most important factors that are at the base of the construction of any website, CSS is probably the second most important aspect of a site.
CSS is, what we call a style sheet language created to control the appearance or presentation of electronic media documents with HTML and XHTML.
I know it sounds like Chinese (if you don’t speak the language) ….let me see if I can simplify it a bit.
The abbreviation CSS stands for Cascading Style Sheets and the word we need to really concentrate here is “Style.”
CSS is a complementary mechanism of the HTML language that allows the browser to indicate the style that should be given to the different elements when displaying the information of a website.
While HTML commands tells the browser that certain parts of the text are titles, subtitles, links or paragraphs, CSS is what tells you, among other things, what font, size, color or alignment an item on the page should have; it is basically what takes care of the aesthetic aspect of your webpage.
There is a big difference in the way a site is viewed with CSS commands and one that does not; you can actually check this by yourself by simply opening any website and select “disable styles> Linked style sheets” in the toolbar menu, and you’ll see how boring it becomes.
What is the use of CSS Styles?
CSS styles are something that you can add individually to each element of your HTML template, even though this can be a bit complicated and impractical.
When you link an HTML page to a CSS style sheet, it has a series of commands that modify all the elements that match certain criteria.
In other words, it is easier and faster to link your HTML template to a CSS file so that the browser understands that you must display all the H2 Titles in blue, for example, rather than integrate an independent style command for each H2 that you include in your pages.
Another advantage of CSS is that you can use the same template to format several websites, and if you need to make changes just modify the element in the template and update the linked sites.
But CSS is not limited to formatting a text.
When Do We Use CSS?
Learning to create CSS style sheets is an essential part if you want to develop a web page from scratch, or to customize any design detail of a website that you are building.
When you use a site like WordPress you have the possibility to select between templates that are already predesigned and have a specific style, so all you have to do in order to build a web page is simply drag and drop specific items ( Plugins, widgets) without having to mess with the code.
See the example here above with the WordPress and the Elementor Plugin
Still, if you have a site and you want to add a little more style to it and personalize it further you will have to learn how to use CSS and how to apply cascading style sheet.
Components of a style sheet in CSS
A style sheet consists of a list of rules or commands that consist of a selector and a declaration:
Selector: It is the element on which a certain style will be applied, it can be an H1, H2, a paragraph, a form, etc.
Declaration: It consists of a property (colour, width, font, etc) and a value (red, Verdana, left alignment, etc).
As you can see from the example by typing “pink” in the HTML Code I was able to change the background from the original blue colour to a pink one.
So what I was telling the browser was to display the Title 1 of the document in Blue and centred with the paragraphs with a font size of 20px, and a background colour pink.
It might look complicated but when you break it down like this it is actually quite easy to understand .
How to apply CSS to an HTML document?
If you already have an HTML document and want to apply to it some CSS commands you can do it in two ways:
- Link the HTML to the CSS document through a link that is placed in the head section (that is, between <head> and </ head> of the HTML code
- Copy and paste the CSS commands directly in the <head> section with the <style type = “text / css”> element.
There is actually a great site where you can practice CSS and understand it by using examples on how to use it in the correct manner; the site to practice your CSS is called W3School.com and you can click on the link if you want to access it and do a bit of exercise by yourself before trying to attempt any CSS on your website.
Do We Need To Know CSS in order to succeed?
If you are building your website and using tools like WordPress (which frankly I recommend as the best option to create a “normal” web nowadays) full of thousands and thousands of design templates, learning CSS is not really necessary.
But if you are interested in simply having a basic knowledge of CSS because you don’t want to be limited to the configuration options of the shift template that WordPress offers, then knowing a bit of CSS will take you to another level in what you will be able to do with your website.
In the case of WordPress, for example, knowing a bit of HTML and CSS means that the template no longer marks the ceiling of what you can do with your blog or your web based on WordPress. Even with very simple free themes and a little imagination and skill you can get results that will surprise you, and a lot.
Although a sheet with CSS rules of a large and complex web, it can certainly intimidate a little when you see it the first time, do not be scared: the basic basics of CSS are very easy to learn and they are going to give you a lot of play.
A professional CSS design can be something very sophisticated, but 99% of the occasions with a medium-basic level you will manage more than enough and, have enough to work with if you want to alter just a little of what your webpage template (even from WordPress) looks like.
I have used CSS only to change some of my Fonts and colours in some of my sites, for the rest, I am being honest here, I rely a lot on the WordPress themes and templates and there is enough variety there to keep me happy.
If you are interested in learning more about building a website or even the CSS and HTML side of a webpage, I have been using and am currently using one of the best platform around online: the WA platform.
I like to promote them, because everything I have learnt since I began my online business has been through them and I have been through so many platforms, I can guarantee they are the best in tutorials, support, simplicity, hosting, webpage builder and, yes even WordPress.
If you are looking or even thinking of building a website I seriously advise you, before it gets too complicated, to start with the Free Starter Pack that Wealthy Affiliate offers and follow the phase 1 of their tutorials. There is a set of video training available free that will give you a clearer idea if you want to start a business online and what a business online means in reality.