CSS Cheat Sheet

CSS Definitions

CSS selector

  • Ref by By ID. Usage:  <div id="para1"> Some Text </div>

#para1 
text-align: center;
color: red;
  • Defining a CSS Class. Usage:  <div id="para1"> Some Text </div>
centre {
text-align: center;
color: red;
}
  • Ref by By ID:  <div class="large centre"> Some Text </div>
.large {
text-align: center;
color: red;
}
.centre{
text-align: center;
color: red;
}
  • Ref by By ID:  <div class="large centre"> Some Text </div>
.large {
text-align: center;
color: red;
}
.centre{
text-align: center;
color: red;
}
  • Grouping Selectors:  <div class="large centre"> Some Text </div>
h1, h2, p1 {
text-align: center;
color: red;
}

 

CSS Structure – elements within elements:

  • div.h1 * will address all elements inside the <body>-element:
<body>
    <h1>Not this one</h1>
    <div class="h1"> 
       <h1>but this one</h1>        
       <p>and this one</p> 
   </div> 
</body>
  • body h1 will address all <h1>-elements inside the <body>-element:
<body>
    <h1>This one</h1>
    <div>
        <h1>And also this one</h1>
    </div>
</body>
  • body .h1 will select all elements inside the body that have the class h1:
<body>
    <h1 class="h1">This one</h1>
    <div class="h1">And also this one</div>
</body>
  • body.h1 finally will style the <body>-element itself, when having a class h1:
<body class="h1"></body>

CSS Attribute Selectors


Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes or attribute values.


CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:

Example

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

Try it yourself »


CSS [attribute=”value”] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and value.

The following example selects all <a> elements with a target=”_blank” attribute:

Example

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

Try it yourself »


CSS [attribute~=”value”] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is “flower”:

Example

[title~=”flower”] {
border: 5px solid yellow;
}

Try it yourself »

The example above will match elements with title=”flower”, title=”summer flower”, and title=”flower new”, but not title=”my-flower” or title=”flowers”.


CSS [attribute|=”value”] Selector

The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value.

The following example selects all elements with a class attribute value that begins with “top”:

Note: The value has to be a whole word, either alone, like class=”top”, or followed by a hyphen( – ), like class=”top-text”!

Example

[class|=”top”] {
background: yellow;
}

Try it yourself »


CSS [attribute^=”value”] Selector

The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.

The following example selects all elements with a class attribute value that begins with “top”:

Note: The value does not have to be a whole word!

Example

[class^=”top”] {
background: yellow;
}

Try it yourself »


CSS [attribute$=”value”] Selector

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with “test”:

Note: The value does not have to be a whole word!

Example

[class$=”test”] {
background: yellow;
}

Try it yourself »


CSS [attribute*=”value”] Selector

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains “te”:

Note: The value does not have to be a whole word!

Example

[class*=”te”] {
background: yellow;
}

Try it yourself »


Styling Forms

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

Example

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

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

Leave a Reply

Skip to toolbar