CSS
Syntax and Selectors
| Syntax | Example Code | Notes |
|---|---|---|
| Write CSS in Separate Files | <head> <link href="style.css" type="text/css" rel = "stylesheet"> </head> |
CSS code can be written in its own files to keep it separate from the HTML code. The extension for CSS files is .css. These can be linked to an HTML file using a <link> tag in the <head> section. |
| Class and ID Selectors | /* Selects all elements with class="column" */ .column { } /* Selects element with id="first-item" */ #first-item { } |
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 be unique and used to style only a single element. ID selectors are denoted with a hash sign # followed by the id name. |
| Groups of CSS Selectors | h1, h2 { color: red; } |
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. |
| Chaining Selectors | /* Select h3 elements with the section-heading class */ h3.section-heading { color: blue; } /* Select elements with the section-heading and button class */ .section-heading.button { cursor: pointer; } |
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 section-heading class, the selector h3.section-heading can be used. |
| CSS class selectors | .calendar-cell { color: #fff; } |
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 value of the class attribute, a . needs to be prepended. |
| CSS descendant selector | div p { } section ol li { } |
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 between each selector and the descended selector. All matching elements are selected regardless of the nesting level in the HTML. |
Visual Rules
| Rule | Example Code | Notes |
|---|---|---|
| CSS declarations | /* CSS declaration format: property-name: value; */ /* CSS declarations */ text-align: center; color: purple; width: 100px; |
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 a colon, and the entire declaration must be terminated by a semi-colon. |
| !important Rule | #column-one { width: 200px !important; } .post-title { color: blue !important; } |
The CSS !important rule is used on declarations to override any other declarations for 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 using !important as bad practice. |
| CSS Rule Sets | h1 { color: blue; text-align: center; } |
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 declaration(s), which in this example are 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. |
| Setting foreground text color in CSS | p { color : #2a2aff ; } span { color : green ; } |
Using the color property, foreground text color of an element can be set in CSS. The value can be 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. |
| Resource URLs | background-image: url("url"); | In CSS, the url() function is used to wrap resource URLs. These can be applied to several properties such as the background-image. |
| Font Family | h2 { font-family: Verdana; } #page-title { font-family: "Courier New"; } |
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 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 is best practice to wrap them in quotes. |
The Box Model
Fundamentals
| Rule | Example Code | Notes |
|---|---|---|
| Face-Fonts | @font-face { font-family: 'MyOwnFont'; src: url('fonts/ Roboto.woff2') format('woff2'), url('fonts/ Roboto.woff') format('woff'), url('fonts/ Roboto.ttf') format('truetype') ; Google Web Fonts Additional resources It's a good idea to include TTF, WOFF, and WOFF2 formats with your @font-face rule to ensure compatibility on all browsers. |
One of the most common ways of importing font styles in your webpage is using using @font-face in CSS: Find the font you want and copy the code given below. You can rename it to anything you want in the font-family declaration. It uses the link source to get the font from google. Place the code at the top of your CSS (the order matters). Once the @font-face at-rule is defined, you can use the font-family type in your stylesheet! |
| Cascade and inheritance | Read this Lesson for more information. | The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved. |
| Link States | The proper order of these rules (LiV-HA!): a:link a:visited a:hover a:active |
The ordering of link state pseudo-class rules is important to reveal the proper information. When a user hovers and then clicks a link, those styles should always override the static styling surrounding a user's history with the link (unvisited :link and :visited). |
| Affordances, Signifiers, and Clickability | Signifiers, Not Affordances UI Patterns |
Signifiers, Not Affordances by Don Norman. This article discusses a bit of the history of thought around affordances and signifiers, and their importance in design. UI Patterns.com has many examples of solutions to common design patterns in web design. |
| CSS Transitions | Transitions | The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. View The Summit project for reference. |
Navigation
| Rule | Example Code | Notes |
|---|---|---|
| + Adjacent Sibling Combinator | The code below adds a “/“ symbol inbetween all adjacent breadcrumbs: .breadcrumb li+li::before { content: "/"; } |
Adjacent Sibling Combinator |
| Transitions | Code below apples to all changed properties. You can also list out speicifc propterties by using a comma: transition: all 0.5s ease-out; transition: margin-right 4s, color 1s; |
Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active Transitions |
| Triangles | Creating triangles in CSS. | Borders meet each other at angles. The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle. |
| Breadcrumb Types | Use breadcrumbs to indicate where a user is and the extent of the site. There are three major types of breadcrumbs: - Location - Attribute - Path |
- Location based breadcrumbs are based on where you are with respect to the navigation structure of the website - Attribute based breadcrumbs are based on the attributes of the page or product that you are browsing - Breadcrumbs can be based on a user's unique Path through the site. For example, if they landed on the home page, browsed to the about page and finally the registration page |
Wireframes
In this article, you will learn about wireframes and prototypes: what they are, why they're useful and how they're involved with the user experience design process. This is helpful if you'd like to understand the design process before development and how multiple iterations of a design must be critiqued and revised in order to present the ideal product to the user.
Everything You Need to Know about Wireframes and Prototypes