Hello guys, you are welcome to this awesome article, where you will have a better understanding of Cascading Style Sheet (CSS). Previously we have discussed intro to html and also basic elements of html. If you haven't read that click here or continue with this page.
Let's highlight some of the points we will discuss in this post
- What CSS stands for and it's meaning
- Why use CSS
- CSS syntax
- Types of CSS
- How to learn CSS faster
- Conclusion
So let's move on to the first point of the post.
What CSS stands for and it's Definition
It is a language we use in coding inorder to make a webpage attractive to the users. CSS was initially released 17th December, 1996 (25 years) to control the style of a web documents in a simple and easy way
Why Use CSS
Ok let me explain it like this. When manufacturing a product, most attention is given to the finish process. Do you know why? It is the part that most customers get attracted to. So also when you are building an apartment for rent, the finish is what brings renters, you don't expect anyone to rent your apartment that isn't plastered or without Windows. That is exactly what CSS does. It defines styles, design, layout for your webpages.
It also saves time when it comes to styling multiple and different pages in a web document.
CSS Syntax -How CSS code is written
CSS syntax defines how css codes are written in a web document. It usually consist of a selector and declaration block. The Selector in the CSS code refers to the HTML element you intend to style.
The Declaration block can contain one or more declarations and each declaration is made up of name properties and values separated by semi-colon( ; ). The name properties and values are separated with colon( : )
Example:
h1 { color : red; font-size : 16px; }
OR
h1 {
color: red;
font-size: 16px;
}
Types of CSS
We only have 3 types if CSS. Which include;
- Inline CSS
- Internal CSS
- External CSS
Let's briefly discuss about each of them
1. Inline CSS:
Inline css can most times be use for unique styling of single element in the HTML file
It is defined by adding style Attribute specifically to the relevant element.
Example:
<h1 style="color: red; font-size: 16px;"> Heading One</h1>
2. Internal CSS
Internal css is written in the same html file as html element. All the styling are defined in the <style> element. Internal styling can only be use to give a unique style to a single webpage
Example:
<head>
<style>
h1 {
color: red;
font-size: 16px;
}
</style>
</head>
3. External CSS
Basically an external css separates the CSS file in the web document. These CSS file can be accessed adding a link in the head section of the html file.
What to do? All you have to do is to create a new file in your root folder (the folder continue all your web documents) and save it as style.css. So note that all your styling should be stored inside the style.css file. After that in head section of the html file include these line of code
<link rel="stylesheet" href="style.css"> and you are done. Multiple pages of a website can be link to a single external stylesheet.
How to learn CSS faster
Okay the question here is, is there any easy way to learn CSS property names and values? The perfect answer is to engage in lots of practices and different web project with consistency and in no time you will be a lot better using css. CSS is not something to ponder on because is just too simple to learn when it comes to coding
Conclusion
As a frontend developer, it is very important you understand CSS to build responsive web design. If you need a tutor to guide you through CSS contact me @ +2348076839855.
0 Comments
Post a Comment