Scribd
Upload
48 views

Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy

CSS is a language used with HTML to style and customize how elements appear. CSS can be written in separate files and linked to HTML using <link> tags, or written directly in <style> tags within HTML. CSS selectors like classes, IDs, types, and chaining target elements for styling. Common properties include color, background-color, font-size, text-align, and opacity. CSS rule sets combine selectors and declarations to style elements.

Uploaded by

Claudiu Stefan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy

CSS is a language used with HTML to style and customize how elements appear. CSS can be written in separate files and linked to HTML using <link> tags, or written directly in <style> tags within HTML. CSS selectors like classes, IDs, types, and chaining target elements for styling. Common properties include color, background-color, font-size, text-align, and opacity. CSS rule sets combine selectors and declarations to style elements.

Uploaded by

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

Cheatsheets / Learn CSS

Selectors and Visual Rules


Link Element <link>
The <link> element is used to link HTML documents
to external resources like CSS files. It commonly uses: <!-- How to link an external stylesheet
with href, rel, and type attributes -->
●
href attribute to specify the URL to the
external resource <link
href="./path/to/stylesheet/style.css"
●
rel attribute to specify the relationship of the
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.

Class and ID Selectors


CSS classes can be reusable and applied to many
elements. Class selectors are denoted with a period . /* Selects all elements with
followed by the class name. CSS ID selectors should be class="column" */
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 {
}

Write CSS in Separate Files


CSS code can be written in its own files to keep it
separate from the HTML code. The extension for CSS <head>
files is .css. These can be linked to an HTML file using a <link href="style.css" type="text/css"
<link> tag in the <head> section. rel="stylesheet">
</head>
Groups of CSS Selectors
Match multiple selectors to the same CSS rule, using a
comma-separated list. In this example, the text for both h1, h2 {
h1 and h2 is set to red. color: red;
}

Write CSS in HTML File


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

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.

!important Rule
The CSS !important rule is used on declarations to
override any other declarations for a property and ignore #column-one {
selector specificity. !important rules will ensure width: 200px !important;
that a specific declaration always applies to the matched }
elements. However, generally it is good to avoid using
!important as bad practice. .post-title {
color: blue !important;
}
Chaining Selectors
CSS selectors can be chained so that rule sets apply only
to elements that match all criteria. For instance, to select /* Select h3 elements with the section-
<h3> elements that also have the section- heading class */
heading class, the selector h3.section- h3.section-heading {
heading can be 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
given type or tag name. Unlike for HTML syntax, we do /* Selects all <p> tags */
not include the angle brackets when using type selectors p {
for tag names. When using type selectors, elements are }
matched regardless of their nesting level in the HTML.

CSS class selectors


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

HTML attributes with multiple values


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

Inline Styles
CSS styles can be directly added to HTML elements by
using the style attribute in the element’s opening <h2 style="text-align: center;">Centered
tag. Each style declaration is ended with a semicolon. text</h2>
Styles added in this manner are known as inline styles.
<p style="color: blue; font-size:
18px;">Blue, 18-point text</p>
Selector Specificity
Specificity is a ranking system that is used when there
are multiple conflicting property values that point to the h1#header {
same element. When determining which rule to apply, color: blue;
the selector with the highest specificity wins out. The } /* implemented */
most specific selector type is the ID selector, followed by
class selectors, followed by type selectors. In this
h1 {
example, only color: blue will be implemented as
color: red;
it has an ID selector whereas color: red has a } /* Not implemented */
type selector.

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.

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

CSS descendant selector


The CSS descendant selector combinator is used to
match elements that are descended from another div p { }
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.

CSS declarations
In CSS, a declaration is the key-value pair of a CSS
property and its value. CSS declarations are used to set /*
style properties and construct rules to apply to individual CSS declaration format:
or groups of elements. The property name and value are property-name: value;
separated by a colon, and the entire declaration must be */
terminated by a semi-colon.

/* CSS declarations */
text-align: center;
color: purple;
width: 100px;
Font Size
The font-size CSS property is used to set text
sizes. Font size values can be many different units or font-size: 30px;
types such as pixels.

Background Color
The background-color CSS property controls the
background color of elements. background-color: blue;

Opacity
The opacity CSS property can be used to control
the transparency of an element. The value of this opacity: 0.5;
property ranges from 0 (transparent) to 1 (opaque).

Font Weight
The font-weight CSS property can be used to set
the weight (boldness) of text. The provided value can be font-weight: bold;
a keyword such as bold or normal .

Text Align
The text-align CSS property can be used to set
the text alignment of inline contents. This property can text-align: right;
be set to these values: left , right , or center .

CSS Rule Sets


A CSS rule set contains one or more selectors and one or
more declarations. The selector(s), which in this example h1 {
is h1 , points to an HTML element. The declaration(s), color: blue;
which in this example are color: blue and text-align: center;
text-align: center style the element with a }
property and value. The rule set is the main building
block of a CSS sheet.

Setting foreground text color in CSS


Using the color property, foreground text color of an
element can be set in CSS. The value can be a valid color p {
name supported in CSS like green or blue . Also, 3 color : #2a2aff ;
digit or 6 digit color code like #22f or #2a2aff can
}
be used to set the color.
span {
color : green ;
}
Resource URLs
In CSS, the url() function is used to wrap resource
URLs. These can be applied to several properties such as background-image:
the background-image . url("../resources/image.png");

Background Image
The background-image CSS property sets the
background image of an element. An image URL should background-image: url("nyan-cat.gif");
be provided in the syntax url("moon.jpg") as the
value of the property.

Font Family
The font-family CSS property is used to specify
the typeface in a rule set. Fonts must be available to the h2 {
browser to display correctly, either on the computer or font-family: Verdana;
linked as a web font. If a font value is not available, }
browsers will display their default font. When using a
multi-word font name, it is best practice to wrap them in #page-title {
quotes.
font-family: "Courier New";
}

Color Name Keywords


Color name keywords can be used to set color property
values for elements in CSS. h1 {
color: aqua;
}

li {
color: khaki;
}

You might also like