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

Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy

This document provides an overview of CSS selectors and properties. It describes how to link CSS stylesheets, write CSS rules, use class and ID selectors, chain selectors, set font sizes and background colors, and separate HTML and CSS code.

Uploaded by

FATIN NOOR
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy

This document provides an overview of CSS selectors and properties. It describes how to link CSS stylesheets, write CSS rules, use class and ID selectors, chain selectors, set font sizes and background colors, and separate HTML and CSS code.

Uploaded by

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

Cheatsheets / Learn CSS

Selectors and Visual Rules


<link> Link Element
The <link> element is used to link HTML documents to external resources
like CSS les. 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="stylesheet"
rel attribute to specify the relationship of the linked document to the
type="text/css">
current document

●
type attribute to de ne 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 de ne 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 . followed by the class name. CSS ID selectors should /* Selects all elements with class="column" */
be unique and used to style only a single element. ID selectors are denoted with .column {
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 les to keep it separate from the HTML code.
The extension for CSS les is .css. These can be linked to an HTML le using a <head>
<link> tag in the <head> section.   <link href="style.css" type="text/css" 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 and h2 is set to red. h1, h2 {
  color: red;
}

Write CSS in HTML File


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

Selector Chaining
CSS selectors de ne 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
#column-one {
declarations for a property and ignore selector speci city. !important rules
will ensure that a speci c declaration always applies to the matched elements.   width: 200px !important;
}
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 <h3> elements that also have the /* Select h3 elements with the section-heading class */
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 given type or tag name.
Unlike for HTML syntax, we do not include the angle brackets when using type /* Selects all <p> tags */
selectors for tag names. When using type selectors, elements are matched p {
regardless of their nesting level in the HTML. }
Inline Styles
CSS styles can be directly added to HTML elements by using the style
attribute in the element’s opening tag. Each style declaration is ended with a <h2 style="text-align: center;">Centered text</h2>
semicolon. Styles added in this manner are known as inline styles.
<p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

CSS class selectors


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

HTML attributes with multiple values


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

Selector Speci city


Speci city is a ranking system that is used when there are multiple con icting
property values that point to the same element. When determining which rule to h1#header {
apply, the selector with the highest speci city wins out. The most speci c   color: blue;
selector type is the ID selector, followed by class selectors, followed by type } /* implemented */
selectors. In this example, only color: blue will be implemented as it has an
ID selector whereas color: red has a type selector. h1 {
  color: red;
} /* Not implemented */
Separating HTML code from CSS code
It is common practice to separate content code in HTML les from styling code
in CSS les. This can help make the code easier to maintain, by keeping the
syntax for each le separate, and any changes to the content or styling can be
made in their respective les.

CSS ID selectors
The CSS ID selector matches elements based on the contents of their id
#job-title {
attribute. The values of id 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 matched selector. They are denoted by a single space div p { }
between each selector and the descended selector. All matching elements are
selected regardless of the nesting level in the HTML. section ol li { }

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 or groups of elements. The property name and value are separated by CSS declaration format:
a colon, and the entire declaration must be terminated by a semi-colon. property-name: value;
*/

/* 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 di erent units or types such as pixels. font-size: 30px;

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
opacity: 0.5;
element. The value of this property ranges from 0 (transparent) to 1
(opaque).

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

Text Align
The text-align CSS property can be used to set the text alignment of inline
text-align: right;
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 one or more declarations.
The selector(s), which in this example is h1 , points to an HTML element. The h1 {
declaration(s), which in this example are color: blue and text-align:   color: blue;
  text-align: center;
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
p {
CSS. The value can be a valid color name supported in CSS like green or
  color : #2a2aff ;
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 resource URLs. These can be
background-image: url("../resources/image.png");
applied to several properties such as the background-image .

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

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

You might also like