CSS Syntax

Syntax for CSS includes the set of rules that are needed to follow to get error free results. Syntax tells us about the correct usage of properties at correct places so as to get correct results. Read introduction of css here. It consists of selectors and declaration for selectors. Let me explain it further, css selectors are the elements that we want to modify with the help of CSS. Declaration declares the change in particular element by assigning the property name and value to it. First step is to select that particular element that we want to change. After selecting the element, we declare the property that we need to change followed by the value of the property, means upto what extent we need to change. Below is the image which helps you to understand the syntax for selectors, declaration, property and value.

Syntax: CSS

Above image shows that “h1” element is to be modified by declaring it the property and value. We want to change the size of heading and its color to make it easily noticeable. Now that we understand, lets discuss in a nutshell what we have understand about syntax for css till now.

  1. Selectors are basically the elements of HTML that we want to change or modify according to our need.
  2. To modify elements, first we need to select the element, then apply CSS property along with assigning the value to it.
  3. All CSS properties name and their values comes inside declaration box. All CSS properties and their values always ends with semi-colon.
  4. Declaration box can have more than one properties, separated by colon.
  5. Declaration box should be enclosed with curly brackets.

 

Now, that we have learned what are the rules to change element properties, lets proceed further to learn how to select elements for this.

Element Selector

We use element selector when we want to choose element directly that we need to change. For example your content contains only paragraph or some lines written under <p> tag. If you choose paragraph tag to change, it will change all the content under the <p> tag element. Lets understand this with example.

element selector

Now lets see what happens when we see this in browser.

element selector window: CSS syntax

See, by selecting a single element <p> tag, it changed all the paragraph. That’s how element selector works. Lets see if we want to change each paragraph individually, then what are steps.

Id Selector

Id selector is used to select an individual element to modify for. Id assigned should be unique to an element so that changes take place to that element only. We use character “#” with the name given to id of the element when we use it for CSS. For example, if we want to give id to a paragraph, we will give it like <p id=”text1″>. Now, if we want to use it in CSS, it will be used like #text1 {…..}. Lets look at the below example for better understanding.

id selector

id selector: CSS syntax

Class Selector

In previous point, we have seen that if we want to change a particular element, then we use id selector. But id selector is limited to a particular element, means you have to define unique id for every element if you want to add styling effects to each element. Suppose, you are designing a website, and there is a section which is common to each paragraph. In this case, it will be a bit complicated to allot a different id each time to have that section. Here comes the use of class selector. We can change more than one element with the same style without even assigning them different id. We can do this by assigning same class to all that elements that we want to apply the same styling property. As we use “#” followed by id name in id selector, similarly, in class selector, we use “.” followed by class name. Lets understand this with example.

class selector

class selector window: css syntax

We can style the elements under one or more than one class. In that case the styled element will get the properties of both the classes. For example, in the above window, if we want the first two sentences in the same style, while the third one with different style. We will assign our classes for first two <p> tags same as “.all”. For third sentence, along with “.all” class we can choose “.underline” class. In “.underline” class we can use text-decoration property.  When we see the output in browser, the third line will have the property of “.all” as well as of “.underline” also. 

Group Selectors

Suppose you are writing a content where by you need to have your heading and paragraph to align left and should have same color. In this case, instead of going for id or class selector, we will rather go for group selector. Lets see if we need to have same property for all paragraph and headings, then without assigning them in different class, how can we style them in group selector.

group selector code

group selector : syntax css

That’s how group selector works for heading and paragraphs in a single way. Hope you are now able to understand the syntax of css. With this, we have come to an end of selectors. As we have concluded the syntax section, lets quickly discuss the ways to use css.

How to use CSS?

Now lets discuss the different ways to use css for styling our html document, when it is read by the browser.

There are three ways to insert css in documents.

  1. External Style Sheet.
  2. Internal Style Sheet.
  3. Inline style.

External Style sheet: External style sheet is used to change the look of a website having lengthy codes, by changing just one file. This file will be save externally from the page where type code for website. Hence it becomes easy and less complicated to change the entire look of website by just change one file, instead of going with lengthy codes. The external style sheet file should not include any html tags with it. Only css selectors, properties and their values will used in external style sheet file. This file will be saved with “.css” extension. Later on we will link this file with our main html page where we have type codes. After linking, when we open html file in browser, all css properties will come into effect and the modification will take place.

To link external style sheet file to our main page of html, use this command under <head> section. <link rel=”stylesheet” type=”text/css” href=”filename.css”>.

Internal style sheet: Internal style sheet is used when our website has less content and is limited to a single page. We have used internal style sheet in the above examples of selectors. The internal style sheet are defined in the <style> tag, which is used under the <head> tag.

Inline style: Inline style is used to modify a single element in html page. This can be used under any html tag which we want to add the style. For example,  <p text-color=”red”; font-size:15px; margin:left;>.

Order of Cascading

The cascading order will take place in the following manner.

Inline style> Internal style sheet> External style sheet.

It means inline style has higher priority to be executed when read by the browser. Next to that is internal style sheet has high priority than external style sheet.

Note: If in an html document, the external style sheet is defined before the internal style sheet, then properties of internal style sheet will be followed by the browser. If internal style sheet is defined before the external style sheet, then the properties of external style sheet will be followed by the browser.

That’s it in this post, we will cover more things in our next post. If you want to learn more about html, you can check out html tutorials.

If you want to learn and practice with online editor, then you can refer this website.

Thank You 🙂


1 Comment

i thought about this · August 18, 2019 at 1:21 pm

I just want to mention I’m beginner to blogs and really loved your blog. More than likely I’m going to bookmark your website . You certainly have really good writings. Cheers for revealing your blog.

Leave a Reply

Your email address will not be published. Required fields are marked *