obniz Docs Guides JavaScript x obniz Adjust the style

Adjust the style

Each HTML element can be adjusted in color, shape, etc. by using style sheets.

In HTML, each element is made up of an element called the DOM.

<body>
  <h1>Hello</h1>
  <button id="button1">LED ON</button>
</body>

When you have this kind of HTML, h1 is a DOM, and so is a button. Also, the body is a single DOM.
Style sheets allow you to set up the appearance of each without changing the content. Especially for the HTML, CSS is used.

CSS

Now, let's actually change the previous page.
If you use the previous HTML in the obniz program and open it in Safari on a Mac, you see this

This is good enough, but the buttons are also small and a bit hard to press. Let's try to improve this with CSS.

<!-- HTML Example -->
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.5.0/obniz.js"></script>
    <style>
      h1 {
        color: red;
      }
      #button1 {
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <h1>Hello</h1>
    <button id="button1">LED ON</button>
  </body>
</html>

Copy This

This is what it looks like when you do this

Hello on h1 is now red and the button is larger.

CSS can be written inside a

In the case above.

  1. The tag "h1" with the text color red
  2. Add 50 pixels of padding to the button1 id

There are two designs named
The design set here is applied to everything in this Html.

To find out what kind of settings you can do, check out sites that are familiar with CSS.
There are many things you can do with CSS, such as centering, rounded corners, shadows, etc.

Reference Site.

https://www.w3schools.com/css/ English

http://www.htmq.com/style/index.shtml Japanese

Loading External CSS

There are people who create and publish "cool designs" without having to prepare CSS from scratch.
You can create a "cool design" simply by importing the CSS into your Html.

The famous one is a CSS called bootstrapping, published by Twitter.

http://getbootstrap.com

It's free to use. Let's import the published CSS here.

<!-- HTML Example -->
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.30.0/obniz.js"></script>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
      integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div id="obniz-debug"></div>
    <h1>Hello</h1>
    <button id="button1" class="btn btn-primary">LED ON</button>
  </body>
</html>

As you can see, is used to load an external CSS file that is open to the public, and the You can apply it with The version 4.1.1 of Twitter's Bootstrap is being loaded here.

And we've set the class for the button.
For now, if we run it, we'll look like this

It's now stylish.
For the button, I added a new class.
This makes it look like this blue button.
You can see that the CSS for btn and btn-primary classes has a
This is what I got from simply writing the class because it's written in the bootstrap.

You can see what's available in the CSS and It's on the Component page. Take a look at it.

http://getbootstrap.com/docs/4.0/getting-started/introduction/