CSS defines the way things look on a website and to further add interactivity to a website we use JavaScript. When we start building any website we usually start by writing HTML first, which is the actual content that is being displayed on the website. But, we also need to style our website so that it catches the attention of the person visiting the website. This is where CSS comes into action.
CSS stands for Cascading Style Sheets and is a very powerful tool for designing our website. It can instantly beautify a website to a whole new level. So in this post I'll walk you all through the basics of CSS to introducing all the things you need to know to style your website.
So first lets look at the syntax.
SYNTAX
CSS consists of a selector and a declaration block. The selector points to the HTML element which we want to style whereas the declaration block contains one or more declarations separated by semicolons. The declaration consists of a CSS property name and a value separated by a colon. See the image below
In the above image we can see that p tag is a selector and everything that's inside the curly braces is declaration which consists of color as a property and red as a value. On using the above styling into our CSS file will convert all the content enclosed within the p tag into red color.
SELECTORS
Selectors in CSS specify which HTML elements we want to style. For example, when we write h1 as a selector and then assign a declaration to it which consists of a property and value. Then all the h1's which are present in our html file are being modified based on property and value.
We can also use multiple selectors separated by a comma and then assigning a declaration which will make an effect on all of them at once. See the code snippet below.
PROPERTIES
So now lets explore the properties in CSS which are most important to style our website. Based on the properties used, the styles are being applied to that particular selector. Some of the most used properties are:
Color
In CSS, by using the color property and assigning it to a predefined color we can change the color of the content enclosed in that particular selector.
We can also assign the values in following ways:
- By Specifying the RGB value of the color we need.
- By Specifying the HEX value of the color we need.
1. RGB Value
An RGB value is a combination of 3 values i.e red, green & blue. Here, each parameter defines the intensity of the color between 0 and 255.
If we set all the parameters to 0 i.e. by setting rgb(0,0,0) we get black color. While if we set all the parameters to 255 i.e. by setting rgb(255,255,255) we get white color. Also, setting any one parameter to 255 and rest all to 0 will give us the color of the parameter that is being set to 255.
For example. rgb(255,0,0) will give us red.
To read more about setting RGB values Click Here
2. HEX Value
Similar to rgb, an HEX value is also a combination of 3 values i.e. red, green & blue but in hexadecimal format which is #rrggbb. Here, rr refers to red, gg refers to green & bb refers to blue with their values ranging between 00 and ff, ff being the highest and 00 being the lowest.
For example. hex(#ff0000) will give a red color.
Text
Using CSS we can also style our text, we can change the font size, font style, add spacing between the words & letters and many more stuff. We can use different font styles based on our requirement, some of the best font styles can be found at Google Fonts
For font sizes we can use pixels(px), rem , em units.
rem is relative to font-size of the root element, em is relative to the font-size of the element. If size of the root element is not set then by default it is 16px.
To read more CLICK HERE
CSS BOX MODEL
The CSS box model is like a box which is wrapped around each & every HTML element. It mainly consists of margins, borders, padding & actual content.
See the diagram below:
In the above image, we can see that to add the spacing around the actual content we need to use padding, and to add a spacing around the padding and the content we need to use border spacing, and finally to add the spacing outside the element i.e. to add spacing between two elements we use margin. Also, we can use margin: auto to center the elements.
DISPLAY
The CSS display property is widely used to control the layouts. It specifies how an element must be displayed. Elements usually have their default display values set to either inline or block.
Inline Elements
We can set the display property to inline by declaring display: inline. Inline removes the line breaks after an element due to which each element occupies the space equivalent to the content or text present inside it. Some of the default inline elements are span, a, img.
See the image below.
To see entire code Click Here
Block Elements
We can set the display property to block by declaring display: block. Elements whose display property is set as block always start on a new line and take the full width available. Two elements won't be placed next to each other. Some of the default block elements are: div, h1 ... h6, p etc.
See the image below:
To see entire code Click Here
Classes & Id's
To select a group of elements we use classes and ids in our html. Classes are used when we want to reuse the same class name in other elements as well, while id's are used when we want to assign an id to an element which won't be reused again for other elements.
Classes are included in css file using dot and then followed by assigned classname (.className) while ids are included using # and then followed by assigned idName (#idname).
Below we have put class as center into two p tags. So, now by using the class name we can style the way we want.
See the code snippet below:
So now by using class we can style those two p tags as per our need. Let's align them to center.
Output will be:
So as you can see using class we have centered group of elements together.
To see entire code Click Here
Similarly we can do this using ids using #
To see code for ids Click Here.
Hope, I was able to cover most of the topics of CSS to get a beginner started, but there's still a lot of topics in CSS to learn if you want to become a pro at it.
Some resources which you can look at:
Top comments (0)