Tell me! How to write CSS
You can write content to display on web pages using the language HTML, but can’t design web pages only this one.
(For information on how to write HTML, see “Tell me! How to write HTML”.)
If you want to design, need programming language called CSS.
CSS stands for Cascading Style Sheets.
Now, I’ll tell you how to write.
Basic writing
Here are some HTML and CSS samples:
HTML
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>test</p>
</body>
</html>
When you open it in your browser, it looks like this:
Do you understand?
I prepared a P tag in HTML and wrote “test”.
And the letter “test” is red.
This is one of the effects of CSS.
CSS makes the letters red.
CSS is usually loaded in <head>.
In the above case, I wrote CSS that make color of <p> become red in <style>.
CSS is written a little differently from HTML.
To explain,
In CSS, write what(property) to do(value) and where(selector).
In the above case, meaning set p tag(selector) color(property) to red(value).
First, write a selector. Selectors are elements that you want to decorate. For example, Write the tag name like ‘p’, ‘table’, ‘html’, or write class name, or write id name.
When you write a tag name, the decoration is applied to all places on the web page where the tag is used.
If you say “No, I don’t want to apply it to all, I want to decorate only some elements”, you should specify the class name or id name.
class name? id name？
Look at the code below.
HTML
<html>
<head>
<style>
p {
color: red;
}
.blue-text {
color: blue;
}
#orange-text {
color: orange;
}
</style>
</head>
<body>
<p>Text1</p>
<p class="blue-text">Text2</p>
<p>Text3</p>
<p class="blue-text">Text4</p>
<p id="orange-text">Text5</p>
</body>
</html>
I tried styling for various selectors.
What the above means is,
make letters of <p> red, but make letters of elements with class name “blue-text” blue, and make letters of the element with the id name “orange-text” orange.
Class name start with ‘.’, and id name start with ‘#’.
Class and id are a type of attribute of html element.
Both classe and id are selectors in CSS, but which should you use?
The difference between them is whether there can be multiple elements with the same name on a web page.
There can be multiple elements with the same class name, but there can’t be multiple elements with the same id name.
Ids are used to identify elements in a web page, so use classes if you want to apply decorations to multiple elements.
(Actually, even if you write multiple ids, it will work, but let’s not write duplicate id names because it is the wrong way.)
Id is rather used in javascript than CSS.
If you only write HTML and CSS, I think that class alone is enough.
Properties and values
When you write a selector, enclose it with “{” and “}”.
The enclosed area is called a block.
Write the contents of the decoration for the selector in the block.
In the above case, I only write to change the color, but you can write more than one.
CSS
.box {
width: 200px;
height: 100px;
background: plum;
border-radius: 10px;
}
Above, this is the result of that prepared a style of class name ‘box’ and prepared an element ‘<div class=”box”></div>’.
I write about that the width is 200px, the height is 100px, the background color is plum color, and the corner of the box is slightly rounded.
In this way, you can also create shape using div tags and CSS.
Summary
This time, I introduced a few basic writing methods and decorations of CSS, but there are still many ways to write selectors and types of properties.
I think that it will become fun to make web page when it becomes usable to some extent.
I will introduce various ways to write in this blog, please check it out.
Shitakke!
- CSS syntax consists of selector and propery and value
- Selector is a target of decoration
- Property is a type of decoration
- Value is a specific setting for the property.
- Selector can have tags, classes, and ids
- Class, id is tag attribute
- Class names can overlap in web pages, but not ids
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy