Signups are currently closed. Check back soon!

Studio X Help Guide

CSS Basics

Colours, fonts, spacing, layouts and animation.

CSS decides how things look. You write it inside a <style> block (put it at the top of Your Content). Each rule picks some elements with a selector, then lists properties and values in curly braces:

<style>
  p {                 /* selector: every <p> */
    color: purple;    /* property: value; */
    font-size: 15px;
  }
</style>

You can also style one element directly with a style attribute: <p style="color: purple">. That's handy for quick one-offs, but a <style> block keeps things tidy.

Selectors: picking what to style

Selector	Picks
`p`	every `<p>`
`.fancy`	everything with `class="fancy"`
`#intro`	the one element with `id="intro"`
`.card p`	`<p>`s inside something with class `card`
`a:hover`	links while the mouse is over them
`h2, h3`	both `<h2>` and `<h3>`

Try it: edit the code and watch the resultAdd to my profile

<style>
  p { color: #555; }
  .fancy { font-style: italic; color: #b0179b; }
  #intro { font-size: 18px; font-weight: bold; }
  a:hover { background: yellow; }
</style>

<p id="intro">I'm the intro.</p>
<p>I'm a regular paragraph.</p>
<p class="fancy">I'm fancy.</p>
<p>Hover <a href="https://example.com">this link</a>.</p>

Loading...

Colours

Colours can be names (tomato), hex codes (#0149cf), or rgb(). Add a fourth number to rgba() for see-through colours. Gradients blend between colours.

Try it: edit the code and watch the resultAdd to my profile

<style>
  .swatch { padding: 10px; margin: 6px 0; color: white; font-weight: bold; }
</style>

<div class="swatch" style="background: tomato">tomato</div>
<div class="swatch" style="background: #0149cf">#0149cf (Xinsto blue)</div>
<div class="swatch" style="background: rgba(0, 0, 0, 0.5)">rgba: half see-through black</div>
<div class="swatch" style="background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff)">gradient</div>

Loading...

Tip: Profile Colours in Studio X already set your page's main colours. You can use those same colours in your own CSS, so everything matches even when you switch presets. See Xinsto Hooks.

Text and fonts

Try it: edit the code and watch the resultAdd to my profile

<style>
  .big   { font-size: 28px; font-weight: bold; letter-spacing: -1px; }
  .serif { font-family: Georgia, serif; font-size: 16px; }
  .mono  { font-family: "Courier New", monospace; }
  .caps  { text-transform: uppercase; letter-spacing: 3px; font-size: 11px; }
  .glow  { text-shadow: 0 0 8px #ff00cc; color: #fff; background: #222; padding: 6px; }
  .center { text-align: center; }
</style>

<p class="big">Big bold heading</p>
<p class="serif">A serif font feels like a book.</p>
<p class="mono">Monospace looks like code.</p>
<p class="caps">Spaced out capitals</p>
<p class="glow center">Glowing text</p>

Loading...

Want a special font? Many free font sites give you a <link> line to paste at the top of your content, then you use the font's name in font-family. Always list a backup font after it, like font-family: "Fancy Font", sans-serif;.

The box model: padding, border, margin

Every element is a box. Padding is space inside the border, border is the line around it, and margin is space outside. border-radius rounds the corners and box-shadow adds a shadow.

Try it: edit the code and watch the resultAdd to my profile

<style>
  .box {
    padding: 16px;
    border: 3px solid #0149cf;
    margin: 12px 0;
    border-radius: 12px;
    box-shadow: 4px 4px 0 #0149cf;
    background: #eef3ff;
  }
</style>

<div class="box">Padding inside, border around, margin outside.</div>
<div class="box" style="border-style: dashed; border-radius: 0">Dashed, square corners.</div>

Loading...

Backgrounds

A background can be a colour, a gradient, or a picture. Pictures repeat (tile) by default, very 2006.

Try it: edit the code and watch the resultAdd to my profile

<style>
  .tiled  { background: url("https://www.xinsto.com/images/help/tile.png"); padding: 30px; }
  .cover  { background: url("https://www.xinsto.com/images/help/sunset.png") center / cover; padding: 40px; color: white; text-shadow: 0 1px 3px #000; }
</style>

<div class="tiled">A tiled background.</div>
<br>
<div class="cover"><b>One picture stretched to cover the box.</b></div>

Loading...

Layout: side by side with flexbox

display: flex puts the boxes inside it in a row. gap spaces them out, and flex: 1 makes them share the width.

Try it: edit the code and watch the resultAdd to my profile

<style>
  .row { display: flex; gap: 10px; }
  .row div { flex: 1; padding: 12px; background: #d8dfea; text-align: center; }
</style>

<div class="row">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Loading...

To center something both ways inside a box, use display: flex; align-items: center; justify-content: center;.

Layout: grids

display: grid is perfect for photo galleries and Top 8s. repeat(auto-fill, minmax(100px, 1fr)) fits as many columns as there's room for, so it works on phones too.

Try it: edit the code and watch the resultAdd to my profile

<style>
  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
</style>

<div class="gallery">
  <img src="https://www.xinsto.com/images/help/sunset.png" alt="Sunset">
  <img src="https://www.xinsto.com/images/help/stars.png" alt="Stars">
  <img src="https://www.xinsto.com/images/help/pixels.png" alt="Pixels">
  <img src="https://www.xinsto.com/images/help/sunset.png" alt="Sunset again">
</div>

Loading...

Looking good on phones

Lots of people will see your profile on a phone. A @media rule only applies when the screen is narrow, so you can stack things up:

Try it: edit the code and watch the resultAdd to my profile

<style>
  .cols { display: flex; gap: 10px; }
  .cols div { flex: 1; background: #ffe3f1; padding: 10px; }

  @media (max-width: 500px) {
    .cols { flex-direction: column; }
  }
</style>

<div class="cols">
  <div>Side by side on a computer...</div>
  <div>...stacked on a phone.</div>
</div>
<p><small>Drag your browser narrower to watch it switch.</small></p>

Loading...

Phone-friendly habits: avoid fixed widths wider than about 320px (use max-width or % instead), and give pictures max-width: 100%.

Hover effects and transitions

Try it: edit the code and watch the resultAdd to my profile

<style>
  .pop {
    display: inline-block; padding: 10px 18px; background: #0149cf; color: white;
    border-radius: 6px; transition: transform 0.2s, background 0.2s;
  }
  .pop:hover { transform: scale(1.1) rotate(-3deg); background: #b0179b; }
</style>

<span class="pop">Hover me</span>

Loading...

Animations

@keyframes describes an animation; animation plays it.

Try it: edit the code and watch the resultAdd to my profile

<style>
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
  }
  @keyframes rainbow {
    0%   { color: red; }    25% { color: orange; }
    50%  { color: green; }  75% { color: blue; }
    100% { color: red; }
  }
  .bounce  { display: inline-block; animation: bounce 1s ease-in-out infinite; font-size: 28px; }
  .rainbow { animation: rainbow 3s linear infinite; font-weight: bold; font-size: 18px; }

  /* Be kind: calm things down for people who turn animations off */
  @media (prefers-reduced-motion: reduce) {
    .bounce, .rainbow { animation: none; }
  }
</style>

<span class="bounce">🏀</span>
<p class="rainbow">Rainbow text, forever.</p>

Loading...

Comments in CSS

Notes in CSS go between /* and */. They're great for remembering what each part does.

Next up

Now that you can style anything, learn how to restyle the parts Xinsto adds: Xinsto Hooks »

« HTML Basics Xinsto Hooks »