CSS means Cascading Style Sheets. CSS files are plain text files, just as HTML files, but they have .css extension. It is up to you how you will name them.
To keep things simple, we will have our css file in same folder as our html file. You can create it using same editor you are using for html coding.
Today, HTML, CSS and JavaScript are a must for every serious Website out there. But there is no need to rush to learn all of those technologies in short period of time, because theres just a lot to learn. Give yourself a time. Even with minimal knowledge of those technologies you can make more than decent websites.
Once when you learn CSS, it will be smart to learn about Bootstrap and similar frameworks that are a bunch of predefined CSS options that will save you time, especially if you like to work more with backend technologies, using programming languages like Python or PHP, and working with databases like MySQL and SQLite.
Just as HTML, CSS is group of special, standardized codes we can use. With them we have a great deal of options to style fonts, paragraphs, tables, positions, sizes and other characteristics of our html elements. But for CSS to be useful, first we must structure our html pages right, because with CSS we will target specific HTML elements.
Basics of HTMl and CSS are easy to learn, but there's a lot of combinations, so there's no need to force ourselves to memorize all of it, because we have documentation and a lot of examples all over the internet.
There are 3 ways how to connect html elements with corresponding CSS options.
- External CSS means there will be dedicated CSS file outside HTML.
- Internal CSS means there will be CSS codes inside HTML file, inside HEAD section of web page.
- Inline CSS means, we will have direct CSS codes inside HTML elements, inside BODY section of web page.
External CSS
Inside same folder where your html file is, create CSS file with this name: mystyle.css
Now, we will edit a head section of HTML file to connect that file with CSS file, so CSS file will become operational:
<link rel="stylesheet" type="text/css" href="mystyle.css">So, your web page will look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Security Tutorials</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>External CSS</h1>
<p>Generic Text...</p>
<h3>This is H3 Level of Heading</h3>
</body>
</html>
Now, inside mystyle.css file add these lines. We are targeting body sections setting background color to be white, and font color to be black.
Than, we are targeting h1 element, so that background color will be red, and font color for h1 will be white.
After that, p element will be targeted, background will be yellow, and a font will be black.
And than, h3 element background will be light blue, font will be navy color.
If you typed, or copy-pasted all correctly, when page is refreshed you will have new CSS styles applied.
If there is no changes, check that mystyle.css is in same folder as html file, and that you have link to CSS file included in HEAD section of web page.
You are strongly advised to watch corresponding YT video on how to create External CSS file.
Content of mystyle.css file:
body {
background-color: white;
color: black;
}
h1 {
background-color: red;
color: white;
}
p {
background-color:yellow;
color:black;
}
h3 {
background-color: lightblue;
color:navy;
}
No comments:
Post a Comment