Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
20 views

Web Development Fundamentals: 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 with a .css extension and linked to HTML with <link> tags, or written directly in <style> tags within an HTML file. CSS uses selectors to target elements and declarations to set property values that control styles. Selectors include type, class, ID, and descendant selectors. Specificity determines which styles are applied when multiple selectors target the same element.

Uploaded by

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

Web Development Fundamentals: 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 with a .css extension and linked to HTML with <link> tags, or written directly in <style> tags within an HTML file. CSS uses selectors to target elements and declarations to set property values that control styles. Selectors include type, class, ID, and descendant selectors. Specificity determines which styles are applied when multiple selectors target the same element.

Uploaded by

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

22/09/23, 22:12

Cheatsheets / Web Development Fundamentals

Learn CSS: Selectors and Visual


Rules

<link> Link Element


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

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
<link href="style.css" type="text/css"
CSS files is .css. These can be linked to an HTML
file using a <link> tag in the <head> rel="stylesheet">
section. </head>

about:srcdoc Página 1 de 9
22/09/23, 22:12

Write CSS in HTML File


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

Inline Styles
CSS styles can be directly added to HTML <h2 style="text-align: center;">Centered
elements by using the style attribute in the
text</h2>
element’s opening tag. 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.

about:srcdoc Página 2 de 9
22/09/23, 22:12

Class and ID Selectors


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

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


*/
#first-item {
}

Groups of CSS Selectors


Match multiple selectors to the same CSS rule, h1, h2 {
using a comma-separated list. In this example, the
color: red;
text for both 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.

about:srcdoc Página 3 de 9
22/09/23, 22:12

Chaining Selectors
CSS selectors can be chained so that rule sets /* Select h3 elements with the section-
apply only to elements that match all criteria. For
heading class */
instance, to select <h3> elements that also have
the section-heading class, the selector h3.section-heading {
h3.section-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 /* Selects all <p> tags */
of a given type or tag name. Unlike for HTML
p {
syntax, we do 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.

CSS class selectors


The CSS class selector matches elements based .calendar-cell {
on the contents of their class attribute. For
color: #fff;
selecting 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.

about:srcdoc Página 4 de 9
22/09/23, 22:12

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

CSS ID selectors
The CSS ID selector matches elements based on #job-title {
the contents of their id attribute. The values of
font-weight: bold;
id 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.

CSS descendant selector


The CSS descendant selector combinator is used div p { }
to match elements that are descended from
another matched selector. They are denoted by a
single space between each selector and the section ol li { }
descended selector. All matching elements are
selected regardless of the nesting level in the
HTML.

about:srcdoc Página 5 de 9
22/09/23, 22:12

CSS declarations
In CSS, a declaration is the key-value pair of a CSS /*
property and its value. CSS declarations are used
CSS declaration format:
to set style properties and construct rules to apply
to individual or groups of elements. The property property-name: value;
name and value are 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 font-size: 30px;
text sizes. Font size values can be many different
units or types such as pixels.

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

!important Rule
The CSS !important rule is used on #column-one {
declarations to override any other declarations for
width: 200px !important;
a property and ignore selector specificity.
!important rules will ensure that a specific }
declaration always applies to the matched
elements. However, generally it is good to avoid
.post-title {
using !important as bad practice.
color: blue !important;
}

about:srcdoc Página 6 de 9
22/09/23, 22:12

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

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

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

CSS Rule Sets


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

about:srcdoc Página 7 de 9
22/09/23, 22:12

Setting foreground text color in CSS


Using the color property, foreground text color p {
of an element can be set in CSS. The value can be
color : #2a2aff ;
a valid color name supported in CSS like green
or blue . Also, 3 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 background-image:
resource URLs. These can be applied to several
url("../resources/image.png");
properties such as the background-image .

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

Font Family
The font-family CSS property is used to h2 {
specify the typeface in a rule set. Fonts must be
font-family: Verdana;
available to the browser to display correctly, either
on the computer or 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
#page-title {
is best practice to wrap them in quotes.
font-family: "Courier New";
}

about:srcdoc Página 8 de 9
22/09/23, 22:12

Color Name Keywords


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

li {
color: khaki;
}

Print Share

about:srcdoc Página 9 de 9

You might also like