Getting Started with CSS
Last Updated :
12 Apr, 2024
CSS or Cascading Style Sheets is a stylesheet language used to add styles to the HTML document. It describes how HTML elements should be displayed on the web page.
Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML, XML, etc. CSS enhances the look and feel of the webpage by describing how elements should be rendered on screen or in other media.
Basics of CSS
Cascading Style Sheets (CSS) is a fundamental technology for designing and styling web pages. It provides the means to control the layout, typography, color, and other visual aspects of HTML documents. If you’re new to web development or looking to expand your skills, mastering CSS is essential.
Selectors and its types in CSS
CSS selectors are used to target HTML elements and apply styles to them. Here are some common types of selectors:
- Element Selector: Targets elements based on their tag name.
element {
property: value;
}- Class Selector: Targets elements with a specific class attribute.
.classname {
property: value;
}- ID Selector: Targets a single element with a specific ID attribute.
#idname {
property: value;
}- Descendant Selector: Targets elements that are descendants of a specified element.
parent descendant {
property: value;
}- Child Selector: Targets elements that are direct children of a specified element.
parent > child {
property: value;
}- Attribute Selector: Targets elements based on their attributes.
element[attribute="value"] {
property: value;
}- Pseudo-class Selector: Targets elements based on their state or position.
selector:pseudo-class {
property: value;
}- Pseudo-element Selector: Targets specific parts of an element.
selector::pseudo-element {
property: value;
}- Universal Selector: Targets all elements in a document.
* {
property: value;
}CSS Box Model:
The CSS Box Model describes the layout of elements on a web page. It consists of four main components: content, padding, border, and margin.
- Content: The actual content of the element, such as text or images.
- Padding: Space between the content and the element’s border.
- Border: A border surrounding the padding.
- Margin: Space between the border and adjacent elements.
Media Query:
Media queries allow developers to apply different styles based on the characteristics of the device, such as screen size, resolution, or orientation. This enables the creation of responsive web designs that adapt to various devices and screen sizes.
Animation and Transition:
CSS animations and transitions allow developers to create visually appealing effects, such as moving elements, fading in/out, and changing colors. Animations are more complex and allow for greater control over timing and keyframes, while transitions provide simple effects for property changes.
Steps to run the CSS code
Before diving into CSS, you’ll need a text editor to write your code and a web browser to preview your web pages. Popular text editors include Visual Studio Code, Sublime Text, and Atom. Once you have a text editor, follow the given steps:
Step 1: Creating a Project Folder
Start by creating a folder on your computer where you’ll keep all your project files.
Step 2: Creating HTML and CSS Files
Inside this folder, create two files: one for your HTML code (e.g., index.html) and another for your CSS code (e.g., styles.css).
Example: This example shows the use of the CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Introduction to CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to CSS!</h1>
<p>This is a simple example
demonstrating the basics of CSS.</p>
</body>
</html>
/* styles.css */
/* Apply styles to the body */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
}
/* Style the heading */
h1 {
color: #e18282;
}
/* Style the paragraph */
p {
color: #666;
font-size: 16px;
line-height: 1.5;
}
Output:
Ways of using CSS in a project
Internal CSS
Internal CSS is placed within the <style> element in the <head> section of an HTML document.
Example: This example shows the use of the Internal CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Internal CSS</title>
<style>
.navbar {
background-color: #333;
padding: 10px 0;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
}
.logo {
width: 80px;
height: auto;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo-container">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
alt="Logo"
class="logo" />
</div>
</nav>
<h1>Example of internal CSS.</h1>
<p>Welcome to GFG </p>
</body>
</html>
Output:
Inline CSS
Inline CSS involves applying styles directly to individual HTML elements using the style attribute
<p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>
Linking CSS to HTML(External CSS)
In your HTML file, use the <link> tag within the <head> section to link your CSS file. This allows the HTML file to access and apply the styles defined in the CSS file as shown in example above.
File Structure:
Example: Create index.html and styles.css file with following code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<div class="logo-container">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
alt="Logo"
class="logo" />
</div>
</nav>
<h1>Example of External CSS.</h1>
<p>Welcome to geeksforgeeks </p>
</body>
</html>
/*styles.css*/
.navbar {
background-color: #333;
padding: 10px 0;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
}
.logo {
width: 80px;
height: auto;
}
p {
color: rgb(255, 64, 0);
font-size: 16px;
}
Output:
Advantages of using CSS
- Consistency and Reusability: CSS enables the creation of consistent styling across multiple pages or elements, promoting reusability of styles and reducing redundancy in code.
- Responsive Design: With CSS, websites can be made responsive using techniques like media queries and flexible layout models, ensuring optimal viewing experiences across various devices and screen sizes.
- Easy Maintenance: With CSS, you can easily update the styling of an entire website by modifying a single CSS file, rather than having to make changes to each HTML file individually.
- Browser Compatibility: CSS helps ensure consistency in rendering across different web browsers
Share your thoughts in the comments
Please Login to comment...