• CSS (Cascading Style Sheets) is the code that styles web content.
• Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language.
• CSS is what you use to selectively style HTML elements.

The whole structure is called a ruleset. (The term ruleset is often referred to as just rule.)

• Selector : This is the HTML element name at the start of the ruleset. It defines the element(s) to be styled (in this example,

  elements). To style a different element, change the selector.

• Declaration : This is a single rule like color: red;. It specifies which of the element's properties you want to style.
• Properties : These are ways in which you can style an HTML element. (In this example, color is a property of the

  elements.) In CSS, you choose which properties you want to affect in the rule.

• Property value : To the right of the property—after the colon—there is the property value. This chooses one out of many possible appearances for a given property. (For example, there are many color values in addition to red.)

Note the other important parts of the syntax:

1. Apart from the selector, each ruleset must be wrapped in curly braces. ({})
2. Within each declaration, you must use a colon (:) to separate the property from its value or values.
3. Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one.

To modify multiple property values in one ruleset, write them separated by semicolons, like this:

 p {
 color: red;
 width: 500px;
 border: 1px solid black;
 }

You can also select multiple elements and apply a single ruleset to all of them.

Separate multiple selectors by commas.

 p, li, h1 {
  color: red;
 }

The CSS border properties allow you to specify the style, width, and color of an element's border.

• border-style:
  • The border-style property specifies what kind of border to display.
  • The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
• border-width:
  • The border-width property specifies the width of the four borders.
  • The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:
• border-radius:
  • The border-radius property is used to add rounded borders to an element:

In addition to classes, each HTML element can also have an id attribute. There are several benefits to using id attributes:

• You can use an id to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.
• id attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same id attribute.

Example:

<h2 id="id-name">

However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.

you can style them using CSS. Example:

 #id-name {
    background-color: green;
 }

Note that inside your style element, you always reference classes by putting a '.' in front of their names. You always reference ids by putting a # in front of their names.

• In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are many sources for web fonts on the Internet. For this example we will focus on the Google Fonts library.
• https://fonts.google.com/: is a free library of web fonts that you can use in your CSS by referencing the font's URL.
• To import a Google Font, you can copy the font's URL from the Google Fonts library and then paste it in your HTML.

Example: for Lobster font copy following code-snippet and paste it into the head block of your html code

 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

Now you can use the Lobster font in your CSS by using Lobster as the FAMILY_NAME as in the following example:

 font-family: FAMILY_NAME, GENERIC_NAME;

• The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available.
• There are several default fonts that are available in all browsers. These generic font families include monospace, serif and sans-serif.
• When one font isn't available, you can tell the browser to "degrade" to another font.

For example, if you wanted an element to use the Helvetica font, but degrade to the sans-serif font when Helvetica isn't available, you will specify it as follows:

  p {
    font-family: Helvetica, sans-serif;
  }

Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the "Open Sans" font, but not to use the Lobster font. Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.

well explained here --> CSS BoxModel.

Sometimes your HTML elements will receive multiple styles that conflict with one another. For example, your h1 element can't be both green and pink at the same time.

An extra color class applied to a text tag element can override the body elements color CSS property.

Browsers read CSS from top to bottom in order of their declaration. That means, in the event of a conflict, the browser will use whichever CSS declaration came last.

from below code , say which color will the Heading have.

 .pink-text {
 color: pink;
 }
 .blue-text {
 color: blue;
 }
                            
 </style>
 <h1 class="pink-text blue-text">Hello World!</h1>

id declarations override class declarations**, regardless of where they are declared in your style element CSS. inline styles will override all the CSS declarations in your style element.

please the color of text below

 <h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important.

• REF Link:
  • https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
  • https://www.freecodecamp.org/learn/responsive-web-design/#basic-css
  • https://www.w3schools.com/Css/default.asp