What Do You Know About CSS?
Hi , see you again at me in this Blog. Thank you for visiting this simple blog. For those of you who are just visiting this blog for the first time, Blog discusses web programming, desktop, and mobile, tips, tricks on blogs, Android and more about technology.
In accordance with the above title, In this article, I will try to write about CSS. I am sure, many of you will be familiar with CSS, and if you are a web programmer, you will definitely be very familiar with this CSS. So this CSS is a code used to design HTML. If you do not want to understand this, you can contact CRM development company IT Dev Group.
What is CSS?
CSS (Cascading Style Sheet) is a collection of codes used to decorate or design the appearance of a web to make it more beautiful. CSS is a technology recommended by the World Wide Web Consortium or W3C in 1996. Initially, CSS was developed on SGML in 1970 and continues to be developed today. CSS supports many languages such as HTML, XHTML, XML, SVG (Scalable Vector Graphics) and Mozilla XUL (XML User Interface Language).
As I mentioned above, CSS is used by web programmers and also bloggers like me, to determine the color, font layout, and much more that we can make beautiful for website display. At present, almost no website is built without the css code. Just imagine, if you see a website without CSS? then you will see a boring web appearance.
In December 1996, W3C introduced CSS which is still level 1, called CSS1, which supports formatting, text font colors, and others. And, in May 1998, W3C published CSS2 in which element laying functions were arranged. And now, W3C has improved and improved CSS2 capabilities to CSS3.
CSS3 is the development of CSS version 2.1 with the addition of new features which are certainly more sophisticated and useful for the development of modern websites. You can learn and see updates or developments on the official website www.w3.org, based on the specifications, CSS3 is divided into several modules to learn. Each module is a separate specification that is discussed and developed by several authors who are separate from other specifications.
As a blogger, you must at least know how to use this CSS. Because of course if you want the appearance of your blog to be interesting. CSS makes our blog readers feel comfortable and linger on our blog so that our site pageviews also increase. The use of CSS must be right and not arbitrary.
Why Should We Use CSS?
HTML is created not for designing websites, but only for displaying content. When HTML goes to version 3.2, it introduces the <font> tag that is used to set the appearance of a text, such as the font type of the font, and the size of the font. But with this tag, it makes it difficult for the development process, because this tag must be embedded on many pages to get the same style results. If we think, when we have lots of web pages, and then we want to edit just a few styles such as font size and want all pages to get consistent changes. Then we must update the tags on each page one by one! Pretty boring right?
So to fix this problem, CSS was created, to separate the style of the web pages, so that the content in HTML and the display design in CSS documents can be done in two different places. So, HTML documents only contain content and one CSS document can be embedded in any HTML document so that all display the same and consistent style. So if we change the code in the CSS, then the appearance of the web page also changes. Cool isn't it?
Below I will try to group, the reason why we should use CSS:
- You could say, the use of CSS is very easy and we do not need a long time to apply CSS to the blog or website that we have. (please remember, what I said was use and not making). If in making CSS, it might take quite a long time if we are just beginners in this css. But at the present time, everything becomes easier, where there are already css generators for tables, colors, buttons and so on, you can search on Google.
- CSS is supported by almost all types of browsers and of course all devices can display this css.
- CSS can be used in HTML in various ways. You can put CSS in the Head section in HTML, make the CSS file separate and connect to HTML.
- With the CSS, we can speed up the change in the appearance of a page.
- CSS can do what HTML can't. So HTML and CSS have their own work, but HTML and CSS are related.
- With CSS we can add effects to HTML objects.
- Please add another one about the reason why we use CSS.
Differences in Internal CSS, External CSS and Inline CSS
As I have written above, there are several ways to use CSS, such as below:
Internal CSS
In internal CSS, this css code is placed in the
section of the website page. Using this method, CSS will only be active on that page. The CSS code applied with this method will be downloaded every page loaded, so this will increase the access speed. But, there are some cases of internal use of stylesheets that are useful. Internal CSS is placed in the <style> </ style> tag. Example:
Internal CSS
<html>
<head>
<style type="text/css">
p {color:black; font-size: 20px;}
.center {display: block; margin: 0 auto;}
body {background-color:#24A0AC;}
h2 {color:white;font-size: 30px;font-weight:bold;}
</style>
</head>
<body>
<h2>
Gudio Blog : Internal CSS
</h2>
<p>
please introduce me, I'm from Gudio. Gudio Blog has a good article
</p>
<a href="https://www.gudioblog.com" title="Gudio Blog Home Page" target="_blank">Visit My Blog</a>
</body>
</html>
In the CSS above, I give an example, for internal CSS settings by giving color to <body> and font.
The advantage of using Internal CSS is that changes occur on 1 page that is installed internally on the CSS.
Disadvantages: changes on only one page, are very inefficient when using the same CSS on several pages.
External CSS
Usage by external means here means, html files and css are separate. Example, for example if on blogger, the HTML file is on the blogger server while our CSS is hosting on GitHub for example. So what we add to the html on the blogger is the css link that points to GitHub.
Or if you don't want to create a file on Github, you can just create a folder on your computer. And in the folder there are 2 files, namely html and css.
First create the html file as below, you can make it through notepad or text editor on your computer:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="gaya.css">
</head>
<h2>Gudio Blog : External CSS Tutorial</h2>
<p>hello I'm from Gudio Blog. This is an example of an external css.</p>
<a href="https://www.gudioblog.com" target="_blank" title="Gudio Blog Homepage">Visit My Blog</a>
<body>
</body>
</html>
After you create, save and try running your html file by double clicking on the file.
Then, now create a css file, you can also make it through notepad, and save it with the * .css extension:
CSS
body {
background-color: blue;
}
h2 {
color:red;
font-size: 30px;
}
p {
font-size: 20px;
}
a {
color: white;
}
save the css code. And now try running the html file again. Surely there has been a change right?
Advantages:
By using this external CSS method, your HTML files will be smaller, loading speed will also increase, can be used on various pages.
The disadvantage:
the page will not be able to appear perfect, if the css has not finished loading.
Inline CSS
Then the last way is inline css. This inline css is only used for certain tags. And maybe for the web developer does not recommend this method, because each HTML tag must be given the css code respectively. But this inline css will be useful if you only want to change one element.
An example of HTML if using inline css:
HTML -Inline CSS
<html>
<head>
</head>
<body>
<h2 style="color:green;font-size:30px;">
Gudio Blog : Inline CSS Tutorial
</h2>
<p style="background-color:black;color:white;">
please introduce me, I'm from Gudio. Gudio Blog has a good article
</p>
<a href="https://www.gudioblog.com" title="Gudio Blog Home Page" target="_blank">Visit My Blog</a>
</body>
</html>
In the code example above, can you see a difference? Yes, I put the css code on the <h2> and <p> elements directly. And that is what is called inline css.
Advantages: useful for quick fixes on HTML elements
Disadvantages: Inline CSS must be applied to every element.
Selector ID and Class in CSS
Actually this ID and Class is in HTML, but it is closely related to CSS, where we must be able to distinguish between writing CSS code as ID and writing CSS code as class.
Selector ID
This selector id starts with the "#" sign on the code in css. And in writing HTML, that is by giving "id" to the html tag. Example: <p id=”mystyle”> The specific example is as below:
HTML
<html>
<head>
</head>
<body>
<p id="mystyle">
This is Gudio Blog Tutorial About Selector ID CSS
</p>
<p id="secondstyle">
Visit My Blog : <a href="https://www.gudioblog.com" target="_blank" title="Gudio Home Page">Gudio Blog</a>
</p>
</body>
</html>
CSS
#mystyle {
text-align:center;
color:white;
background:black;
}
#secondstyle {
text-align:left;
color:green;
background:black;
}
Class Selector
Same as above, this deposit class is also used to set the style in html. The difference is, if the Selector ID can only be called once, the Selector Class can be called multiple times on one page. And writing also has differences, if the Selector ID uses the sign "#" for writing in CSS while for Class Selector uses "." for writing in CSS.
As an example :
HTML
<html>
<head>
</head>
<body>
<div class="mystyle">
<p class="center">
This is Gudio Blog Tutorial About Selector ID CSS
</p>
</div>
<p class="full cen">
Visit My Blog : <a href="https://www.gudioblog.com" target="_blank" title="Gudio Home Page">Gudio Blog</a>
</p>
</body>
</html>
CSS
.mystyle {
width:150px;
height:150px;
background:green;
}
.center {
text-align:center;
color:black;
}
.full {
max-width:1280px;
background:black;
}
.cen {
text-align:center;
color:white:
}
Look at the example css class above, on the <p> element I give two classes at once. This can help you make the code shorter in HTML
Conclusion:
With my brief explanation above, you should be able to use CSS in HTML. Writing CSS that I made above is just the basis, please develop it again. Many effects that you can apply, such as creating gradients with CSS, animation effects, and others. If you search on Google, you will find many sources.
That is all, articles about " What Do You Know About CSS?” , Hopefully this article can be useful for all of you. If this article is useful for you, please share my article on your social media and don't forget, follow me on social media to get the latest information updates.
We meet again at another time and with another interesting article.
Comments
Post a Comment