CSS basics for website creation
I will explain the basics of CSS as prerequisite knowledge for creating a website. With this much knowledge, I aimed for something that would allow me to write CSS freely.
What is CSS (cascading style sheet)?
CSS is for designing HTML. You can change the color of the characters and the color of the background by using CSS. You can also specify the placement of each element. You can design to some extent with HTML, but the mainstream is to design the meaning of the document with HTML and with CSS.
CSS description using style attribute
The easiest way to apply CSS to a tag is to use the style attribute.
<h1 style = "color: red; font-size: 200%;"> Heading 1 </h1> <div style = "background-color: blue;"> block element </div> <p style = "border: 1px green solid;"> paragraph </p>
If you write as above, it will be displayed as follows. You can see that the font color is red, the background is blue, and there is a green border.
[f: id: perlcodesample: 20110526135651p: image]
CSS is described by a combination of "property: value" such as "color: red".
Property: Value
You can write multiple "property: value" separated by a semicolon ";".
CSS description using style tag
You can use the style tag to separate the HTML tag from the style. Let's rewrite the above style sheet using the style tag.
<style type = "text / css"> / * <! [CDATA [* /
h1 {
color: red;
font-size: 200%;
}
div {
background-color: blue;
}
p {
border: 1px green solid;
}
/ *]]> * / </style>
<h1> Heading 1 </h1>
<div> block element </div>
<p> Paragraph </p>
The style attribute in the tag is gone, and the stylesheet is described in the style tag. The h1 and div of "h1 {...}" and "div {...}" are called selectors.
Selector {
Property 1: Value 1;
Property 1: Value 2;
}
The selector specifies which element to apply the CSS to. If you specify h1, CSS will be applied to all h1s.
Read externally defined CSS
CSS can also be read as an external file. The description method is the same as the method using the style tag.
First, prepare CSS as an external file. Name it comonn.css and place it in the document root.
/* common.css * /
h1 {
color: red;
font-size: 200%;
}
div {
background-color: blue;
}
p {
border: 1px green solid;
}
The HTML looks like this:
<html>
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8">
<link href = "/ common.css" media = "screen" rel = "stylesheet" type = "text / css" />
</head>
<body>
<h1> Heading 1 </h1>
<div> block element </div>
<p> Paragraph </p>
</body>
</html>
The CSS defined externally is read using the link tag.
If you want to share CSS on many pages, it's best to define it in an external file. It's a good idea to use the style tag for individual CSS on the page.
Comments
To write a comment in CSS, enclose the part you want to comment with "/ *" and "* /".
/* comment */
Character decoration properties
From here, we will introduce commonly used properties by field.
Text color color
<div style = "color: red;"> red </div> <div style = "color: # FF0000;"> red </div>
Use color to specify the font color. To specify the color, use color name or the color code. Specify the color code in hexadecimal. The first two digits are the degree of "red", the next two digits are the degree of "green", and the last two digits are the degree of "blue". The light of each color is combined and "#FFFFFF" becomes white and "# 000000" becomes black.
Character size font-size
<div style = "font-size: 200%;"> 200%</div> <div style = "font-size: 50%;"> 50%</div>
Use font-size to specify the font size. There are various ways to specify the size, but it seems that the method of specifying by "%", which is specified by the relative size from the parent element, is often used.
Character thickness font-weight
<div style = "font-weight: bold;"> bold </div>
To make the characters thicker, specify "bold" for font-weight.
Underline text-decoration
<div style = "text-decoration: underline;"> Underline </div> <div style = "text-decoration: none;"> Cancel underline </div> <div style = "text-decoration: line-through;"> Strikethrough </div>
To add an underline, specify "underline" for text-decoration. If you want to remove the underline, specify "none". You can add a strikethrough by specifying "line-through".
Properties related to character position and placement
Specifying the left and right positions of characters text-align
<div style = "text-align: left;"> Left justified </div> <div style = "text-align: center;"> center </div> <div style = "text-align: right;"> right justified </div>
Use text-align to specify the character position. "Left" is left-aligned, "center" is center-aligned, and "right" is right-aligned.
Note that this property only has an effect on block elements. It has no effect on inline elements. Since span is an inline element, the following description has no effect.
<span style = "text-align: right;"> right justified </span>
Line height line-height
<div style = "line-height: 150%;"> The line height is specified by line-height. Opening the line height to some extent has the effect of making the text easier to read. Set the row height for easy viewing. Writing such a long sentence should span two lines. </div>
Use line-height to specify the height of the line. There are several ways to specify the value, but it seems that the description using "%" is often used. "%" Specifies how high the line should be with respect to the height of the character. So, for example, if you specify "150%", if the height of the character is 100, it will be half the line spacing of "50" sentences. Properly specifying the line spacing has the effect of making the text easier to read.
Character spacing letter-spacing
<div style = "letter-spacing: 1em;"> Character spacing </div> <div style = "letter-spacing: 0.1em;"> Easy-to-read character spacing </div>
Use letter-spacing to specify the character spacing. There are several ways to specify the value, but it seems that "em" based on one character is often used. It seems that a slightly wider character spacing has the effect of making the text easier to read.
Background properties
Background color background-color
<div style = "background-color: red;"> background color </div> <div style = "background-color: #FFDDDD;"> Background color (very light red) </div> <div style = "background-color: #DDFFDD;"> Background color (very light green) </div> <div style = "background-color: #DDDDFF;"> Background color (very light blue) </div>
Use background-color to specify the background color. The light background color seems to be often used when designing.
background image background-image
<div style = "background-image: url ('/image/sky.png');"> background image </div>
Use background-image to specify a background image. Specify the URL of the image. It seems better to specify the URL as an absolute path from the document root. By default, the background image is displayed repeatedly vertically and horizontally.
Specifying the repetition of the background image
<div style = "background-repeat: no-repeat;"> No repeat </div>
The background image is repeated by default, but you can cancel the repetition by specifying "no-repeat" for background-repeat.
Border properties
Border specification border
<div style = "border: 1px solid blue;"> 1px blue single line border </div> <div style = "border: 1px double blue; "> 1px blue two-line border </div> <div style = "border: 1px dashed blue;"> 1px dashed blue border </div> <div style = "border: 1px dotted blue;"> 1px blue dotted border </div>
Use border to specify the border. Specify the combination of "Line thickness", "Line type", and "Line color" separated by a blank.
There are the following types of lines.
- 1 line solid
- 2 main line double
- Dashed dashed
- Dotted line dotted
You can also specify only the border at a specific position by using the properties "border-top", "border-left", "border-right", and "border-bottom".
<div style = "border-top: 1px solid blue;"> Border (upper) </div> <div style = "border-left: 1px solid blue;"> Border (left side) </div> <div style = "border-right: 1px solid blue;"> Border (right side) </div> <div style = "border-bottom: 1px solid blue;"> Border (bottom) </div>
Element position and display properties
Block element width and height width, height
<div style = "width: 200px; height: 100px; background-color: green;"> width (200px), height (100px) </div>
Use width and height to specify the width and height of the block element. Note that specifying width and height for inline elements has no effect.
You can also specify a percentage based on the width of the parent element.
<div style = "width: 200px; height: 100px; background-color: green;"> <div style = "width: 80%; height: 70%; background-color: blue;"> width (80%), height (70%) </div> </div>
Margin margin
<div style = "background-color: #FFCCCC;"> <div style = "background-color: # FF6666;"> Upper element </div> <div style = "margin: 20px 30px 50px 30px; background-color: # FF6666;"> Specify the "top left bottom right" margin </div> <div style = "margin: 20px 30px; background-color: # FF6666;"> Specify the "top left bottom right" margin </div> <div style = "margin: 20px; background-color: # FF6666;"> Specify the margins of "upper left lower right" together </div> <div style = "background-color: # FF6666;"> Lower element </div> </div>
Use margin to specify the margin. Margin is the spacing between elements. Margins are specified by separating them with a blank. If you specify four values separated by a blank, it will be specified as "upper left lower right". If you specify two values separated by a blank, it will be specified as "up / down / left / right". If only one value is specified, the same value will be obtained for "up / down / left / right". In the example, the background color is added so that the meaning of the margin is easy to understand.
One caveat is that the margin values are not added when the elements touch vertically. In that case, the larger value is selected. For example, if the lower margin of the element A is 20px and the upper margin of the element B is 50px, the upper and lower margins between A and B are not added to 70px, but the larger value. It will be 50px.
Margins can also be specified individually on the top, bottom, left, and right.
<div style = "background-color: #FFCCCC;"> <div style = "background-color: # FF6666;"> Upper element </div> <div style = "margin-top: 20px; background-color: # FF6666;"> Margin on top </div> <div style = "margin-left: 20px; background-color: # FF6666;"> left margin </div> <div style = "margin-bottom: 20px; background-color: # FF6666;"> bottom margin </div> <div style = "margin-right: 20px; background-color: # FF6666;"> right margin </div> <div style = "background-color: # FF6666;"> Lower element </div> </div>
Another caveat is that if you specify a top and bottom margin for an inline element, it will be ignored. For example, for the following specifications, there is a 20px margin on the left and right, but no margin is set on the top and bottom.
<span style = "margin: 20px;"> Inline elements ignore top and bottom margins </span>
Padding padding
<div style = "padding: 20px 30px 50px 30px; background-color: #FFCCCC;"> Specify "top left bottom right" padding </div> <br> <div style = "padding: 20px 30px; background-color: #FFCCCC;"> Specify the padding of "upper left lower right" </div> <br> <div style = "padding: 20px; background-color: #FFCCCC;"> Specify the padding of "upper left lower right" together </div>
Use padding to specify padding. Padding is the distance between the inner elements. Padding is specified by separating them with a blank. If you specify four values separated by a blank, it will be specified as "upper left lower right". If you specify two values separated by a blank, it will be specified as "up / down / left / right". If only one value is specified, the same value will be obtained for "up / down / left / right".
You can also specify the padding individually on the top, bottom, left, and right.
<div style = "padding-top: 20px; background-color: # FF6666;"> Upper padding </div> <div style = "padding-left: 20px; background-color: # FF6666;"> Left padding </div> <div style = "padding-bottom: 20px; background-color: # FF6666;"> Lower padding </div> <div style = "padding-right: 20px; background-color: # FF6666;"> Right padding </div>
How to display the protruding part overflow
<div style = "height: 100px; width: 100px; overflow: auto;"> Scroll the protruding part. Scroll the protruding part. Scroll the protruding part. Scroll the protruding part. </div>
If you want to scroll the protruding part vertically, specify "auto" for overflow.
Change the display method of elements display
<span style = "display: block"> Change span to block element </span> <h1 style = "display: inline"> Change h1 to an inline element </h1> Ah
Use display to change how elements are displayed. If "block" is specified, it becomes a block element, and if "inline" is specified, it becomes an inline element.
List properties
List style type list-style-type
<ul style = "list-style-type: none"> <li> Nothing attached </li> <li> Nothing attached </li> </ul> <ul style = "list-style-type: circle"> <li> white circle </li> <li> white circle </li> </ul>
Lists created with ul and lists created with ol are prefixed with numbers and black circles, but you can change this. If you specify none and you are concerned about the left margin, you can eliminate the margin by specifying the left margin and padding to 0px.
<ul style = "list-style-type: none; margin-left: 0px; padding: 0px"> <li> Nothing attached </li> <li> Nothing attached </li> </ul>
CSS selector
Now that we've covered the properties related to design, let's learn about CSS selectors to specify in detail which elements to set CSS for. When writing CSS inside or outside the style tag, write as follows. The h1, div and p parts are the selectors.
h1 {
color: red;
font-size: 200%;
}
div {
background-color: blue;
}
p {
border: 1px green solid;
}
With this definition, CSS will be applied to all h1, divs and ps.
Specify by identifier
Identifiers allow you to apply CSS only to certain elements.
/ * CSS * /
#discription {
color: red;
}
<!-HTML-><div id = "discription"> Specify by identifier </div>
To use the identifier, you need to specify the id in the element on the HTML side. On the CSS side, specify "# identifier".
#Identifier {
}
Specify by class
Classes allow you to apply CSS only to specific groups.
/ * CSS * /
.pretty {color: red;
}
<!-HTML-><div class = "pretty"> specified by class </div> <div class = "pretty"> specified by class </div>
To use the class, it is necessary to specify the class in the element on the HTML side. On the CSS side, specify ".identifier".
.class {
}
Tag name and class combination
You can also use a combination of tag name and class.
/ * CSS * /
h1.pretty {
color: red;
}
<!-HTML-><h1 class = "pretty"> Tag name and class specification </h1> <div class = "pretty"> Not applicable here </div>
To use the tag name and class name in combination, specify "tag name.class".
Tag name.class
Nested structure
You can also apply CSS to nested elements.
/ * CSS * /
#description p.pretty {
color: red;
}
<!-HTML-><div id = "description"> <p class = "pretty"> Apply to nested elements </p> </div> <div> <p class = "pretty"> Not applicable here </p> </div>
The above specification means that it is applied to the p tag whose id is "description" and whose class is "pretty".
To apply CSS to a nested structure, apply the selectors separated by spaces.
Selector 1 Selector 2 {
}