Hey buddy this time I will discuss about the CSS tutorial, which is a markup language that must be mastered by a novice web designer in addition he also had to master HTML. This tutorial is me show you specifically for beginners who want to learn serious about Web programming. Indeed, to be a web designer you are in demand not only master a programming language only, but at least you can master HTML, CSS, PHP, Java Script and SQL. Since this is a basic tutorial for beginners, so I started with my first CSS, HTML required even though the first that should be known by a novice. But we can learn simultaneously between CSS and HTML, and on another occasion I will also discuss about the complete HTML.
What is CSS?
The question may be the basis for people who have never heard or understood CSS. CSS stands for Cascading Style Sheets which this CSS as an explanation of how the HTML elements these elements are displayed on the screen and in other media. With CSS display a Web will look pretty and neat and professional non-rigid. Currently the latest version of CSS is CSS3 which function more and more. With CSS that we can design a layout or the web interface to our liking, even so still looks professional web layout when displayed on different media such as a computer, tablet, or Smartphone. Through this all CSS layout design of a web is regulated.
Basic Rules of Writing CSS
In declaring a single or multiple HTML elements in CSS usually consists of a selector, property, and value and this is the core of CSS. To more easily understand you can look and see the CSS code below.
H1 code of the code example above is a selector, a selector which is used to search for all h1 tags in HTML that you want to style or revamped zoom. While the line of code that is between the curly braces is called declaration. For more details you can see in the image below.
The next code in the CSS font-size called the property, where the property was the one that would change the HTML element. Each property has a value, in the above example code 18px and green is the value of the property font-size and color. The fourth element is what builds CSS and a lot of property in CSS that, God willing, I will discuss it in full.
How Writing Selector, Property and Value
Above I have discussed these three elements as well as usefulness, now I will discuss about how to write the three elements in CSS.
- A style in a CSS selector begins with writing that is part of what you want changed appearance of HTML.
- after writing selector followed by a brace and close the so-called declaration
- Writing properties with values separated by colons (:)
- Writing between the property to each other separated by a semicolon (;) and specifically for the writing of the last property may be without a semicolon, but it is suggested to keep wearing them.
How to enter CSS code with inline, internal and external
CSS code in order to run properly, it must be added to the HTML file, and there are three ways, namely input via CSS inline styles, internal style CSS and external CSS style.
Inline Style CSS
Referred to inline CSS styling is input css code directly into the html tag with the additional help of the style attribute. Here's an example if we want to change the color of a paragraph to green.
<p style="color: green"> Hello World. </p>
The second way to input code into HTML CSS is the way the entire CSS code written in <style> tag in the <head> HTML code, the following examples of its use.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
p {
font-size: 18px;
color: green;
}
</style>
</head>
<body>
<h1>Lear CSS</h1>
<p>
Yes this is my hobby wed designer.
</p>
</body>
</html>
External Style CSS
The last way to input code into HTML CSS is to create a separate CSS file that is separate from the HTML file is then linked or called in the HTML file via the <link> tag that is usually contained in the <head> in HTML. For more details, we direct practice only; you create a css file with and save it as style.css and put it in the same folder as the HTML file which we will later make. The content of the CSS code is as follows:
h1 {
color: red;
}
p {
font-size: 18px;
color: silver;
}
Then create an HTML file with name external_css.html, content code is as follows
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Belajar CSS</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1>Learn about CSS</h1> <p> Please do not disturb, more serious learning CSS. </p> </body> </html>
Note on the <link> tag there is added the rel attribute which is a continuation of the relationship and usually for us to use CSS stylesheet. In addition, the <link> tag does not require a closing tag, so it is also called the term self closing tag, which is self-closing tags. Similarly, a brief tutorial introduction to CSS, the next tutorial I will discuss about Property Colors.
0 Response to "CSS Basics Tutorial: Introduction to CSS"
Post a Comment