in

Introduction To The Basic CSS Syntax

In this tutorial we will be discussing about basic CSS syntax and how to use them. In our previous CSS tutorial we introduced CSS and its importance. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: Introduction To The Basics of CSS

Basic CSS Syntax

CSS are structured using style rules. The web browser easily understands the style rules, interprets them and apply the result to the web documents. CSS Style rules comprises of three sections which include:

The selector: The selector is just a tag in HTML which contains the style attribute. This HTML tag can by the <p>, <head>, <body> or also the <h1> tag.

The property: The property is the type of attribute that will be added to the HTML tag. This can be color, type, width, height etc.

The value: The value takes the place of the property value. This can be red, blue, yellow or for height and width value can be numbers such as 20% etc. position can be up, down, right , left or center.

An example of CSS style Syntax is shown below

selector {property:value }

for example

body {
         background-color: azure;
      }

The above example defines the color of the body background as azure. lets illustrate using another example to define the body text font size as 20px.

body {
         font-size: 20px;
      }

we can as well go further in adding three values to one property. for example lets define a table border color, border width, and thickness using the below illustration

table {
         border: black, 1px, solid;
      }

In the above example we defined the table border as solid, 1px and color black.

The Type Selectors

We have been looking at type selector earlier but we want to shade more light on this and also list more selectors. Another example of the type selector is the head <h1> tag

h1 {
background-color: red;
}

The Universal selectors

This selector matches the name of any element type.The below example will set the background color of the web document to red.

Example

* {
background-color: red;
}

The Descendant selector

The descendant selector is used only when you need to apply style to a selector located inside another selector. For example if we have the selector <p> located inside the body selector <body>. we can style <p> using the below structure.

body p {
         background-color: red;
      }

The class selector in basic CSS syntax

The class selector can also be used when styling the HTML web document. The beauty of using class selectors is that all elements having that class selector will have the same styling effect assigned to the class selector. Example shown below

.bodysection {
         background-color: red;
      }

The above class named “bodysection” is having a style which changes the background color of any element with class “bodysection” to red. If you observe closely you can see that we started the class “bodysection” with a fullstop(.). Thats the proper syntax when styling a class selector. This is different from styling the id selector and also the type selectors.

We can further make this more interesting by making it a bit more particular. lets assume we have several elements with the class “bodysection” and a <h2> tag is one of them and also we have more than one area having the <h2> tag but not all <h2> tags are having the class “bodysection”. We can target the particular <h2> tag having the class “bodysection” using the format below.

h2.bodysection {
         background-color: red;
      }

The above example will change the background color of the <h2> tag with the class “bodysection” to red

The ID selectors

The id selector is similar to the class selector but they are slightly different when styling the element. You can style all the elements having the same id. Example shown below

Lets assume we have an id “bodyarea” placed inside the element ‘table’. we can style this using the example below

#bodyarea {
         background-color: red;
      }

This changes the background color of the element having the id “bodyarea” to red

if we have more than one element having the same id, we can make our styling more specific by targeting the particular element using the format below

table#bodyarea {
         background-color: red;
      }

The above example will style only the background color of the table element with id “bodyarea” to red.

The child selectors

The child selector is similar to that of the descendant selector just that using the child selector we can style all elements within a particular element. For example we can style all the paragraphs within the body section of a web page using the example below

body >p {
         background-color: red;
      }

The attributes selectors

HTML allows us to apply styles to all elements having a particular attribute. For example the below example is used to apply style to all attributes having the type set to textarea

 input[type="textarea"] {
         background-color: red;
      }

The advantage of this method is that the style only affects elements with attribute type set to “textarea” if an attribute type is set to “text” it wont be affected.

List of Rules used for attribute selectors

  • p[lang] – this selects all the paragraph elements having the lang attribute.
  • p[lang=”fr”] – this selects all the paragraph elements having the lang attribute set to “fr”
  • p[lang~=”fr”]  – this selects all the paragraph elements having the lang attribute that has “fr”
  • p[lang|=”en”] – this selects all the paragraph elements having the lang attribute set to “en”

Multiple styling Element

In CSS we are not limited to having only one style added to an element. We can have more than one style added to an element and all will take effect provided they don’t cluster. Example shown below

 body {
         background-color: red;
         font-size: 12rem;
         font-weight: 400;
         font-family: Arial, Helvetica, sans-serif;
         position: relative;
      }

Element Grouping

We can have a group of elements sharing a list of CSS styles. All elements grouped with the same style will have same effect. Example shown below

 body, h1, h2, h3, table {
         background-color: red;
         font-size: 12rem;
         font-weight: 400;
         font-family: Arial, Helvetica, sans-serif;
         position: relative;
      }

This will set same styling rules to the body, h1, h2,h3 and table elements.

Conclusion

Now you are done with the basic CSS syntax lets move on to CSS INCLUSION

What do you think?

introduction to basics of css

Introduction To The Basics of CSS

css incsluion

CSS Inclusion | Learn How to Include CSS Styles in Your Web Document