Introduction
CSS styles and layout web pages, there are multiple ways to do the same thing in CSS, some easier than others, which makes CSS tricky. I will narrow everything down to the fundamentals that will make your applications look good while you maintain your sanity. That's the difference between a 40-minute and 3-hour CSS tutorial, avoiding information overloading and embracing targeted learning aids in mastering tricky topics.
Assumptions
have a code editor installed(any), but highly suggest vscode
You can write basic HTML and load the document to a browser.
If not, you can follow this short tut.
CSS: the beginning
Create a folder and an index.html file; I am using vscode and the live server plugin to serve the HTML; you can install it from the extensions tab in vscode.
you can use emmet to stub out starter HTML template quickly,
or you can copy and paste the following.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
CSS syntax
selector {
CSS-property: value;
}
A selector targets an element, for example
h1 {
}
Anything inside the curly {} is applied to all h1 elements in the HTML document.
There are multiple ways to select elements from HTML, we only care about 3 for now.
by element
Using the actual HTML element name as a selector, as you have already seen above.
examples
body{
}
h1 {
}
h2 {
}
/*selecting multiple elements at once - this is a comment(ignore by css) */
h1,h2,p {
}
by class
You first need to give the HTML element a class or classes using the class attribute.
<div class="container">
<!-- multiple classes, separated by space - this is a comment -->
<h1 class="class1 class2">Hello world</h1>
</div>
to target any element with that class, you use the following syntax.
.class {
}
you prepend a dot to the class, any element with that class will be styled, and you can reuse classes to as many elements as you like.
.container {
background-color: blueviolet;
}
.class1 {
/*styles here*/
}
.class2 {
/*styles here*/
}
by id
It is a unique attribute used to identify an element; you set the id with the id property.
<div id="container" >
<h1 id="hello_world">Hello world</h1>
</div>
to select the element in CSS, you prepend # in the id
#id{}
#container{
background-color: blue;
}
#hello_world{
color: white;
font-size: 24px;
}
Id's cannot be reused for multiple elements.
now that you have a basic understanding of CSS syntax let's look at ways to load/use CSS in HTML.
ways to use CSS
inline CSS
<h1 style="color: gray; font-size: 24px"/>
you use the style attribute in a tag to write CSS which targets the element directly
Head tag
<head>
<style>
</style>
</head>
If you have minimal CSS, you can use either inline or the head tag, however, I recommend getting used to external CSS, which is creating a file with a .css extension
External CSS
create a styles.css file in your root folder.
To load the styles to HTML, you use the link tag
<link rel="stylesheet" href="styles.css">
updated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
</body>
</html>
in styles.css, write the following,
body{
background-color: blueviolet;
}
we are changing the background color of the body tag, if your CSS file is loaded correctly, the entire page should be blueviolet, or at least you should see some blueviolet.
Syntax in practice
Copy the following HTML and paste it in your body tag, then open the CSS file; you can split in vscode by right-clicking on the file and choosing the option open to the side.
<div class="container">
<section class="personal">
<h1>Jane Doe</h1>
<div>
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, eveniet.</p>
</div>
</section>
<section class="skills">
<ul>
<li>JavaScript</li>
<li>Python</li>
<li>React</li>
<li>Angular</li>
<li>Svelte</li>
<li>Wasm</li>
</ul>
</section>
</div>
css so far
body{
background-color: blueviolet;
}
Background color: personal and skills section
.personal{
background-color: darkmagenta;
}
.skills {
background-color: darkmagenta;
}
because the style are the same, we can simplify this, with multiple selection.
.personal, .skills {
background-color: darkmagenta;
}
changing text color of h1 and h2
h1, h2 {
color: darkgray;
}
targeting h1 alone,
h1 {
font-size: 48px;
font-weight: 900;
}
targeting li elements
li {
/* spacing - explained in the next article in detail */
padding-bottom: 1em;
color: beige;
}
all the CSS
body{
background-color: blueviolet;
}
.personal, .skills {
background-color: darkmagenta;
}
h1, h2 {
color: darkgray;
}
h1 {
font-size: 48px;
font-weight: 900;
}
li {
/* spacing - explained in the next article in detail */
padding-bottom: 1em;
color: beige;
}
CSS is vast, and to avoid information overload we will build gradually from this,
That was CSS in a nutshell; now, all you need to learn is the actual styling of elements, layouts and practices, which is the goal of the subsequent articles.
follow this link for the next article; you will build 3 card components while learning basic CSS styling.
Conclusion
This article is the beginning of multiple HTML, CSS, JavaScript, React, and Svelte articles, as I am taking this blog to that new direction of project-based learning.
In the meantime, if you want to take your HTML, CSS, and JavaScript skills from beginner to writing large applications in a focused path, I have a dedicated digital download with 1v1 help, w/o 1v1 help
If you like the blog and like to support you can buy me a coffee, your support would be highly appreciated.
Thank you for reading.
Top comments (0)