CSS, short for Cascading Style Sheet🎨, dictates how an html should look.
From the previous article on HTML, we knew that the html file will be parsed and Document Object Model will be created. In a similar fashion, CSS file will be parsed and a CSSOM📜 will be created. Alongside DOM, CSSOM will be applied to create a render tree, which forms the layout. Once the layout has been formed, the stylings like the display of elements as specified and then the colors that are to be applied will be decided and rendered in the web page.
Applying CSS: Inlining, Embedding and Linking
There are several ways to apply CSS to an HTML document:
Inline Styles🎯: Directly within the HTML element using the style attribute. This approach is rarely used due to its lack of reusability and separation of concerns
-
Internal Styles🏡: Within a
of your HTML document. This method improves performance as no additional server request is needed to fetch the styles, but it’s less scalable for larger projects.<style>tag inside the External Stylesheets🔗: Using a separate
.cssfile linked in the<head>section. This is the most scalable approach, allowing for reuse of styles across multiple pages and easier maintenance.
<!-- inline styling -->
<h1 style="color: white;">Welcome to My Website</h1>
<!-- internal styling -->
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
</style>
</head>
<!-- external stylesheet -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
While specifying inside the style tag improves performance since there will be no server call made to fetch the styles, it also proves to be redundant in case of complex projects since the css will be confined to the html document📩 and can’t be used in other documents.
On the other hand, using link element to link the style sheets might seem like a solution but might be an overkill🗡 when working on smaller projects or test cases. Still, it offers scalability, and reduced redundancy.
Genius🧠 is not just applying everything, it is about knowing which🕶 to apply and when⌚ to apply
CSS Syntax and Selectors
CSS is structured around selectors that target HTML elements, and properties that apply styles to those elements. Here’s a simple example:
body {
background-color: lightblue;
}
h1 {
color: navy;
}
- Element Selectors: Target all instances of a specific HTML element.
h1 {
color: white;
}
-
Class Selectors: Target elements with a specific class, prefixed with a
..
<p class="className">Text</p>
<a class="className">Link</a>
.className {
color: white;
}
-
ID Selectors: Target a single element with a specific ID, prefixed with a
#.
<p id="idName">Text</p>
#idName {
color: white;
}
Notice that for class selectors we need . as prefix and for id we need # as prefix.
Key CSS Concepts and Properties
Before diving into advanced topics, let’s explore some essential CSS properties:
- Width & Height: Set the dimensions📐 of an element.
- Viewport: The visible🔎 area of a web page on a user’s screen.
- Flexbox: A layout model that allows elements to align and distribute space within a container.
- Grid: A 2D layout system that enables complex designs with rows and columns.
We will kick off our journey into writing CSS by starting with the enigma😵 that has proved tough even for pragmatic programmers👨💻 — Centering a div 😈
div, section {
display: flex;
justify-content: center;
align-items: center;
}
This code centers any child elements within the div or section.
Similarly,
div, section {
background: linear-gradient(to bottom right, red, blue);
border: 1px solid black;
height: 100vh;
text-align: center;
border-radius: 5px;
gap: 15px;
margin: 20px;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 100;
}
In this code:
- Background: Sets a gradient background.
- Border: Defines the element’s border.
- Margin: Adds space outside the element.
- Padding: Adds space inside the element.
- Font: Customizes the text appearance.
Others are semantic and their name does justice to their function.
CSS In Action: Building a Travel Website
There is no greater fun than creating🛠 something from scratch by yourself.
Don’t feel intimidated by the sheer number of prerequisites required to apply css — it only gets easier once we start.
Oftentimes, at work, software developers wont be designing the website. Dedicated designers🖼, who understand the features of the product, requirements of the users💻 and their behavior, will be designing the website and software developers will need to replicate that.
So, we will find a template from google and try and replicate that.
Head out to the google🌐 and search for “Travel Website Templates” and you can find many of the contemporary designs and once you have chosen something like the one in the image, we can start building.
Start by creating two files: index.html and index.css. Here’s the basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Travel Site</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #4d85a2;
color: #333;
padding: 20px;
height: 100vh;
}
Now we can see the result once we start the index.html file in the browser. If you don’t see the changes, refresh the browser tab to see it.
Now, we will start building on top of this, we will create a main container which will hold the image as background, and texts on top of it to achieve the UI.
Write the following code in the body tag.
<div id="main_container"></div>
#main_container {
background-image: linear-gradient(to bottom right, grey, black)
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
border: 1px solid red;
}
Notice, that for background-image attribute, the value should be provided as url(file name) and background-repeat is set to no-repeat and size is set to cover. As for now, we have set the image to a color to visualize.
This ensures that the provided image from the url is set to not repeat and appear only once and appear to the full extent(background-size) unlike only to the dimensions of the image itself. The cover value dictates the image to appear to the container fully. The border has been applied to make it visually teaching on how much height that element is occupying.
Now after applying the image, it should be visible like,
Notice that the image is repeating because we haven’t set background-repeat to no-repeat.
Now we will create a nav bar🧭 that sticks to the top of main container and a centered div to contain information and a button.
Oftentimes, you, as a developer would need to use code that others have written and leverage from that. In this website, we would need to use some icons from other libraries in order to delegate some of the diligent work needed to build that.
I have integrated font-awesome icons in the index.html file by
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
This ensures that the css written for font-awesome can be extended to my html file without me writing much code.
Now in the body, add the following code,
You will notice certain new terms like keyframes, animations, transition etc.
I will explain them soon, but first lets take a look at the output.
The above picture is the output of the code with borders so as to make it easy to visualize the containers height and width.
The below picture is the finalized output after removing the borders.
Now to the ambiguous code,
-
:hover— You can see this for page title. This “:” dictates the css to listen for the user actions like hover, focus, etc and then apply css when that action occurs. -
Transition— This specifies an animation effect causing motion of the elements as specified like translate, rotate in specified axes, the time that should be taken to complete the effect and the type of effect like ease-in, ease-out, etc. rgba— This specifies the color alongside the opacity for that color. Notice the black transparent background for the content area? This transparency came because rgba was set to color and 0.7.animation— Same as transition but only that it can happen even without user interactions. But in here we applied only with user interaction. Other differences include animations can be set to have intermediary steps like on completion of 25% of time, an effect can happen, and same on 50% and 75%, but for transition, only 0% and 100% (start and end) can be specified.keyframe— These are the tools that are required to set the intermediary steps. Any name can be given including the existing transition names, for which the specified transitions will be applied.
Since without video it is tough to show the animation, you can try hovering your mouse over the Discover Now button to see it pop up.
Outro
You’ve now taken your first steps into the world of CSS. From centering a div to building a basic travel website, you’ve gained hands-on experience with some of the core concepts that will serve as the foundation for more advanced techniques.
The next milestones💎 could include diving into frameworks like Bootstrap or SASS, or moving on to JavaScript and React while simultaneously learning CSS by applying on the go — the limits are endless.
Remember, CSS is a vast and powerful language. With continuous practice and exploration, you can unlock endless possibilities for creative and responsive web designs.
Stay tuned for the next article where we will dive into JavaScript, integrating it with the HTML and CSS skills you’ve just acquired.
This article is written by Anantha Krishnan, a professional with experience in both IT and Mechanical Engineering. With a background in full stack development and a passion for mechanical and electrical systems, Anantha Krishnan is now focused on creating educational content to help beginners in fields of his expertise.
Top comments (0)