Structure and Formatting of a CSS Rule

Structure and Formatting of a CSS Rule
Nikhil
Published on 2021-07-07 10:53:27

CSS Structure and Formatting 

Property Lists


Some properties can take multiple values, collectively known as a property list.

/* Two values in this property list */
span {
text-shadow: yellow 0 0 3px, green 4px 4px 10px;
}
/* Alternate Formatting */
span {
text-shadow:
yellow 0 0 3px,
green 4px 4px 10px;
}

 

CSS Multiple Selectors


When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your style sheet. Use a comma to separate multiple grouped selectors.

div, p { color: blue }

So the blue color applies to all <div> elements and all <p> elements. Without the comma only <p> elements that are a child of a <div> would be red.

This also applies to all types of selectors.

p, .blue, #first, div span{ color : blue }

This rule applies to:

  • <p>
  • elements of the blue class
  • element with the ID first
  • every <span> inside of a <div>

 

Rules, Selectors, and Declaration Blocks


A CSS rule consists of a selector (e.g. h1) and declaration block ({}).

h1 {}

 

Css Comments


Single Line comments

/* This is a CSS comment */
div {
color: red; /* This is a CSS comment */
}

Multiple Line comments

/*
This
is
a
CSS
comment
*/
div
{
  color: red;
}

ATutorialHub Related Guide

Comments (8)

Leave a Comment

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

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website