Online Training
Q4 2024

Nov 19 to Dec 10

11.00 AM EST: USA, UK, Canada, Mexico and Europe

06.00 AM GMT: MiddleEast, Asia and Australia

Register Now
Topics
  1. CSS Basics
  2. Styling Text
  3. Box model
  4. Layouts
  5. Colors
  6. Typography

CSS Basics

Selecting elements

Learn how to select HTML elements using CSS. Class selectors, ID selectors, and type selectors are basic methods for applying styles. 

                                

/* Selects all elements with class="example" */
.example {
  color: red;
}
/* Selects element with id="unique" */
#unique {
  color: blue;
}
Grouping selectors

Combine multiple selectors to apply the same styles to different elements. 

                                

h1, h2 {
  color: green;
}
Combining selectors

Apply styles to elements that match all specified criteria by combining selectors. 

                                

/* Selects <h3> elements with class="header" */
h3.header {
  font-size: 24px;
}
CSS type selectors

Use type selectors to apply styles to elements based on their type or tag name. 

                                

p {
  color: gray;
}
Class selectors

Class selectors apply styles to elements with a specific class attribute. Multiple elements can share the same class. 

                                

.highlight {
  background-color: yellow;
}
ID Selectors

ID selectors apply styles to elements with a unique ID attribute. Each ID should be unique within the page. 

                                

#main-title {
  font-size: 32px;
}
Attribute selectors

Select elements based on their attributes and values. 

                                

[type='text'] {
  border: 1px solid black;
}
Specificity

Specificity determines which CSS rule is applied when multiple rules match the same element. 

                                

#container .item {
  color: red;
}

Styling Text

Text color

Set the color of text using various color values. 

                                

color: #ff0000;
color: rgba(0, 0, 0, 0.5);
Font size

Control the size of text using units like pixels or ems. 

                                

font-size: 16px;
font-size: 1.5em;
Font weight

Adjust the thickness of text. Common values include normal, bold, and bolder. 

                                

font-weight: bold;
Text alignment

Align text within its container using left, right, center, or justify. 

                                

text-align: center;

Box Model

Understanding the box model

The box model consists of margins, borders, padding, and content, defining the layout of elements. 

                                

/* Example box model */
.box {
  margin: 10px;
  padding: 20px;
  border: 2px solid black;
  width: 100px;
}
Box-sizing property

Control how the width and height of elements are calculated by including or excluding padding and borders. 

                                

box-sizing: border-box;
Margin collapse

When vertical margins meet, they collapse into a single margin, affecting adjacent block elements. 

                                

/* Example of margin collapse */
.container {
  margin-bottom: 30px;
}

Layouts

Display property

Define how elements are displayed on the page, such as block, inline, or none. 

                                

display: block;
display: inline;
display: none;
Positioning elements

Position elements using values like static, relative, absolute, and fixed. 

                                

position: absolute;
left: 10px;
top: 20px;
Z-index

Control the stack order of positioned elements. Higher values appear on top of lower values. 

                                

z-index: 100;
Float and clear

Use float to wrap text around images and clear to control element flow around floated elements. 

                                

float: left;
clear: both;

Colors

Color values

Define colors using names, hex codes, RGB, RGBA, HSL, and HSLA. 

                                

color: blue;
color: #00ff00;
color: rgba(255, 0, 0, 0.5);
Background colors

Set the background color of elements using color values. 

                                

background-color: lightgray;

Typography

Font size

Set the size of the text using absolute or relative units. 

                                

font-size: 18px;
font-size: 1.2em;
Font weight

Adjust the thickness of the font, using values like normal, bold, or specific numeric values. 

                                

font-weight: 700;
Line height

Control the space between lines of text. 

                                

line-height: 1.5;
Text transform

Change the capitalization of text with values like uppercase, lowercase, or capitalize. 

                                

text-transform: uppercase;

Favourites

Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.

Sign up now Right Arrow

Programming Cheatsheets: Quick Reference for Productivity

Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.

ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.

Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.

Sign up now! Right Arrow

Recent Releases

Blog IconBlogs
Learn IconLearn
Tools IconTools