Scribd
Upload
7 views

Learn CSS - Syntax and Selectors Cheatsheet - Codecademy

This document provides an overview of CSS syntax and selectors. It explains how to link CSS stylesheets, write CSS in separate files or inline, and use different selector types like classes, IDs, descendants. The document also covers CSS specificity and how selectors are evaluated when there are conflicts.

Uploaded by

ahmedahmedlaidi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Learn CSS - Syntax and Selectors Cheatsheet - Codecademy

This document provides an overview of CSS syntax and selectors. It explains how to link CSS stylesheets, write CSS in separate files or inline, and use different selector types like classes, IDs, descendants. The document also covers CSS specificity and how selectors are evaluated when there are conflicts.

Uploaded by

ahmedahmedlaidi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

15/11/2023 18:30 Learn CSS: Syntax and Selectors Cheatsheet | Codecademy

Cheatsheets / Learn CSS

Syntax and Selectors

<link> Link Element

The <link> element is used to link HTML documents <!-- How to link an external stylesheet
to external resources like CSS files. It commonly uses:
with href, rel, and type attributes -->
href attribute to specify the URL to the external
resource <link
rel attribute to specify the relationship of the href="./path/to/stylesheet/style.css"
linked document to the current document rel="stylesheet" type="text/css">
type attribute to define the type of content
being linked

Purpose of CSS

CSS, or Cascading Style Sheets, is a language that is


used in combination with HTML that customizes how
HTML elements will appear. CSS can define styles and
change the layout and design of a sheet.

Write CSS in Separate Files

CSS code can be written in its own files to keep it <head>


separate from the HTML code. The extension for CSS
<link href="style.css" type="text/css"
files is .css. These can be linked to an HTML file using a
<link> tag in the <head> section.
rel="stylesheet">
</head>

https://www.codecademy.com/learn/learn-css/modules/syntax-and-selectors/cheatsheet 1/5
15/11/2023 18:30 Learn CSS: Syntax and Selectors Cheatsheet | Codecademy

Write CSS in HTML File

CSS code can be written in an HTML file by enclosing <head>


the code in <style> tags. Code surrounded by
<style>
<style> tags will be interpreted as CSS syntax.
h1 {
color: blue;
}
</style>
</head>

Inline Styles

CSS styles can be directly added to HTML elements by <h2 style="text-align: center;">Centered
using the style attribute in the element’s opening tag.
text</h2>
Each style declaration is ended with a semicolon. Styles
added in this manner are known as inline styles.
<p style="color: blue; font-size:
18px;">Blue, 18-point text</p>

Separating HTML code from CSS code

It is common practice to separate content code in


HTML files from styling code in CSS files. This can help
make the code easier to maintain, by keeping the syntax
for each file separate, and any changes to the content
or styling can be made in their respective files.

Class and ID Selectors

CSS classes can be reusable and applied to many /* Selects all elements with
elements. Class selectors are denoted with a period .
class="column" */
followed by the class name. CSS ID selectors should be
unique and used to style only a single element. ID .column {
selectors are denoted with a hash sign # followed by }
the id name.

/* Selects element with id="first-item"


*/
#first-item {
}

https://www.codecademy.com/learn/learn-css/modules/syntax-and-selectors/cheatsheet 2/5
15/11/2023 18:30 Learn CSS: Syntax and Selectors Cheatsheet | Codecademy

Groups of CSS Selectors

Match multiple selectors to the same CSS rule, using a h1, h2 {


comma-separated list. In this example, the text for both
color: red;
h1 and h2 is set to red.
}

Selector Chaining

CSS selectors define the set of elements to which a CSS


rule set applies. For instance, to select all <p>
elements, the p selector can be used to create style
rules.

Chaining Selectors

CSS selectors can be chained so that rule sets apply /* Select h3 elements with the section-
only to elements that match all criteria. For instance, to
heading class */
select <h3> elements that also have the section-
heading class, the selector h3.section-heading can be h3.section-heading {
used. color: blue;
}

/* Select elements with the section-


heading and button class */
.section-heading.button {
cursor: pointer;
}

CSS Type Selectors

CSS type selectors are used to match all elements of a /* Selects all <p> tags */
given type or tag name. Unlike for HTML syntax, we do
p {
not include the angle brackets when using type
selectors for tag names. When using type selectors, }
elements are matched regardless of their nesting level
in the HTML.

https://www.codecademy.com/learn/learn-css/modules/syntax-and-selectors/cheatsheet 3/5
15/11/2023 18:30 Learn CSS: Syntax and Selectors Cheatsheet | Codecademy

CSS class selectors

The CSS class selector matches elements based on the .calendar-cell {


contents of their class attribute. For selecting
color: #fff;
elements having calendar-cell as the value of the
class attribute, a . needs to be prepended. }

HTML attributes with multiple values

Some HTML attributes can have multiple attribute <div class="value1 value2 value3"></div>
values. Multiple attribute values are separated by a
space between each attribute.

Selector Specificity

Specificity is a ranking system that is used when there h1#header {


are multiple conflicting property values that point to
color: blue;
the same element. When determining which rule to
apply, the selector with the highest specificity wins out. } /* implemented */
The most specific selector type is the ID selector,
followed by class selectors, followed by type selectors. h1 {
In this example, only color: blue will be implemented
color: red;
as it has an ID selector whereas color: red has a type
selector.
} /* Not implemented */

CSS ID selectors

The CSS ID selector matches elements based on the #job-title {


contents of their id attribute. The values of id
font-weight: bold;
attribute should be unique in the entire DOM. For
selecting the element having job-title as the value of
}
the id attribute, a # needs to be prepended.

https://www.codecademy.com/learn/learn-css/modules/syntax-and-selectors/cheatsheet 4/5
15/11/2023 18:30 Learn CSS: Syntax and Selectors Cheatsheet | Codecademy

CSS descendant selector

The CSS descendant selector combinator is used to div p { }


match elements that are descended from another
matched selector. They are denoted by a single space
between each selector and the descended selector. All section ol li { }
matching elements are selected regardless of the
nesting level in the HTML.

Print Share

https://www.codecademy.com/learn/learn-css/modules/syntax-and-selectors/cheatsheet 5/5

You might also like