How to use HTML and CSS to make a Simple Webpage (CSS Part)
Hello everyone. This is a blog of a CSS part of a previous blog that is used to explain how to use HTML and CSS to make a small webpage. If you want to read a blog of HTML, please refer to this link. https://kanchanakariyawasam98.medium.com/how-to-use-html-and-css-to-make-a-simple-webpage-html-part-120928a56b1c
And also, I have written CSS part in this blog to previous HTML part.
First of all, we should know what is CSS? CSS is a Cascading Style Sheet that is used to display HTML elements on a screen. CSS can control the layout of multiple web pages all at once. CSS can be written as Inline CSS, Internal CSS, and External CSS.
😊Inline CSS
Inline CSS means is, we can write the CSS part in the HTML tag using “style attribute”.
<h1 style=”color:blue;text-align:center;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. However, an inline style loses many of the advantages of a style sheet (by mixing content with presentation).
😄External CSS
With an external CSS, you can change the appearance of a whole site by changing only one file. However, every HTML page should be included a reference(link) of external CSS file by using <link> tag between the <head> </head> tags.
<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>“href attribute” of <link> is used to write a link of External CSS. Also, if we use this method to write CSS, we can write in any text editor and save it as a .css type. Below, there is an example of a CSS file that is used as external CSS.
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}💥Internal CSS
An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, between the <head> </head> tags. There is an example to get an idea about Internal CSS.
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>😅CSS Syntax
However, there is an order to give priority to CSS. If we use inline CSS style, it has the highest priority and will override external and internal styles and browser defaults.
h2{ text-align: center; border: 1px solid black; margin:6px;}
There are three selectors called Id selector, class selector, and name selector. For the above example, we have used the name selector.
😵CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element
😜CSS Class Selector
The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.
If we want to add the same CSS part to different types of HTML elements, we can add CSS as a group.
Also, if we want to add CSS to the whole page, we can use a universal selector that is assigned by “ * “.
😃CSS Comments
When we are using HTML we can use <! — ……. — >tag for commenting. Likewise, the CSS also has a comment technique. A CSS comment is placed inside the <style> element, and starts with /* and ends with */
Now, let’s see what can we do by using CSS. There are many things that we can do. But in this blog, I would like to explain main things that is used to make a simple webpage 😜
Mainly we can add colors to a background, add images to a background, add font style and font size, add text align style, add color to words etc. In this section, I would like to introduce the best website to refer to get more things about CSS. It is a w3school webpage and by clicking this link you can go to that site. https://www.w3schools.com/css/default.asp
Now there are some CSS properties and usages of those properties below. You can also refer further by using W3School
As I mentioned above, I have written this blog about basic CSS. Also, you can make a simple webpage by using basic CSS. If you want to know more please refer to W3school. Furthermore, I have designed a small webpage using basic HTML and CSS. That HTML part is in my other blog. You can refer to it by the link which is located at the bottom of this blog 🙌
Now let’s see the basic CSS that is used to make my simple webpage. To that, I have used to external CSS technique. There are code lines of my CSS part. Please refer to that and try to make a basic webpage on your own.
body /* start to add css part of body of the page */
{
border:2px solid black;
/*font-size: 20px;*/
background-image: url(bg-pic.jpg);
background-repeat: no-repeat;}
h2 /* start to add css part of h2 element of the page */
{
text-align: center;
border: 1px solid black;
margin:6px;}
#h2
{
font-size: 40px;
color: #F0F0F0
}
table /* start to add css part of tabel of the page */
{
text-align: center;
font-size: 20px;
font-weight: 600;
box-shadow: 0 5px 20px rgba(0,0,0,.15);
overflow: hidden;
padding: 40px 30px;
border-radius: 10px;
background: rgba(255,255,255,.9);
}
.btn{ /* start to add css part of button of the page */
display: block;
width: 160px;
margin: 0 auto;
margin-bottom: 20px;
border: none;
border-radius: 10px;
padding: 13px 15px;
background: #27c7cd;
border: 1px solid #27c7cd;
color: #fff;
border-radius: 33px;
font-size: 16px;
cursor: pointer;
}
.btn:hover{
color: #000;
}
.first /* start to add css part of div that is named in first as a class */
{
font-size: 19px;
background-color: #484848;
color: #DCDCDC;
}
img
{
border-radius: 33px;
border:1px solid black;
}
So, I think you can get an idea about my code. If you think this is important, please give me a clap & share it with another person.
😍Thank you for reading my Fourth blog on Medium. 😍