Have you seen the new and improved Brandguide?

Learn how to migrate your content and update to the new experience inGetting Started with Brandguide.

Editing capabilities on your existing Brandguide will be going away on September 1, 2023. On December 1, 2023, the legacy Brandguide editor will no longer be available.

Cascading Style Sheets

CSS, or Cascading Style Sheets, is a design language that is used by web developers to create a uniform and visually pleasing look across several pages of a website. HTML largely determines textual content, but CSS determines the visual structure, layout, and aesthetics of the website.

CSS Syntax

CSS语法由一组规则。这些rules have 3 parts: a selector, a property, and a value.

Selector {

property: value;

}

The selector represents the HTML element that you want to style. The property refers to a specific aspect of the HTML element, such as color, font-family, or margin. Every property used in CSS has a set of accepted values, for example, a hex code or pixel value.

The selector can have multiple properties and value pairs separated by semi-colons. For example, the following will apply the given values of the properties to all h1 tags:

h1 {

font-family: comic sans;

font-size: 12px;

color: blue;

}

Common CSS Selectors

CSS Type Selector

The CSS type selector selects all elements of a specific type within the webpage.

Here are some examples of common type selectors:

• p: Selects all paragraph tags.
• a: Selects all hyperlinks.
• h1: Selects all h1 header tags.
• span: Selects all span tags.
• body: Selects all elements within the webpage body.
• button: Selects all buttons on the webpage.
• li: Selects all list items.

CSS Class Selector

A CSS class is an attribute used to define a group of HTML elements. This makes it possible to customize multiple elements using a single selector. We can do this by typing a period (.) character before the class name in our CSS. For example, to change the font of the sample header and paragraph below:

header

paragraph

We would use the following CSS to target all elements with a class of i-am-a-class:

.i-am-a-class {

font-family: helvetica;

}

CSS ID Selector

A CSS id is an attribute used to define a single unique element on a webpage. To select an element with a specific id, type a hash (#) symbol in front of the id. For example, to change the font of the paragraph below:

paragraph

We would use the following CSS to target only the element with an id of i-am-an-id:

#i-am-an-id {

font-family: helvetica;

}

CSS Properties

Text Properties

• font-family:Sets the text font e.g.,"Arial" or "Times"
• font-size:Sets the font size e.g.,5px or 1em
• font-weight:Sets the font weight or "boldness," e.g."bold" or 200
• color:Sets the color of the text e.g.,blue, #add8e6, or RGB(135,206,250)
• line-height:Vertical space between lines, e.g.5px or 1em
• letter-spacing:Space between characters e.g.,5px or 1em
• word-spacing:单词之间的空间。5px or 1em

Background Properties

• background-color:Set the element's background color e.g.,blue, #add8e6, or RGB(135,206,250)
• background-image:Sets a background image based on the URL e.g.url('sample-image.jpg')
• background-position:设置开始position of a background image e.g.,center or 50%

Spacing Properties

The following properties accept auto, inherit, % or any CSS length unit

• height:Sets the height of the element
• width:Sets the width of the element
• padding:Sets the padding space of the element
• margin:Sets the margin space of the element

Lengths and Units

• px:Pixels (1px = 1/96th of 1 inch)
• em:Relative to the font-size of the element (3em = 3 times the size of the current font)
• vw:Relative to 1% of the width of the viewport
• vh:Relative to 1% of the height of the viewport
• %:Relative to the parent element

Finding Elements Using Chrome DevTools

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. We can use these tools to quickly locate HTML elements and existing CSS styles on any website.

1. To access DevTools, right-click on the page and selectInspector utilize short commands such as Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).

2. Once the DevTools panel is open, select the Inspect tool at the top of the page.

3. You can then click on the element you want to style on the page. The selectors that customize this element will be highlighted under the Elements tab. The Styles tab below will reveal the CSS style rules currently applied to that element.

4. In this example, we will change the bar height to 100px by utilizing the color-bar class that we found using the DevTools inspector. We will also add the "!important" property to the end of the declaration to override all previous styling for that property on the element.

5. Once the CSS has been updated and the changes have been saved, you will see that the height of the bar has changed to 100px: