Begin with CSS

We have known that CSS is the rules that are written for designing a webpage of an application’s front-end. Now is the time for moving further into CSS.

The syntax of CSS

Initially, the syntax of CSS is quite clear and easy to understand, even with the non-technique people at the first sigh.

<selector>{
/*
CSS rules
*/
}

The selector is used to find the HTML elements from their name, id, class or attribute, etc. The following example will show how to select an HTML element.

#ID_name{}
.Class_Name{}

The HTML element selector can be selected based on the element name,. For example, you can select <p>, <div>, <ul> by writing their name in CSS.

p{}
div{}
ul{}

Commenting in CSS

The purpose of commenting is the explanation for the code. It would be useful for letting people understand what the code does, or may be helpful in the case of maintaining later.

In CSS, the comments start with /* and end by */, we can use it for single and multiple lines of commenting in CSS

Grouping selectors

In the case we have more than one selector that have the same style, we can use the grouping selectors. For example.

p .class_name #id_name{
/*
CSS rules
*/
}

Conclusion

So far, we have gone through the most essential things of CSS. Learning CSS is not difficult, but it is tough if wanting to become CSS expert. Anyway, keep moving and discovering one by one caused of interesting would be fun.

One thought on “Begin with CSS

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: