Customizing Brandguide Using CSS

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 visual structure, layout, and aesthetics of the website.

CSS Syntax

The CSS syntax consists of a set of rules. These 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 property and value pairs which are 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 in front of the class name in our CSS. For example, to change the font of the sample header and paragraph below:

 <h1 class="i-am-a-class">header</p>
<p class="i-am-a-class">paragraph</p>

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 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:

 <p id="i-am-an-id">paragraph</p>

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: Space between words e.g. 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: Sets the starting 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, you can right click on the page and select "Inspect", or utilize short commands such as Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).

Screen_Shot_2021-04-28_at_12.53.29_PM.png

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

Screen_Shot_2021-04-28_at_12.56.27_PM.png

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

Screen_Shot_2021-04-28_at_12.59.04_PM.png

4. In this example we are going to 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.

Screen_Shot_2021-04-28_at_1.06.26_PM.png

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:

Screen_Shot_2021-04-28_at_1.08.32_PM.png

 

Was this article helpful?
0 out of 0 found this helpful