What is CSS?

CSS stands for Cascading Style Sheets.CSS describes how HTML elements are to be displayed on the screen, on paper, or in other media.

CSS lets you stylize everything on a different file, thus creating the style there and later on integrating the CSS file on top of the HTML markup. This makes the actual HTML markup much cleaner and easier to maintain.

In short, with CSS you don’t need to repeatedly describe how individual elements look. This saves time, shortens the code, and makes it not as prone to errors.

CSS syntax:

h1{
color:blue;
font-size:12px;
}

here, h1 is a selector. it points to Html element we want to style and we can use different types of selectors here which we will discuss further.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

CSS Selectors:

We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

*Simple selectors :

1. universal selector (*):

/* Selects all elements */
* {
  color: green;
}

The selector selects all elements. The selector can also select all elements inside another element Many developers will use this trick to zero out the margins and padding.

* {
 margin: 0;
 padding: 0;
}

/* Select all elements inside <div> elements and set their background color to yellow: */
div * {
    background-color: yellow;
}

2.Type selectors:

/* All <a> elements. */
a {
  color: red;
}

The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.

More Examples

p {
  text-align: center;
  color: red;
}

Here, all

elements on the page will be center-aligned, with a red text color:

span {
  background-color: sky blue;
}

It will color all span elements with sky blue color.

3. Class selectors:

The CSS class selector matches elements based on the contents of their class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.

Html file

<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">This paragraph has red text and a yellow background.</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>

CSS file

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

result

4. Id selector:

The CSS ID selector matches an element based on the value of the element's id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector.

HTML file:

<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>

CSS file:

#identified {
  background-color: skyblue;
}

Result:

*CSS Combinators :

1.Descendant Selector:

The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

Html:

<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

CSS:

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

result:

2.Child Selector (>):

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

Html:

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

Css:

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

Result:

3.General sibling combinator:

The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

Html:

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<span>And this is a red span!</span>
<code>More code…</code>
<div> How are you? </div>
<p> Whatever it may be, keep smiling. </p>
<h1> Dream big </h1>
<span>And yet again this is a red span!</span>

Css:

p ~ span {
  color: red;
}

Result:

4. Adjacent sibling combinator:

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

Html:

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

Css:

li:first-of-type + li {
  color: red;
}
Copy to Clipboard

Result:

*Pseudo-class selectors :

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.

syntax:

selector:pseudo-class {
  property: value;
}

• :hover Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.

• :active Matches when an item is being activated by the user, for example clicked on.

• :focus Matches when an element has focus.

:link Matches links that have not yet been visited.

:visited Matches links that have been visited.

<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Result:

- The :first-child Pseudo-class

In the following example, the selector matches any

element that is the first child of any element:

p:first-child {
  color: blue;
}

In the following example, the selector matches the first element in all

elements:

p i:first-child {
  color: blue;
}

p:first-child i {
  color: blue;
}

selector::pseudo-element {
  property: value;
}

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

h1::before {
  content: url(smiley.gif);
}

h1::after {
  content: url(smiley.gif);
}

CSS [attribute] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and value. The following example selects all elements with a target="_blank" attribute:

a[target="_blank"] {
  background-color: yellow;
}

Styling Forms: The attribute selectors can be useful for styling forms without class or ID:

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}