DEV Community

loading...
Cover image for CSS for beginners

CSS for beginners

ganeshgajula profile image Ganesh Gajula Updated on ・6 min read

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

Alt Text

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.

Alt Text

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.

Alt Text

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.

Alt Text

We can also assign the values in following ways:

  1. By Specifying the RGB value of the color we need.
  2. 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:

Alt Text

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.

Alt Text

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:

Alt Text

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:

Alt Text

So now by using class we can style those two p tags as per our need. Let's align them to center.

Alt Text

Output will be:
Alt Text

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 #

Alt Text

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:

  1. MDN Docs
  2. CSS Tricks
  3. w3schools

Discussion

pic
Editor guide