⋮

Levoric Learn

Levoric Learn

Docs Frameworks Tutorials Examples Blogs
Follow Us
Twitter Facebook Instagram GitHub Discord LinkedIn

Help Center | Levoric Learn

About Us Privacy Policy Terms and Condtion
View on GitHub

CSS Tutorials

What is CSS?

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

Why use CSS?

CSS is used to control the style of a web document in a simple and easy way. CSS saves a lot of work by controlling the layout of multiple web pages all at once.

In this article
In this article

  1. CSS Syntax

    A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons.

    selector { property: value; }

    For example, the following CSS rule sets the text color of all <p> elements to red:

    p { color: red; }

  2. Types of CSS

    There are three types of CSS: Inline CSS, Internal CSS, and External CSS.

    1. Inline CSS

    Inline CSS is used to apply a unique style to a single HTML element. It uses the style attribute within the relevant element. For example:

    <p style="color:blue;">This is a blue paragraph.</p>

    2. Internal CSS

    Internal CSS is used to define styles for a single HTML page. It is defined in the <head> section of an HTML file within a <style> element. For example:

    <style>
    p { color: red; }
    </style>

    3. External CSS

    External CSS is used to define the style for many HTML pages. With an external stylesheet, you can change the look of an entire website by changing just one file. Each HTML page must include a reference to the external stylesheet file inside the <link> element, inside the <head> section. For example:

    <link rel="stylesheet" type="text/css" href="styles.css">

  3. CSS Selectors

    CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories:

    • Simple selectors (select elements based on name, id, class)
    • Combinator selectors (select elements based on a specific relationship between them)
    • Pseudo-class selectors (select elements based on a certain state)
    • Pseudo-elements selectors (select and style a part of an element)
    • Attribute selectors (select elements based on an attribute or attribute value)

  4. The Box Model

    All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements and it consists of: margins, borders, padding, and the actual content. The box model allows us to add a border around elements and to define space between elements.

    The box model has the following parts:

    • Content - The content of the box, where text and images appear
    • Padding - Clears an area around the content. The padding is transparent
    • Border - A border that goes around the padding and content
    • Margin - Clears an area outside the border. The margin is transparent

  5. CSS Units

    CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

    Length is a number followed by a length unit, such as 10px, 2em, etc. There are two types of length units: absolute and relative.

    • Absolute units - such as cm (centimeters), mm (millimeters), in (inches), pt (points), pc (picas), px (pixels)
    • Relative units - such as em, ex, ch, rem, vw, vh, vmin, vmax, %

  6. CSS Color Values

    In CSS, colors can be specified in different ways:

    • By color names: red, blue, green, etc.
    • By HEX values: #ff0000, #0000ff, #008000, etc.
    • By RGB values: rgb(255,0,0), rgb(0,0,255), rgb(0,128,0), etc.
    • By RGBA values: rgba(255,0,0,0.3), rgba(0,0,255,0.3), rgba(0,128,0,0.3), etc.
    • By HSL values: hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(120, 100%, 25%), etc.
    • By HSLA values: hsla(0, 100%, 50%, 0.3), hsla(240, 100%, 50%, 0.3), hsla(120, 100%, 25%, 0.3), etc.

  7. CSS Backgrounds

    CSS background properties are used to define the background effects for elements. The following properties are commonly used:

    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
    • background-size

  8. CSS Borders

    The CSS border properties allow you to specify the style, width, and color of an element's border. The following properties are commonly used:

    • border-style
    • border-width
    • border-color
    • border-radius

  9. CSS Margins

    The CSS margin properties are used to create space around elements, outside of any defined borders. The following properties are commonly used:

    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
    • margin (shorthand property for setting the margin properties in one declaration)

  10. CSS Padding

    The CSS padding properties are used to generate space around an element's content, inside of any defined borders. The following properties are commonly used:

    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
    • padding (shorthand property for setting the padding properties in one declaration)

  11. CSS Text

    The CSS text properties are used to specify the style of text elements. The following properties are commonly used:

    • color
    • text-align
    • text-decoration
    • text-transform
    • letter-spacing
    • line-height

  12. CSS Fonts

    The CSS font properties are used to specify the font style, size, and weight of text. The following properties are commonly used:

    • font-family
    • font-size
    • font-style
    • font-weight
    • font-variant

  13. CSS Lists

    The CSS list properties are used to define the style of list items. The following properties are commonly used:

    • list-style-type
    • list-style-position
    • list-style-image

  14. CSS Tables

    The CSS table properties are used to define the style of HTML tables. The following properties are commonly used:

    • border-collapse
    • border-spacing
    • caption-side
    • empty-cells
    • table-layout

  15. CSS Positioning

    The CSS positioning properties are used to define the positioning of elements on a web page. The following properties are commonly used:

    • position
    • top
    • right
    • bottom
    • left
    • z-index
    • float
    • clear

  16. CSS Flexbox

    The CSS Flexbox Layout module makes it easier to design flexible responsive layout structures without using float or positioning. The following properties are commonly used:

    • display (set to flex to enable flexbox)
    • flex-direction
    • justify-content
    • align-items
    • align-self
    • flex-wrap
    • flex
    • order

  17. CSS Grid

    The CSS Grid Layout module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. The following properties are commonly used:

    • display (set to grid to enable grid layout)
    • grid-template-columns
    • grid-template-rows
    • grid-gap
    • grid-column
    • grid-row
    • justify-items
    • align-items
    • grid-area

  18. CSS Animations

    CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints. The following properties are commonly used:

    • @keyframes (defines the animation)
    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction

  19. Responsive Web Design

    Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. Recent work also considers the viewer's proximity as part of the viewing context as an extension for RWD. Content, design, and performance are necessary across all devices to ensure usability and satisfaction. The following CSS features are commonly used:

    • @media (media queries)
    • flexbox (flexible box layout)
    • grid (grid layout)
    • viewport (the visible area of a webpage)
    • responsive units (such as %, vw, vh)

  20. CSS Advanced Selectors

    CSS provides several advanced selectors that allow you to target elements more precisely. Here are some of the most useful ones:

    • :nth-child(n) - Selects the nth child of a parent element, where n can be a number, keyword, or formula.
    • :nth-of-type(n) - Similar to :nth-child, but only counts elements of the same type.
    • :not(selector) - Selects every element that does not match the specified selector.
    • :first-child - Selects the first child of a parent element.
    • :last-child - Selects the last child of a parent element.
    • :only-child - Selects an element that is the only child of its parent.
    • [attribute] - Selects elements with a specific attribute.
    • [attribute=value] - Selects elements with a specific attribute value.
    • [attribute^=value] - Selects elements whose attribute value starts with the specified value.
    • [attribute$=value] - Selects elements whose attribute value ends with the specified value.
    • [attribute*=value] - Selects elements whose attribute value contains the specified value.

  21. CSS Pseudo-classes and Pseudo-elements

    Pseudo-classes and pseudo-elements allow you to apply styles to elements based on their state or their position in the document tree.

  22. Pseudo-classes

    Pseudo-classes are keywords added to selectors that specify a special state of the selected elements:

    • :hover - Applies styles when the user hovers over an element.
    • :focus - Applies styles when an element gains focus (e.g., when clicked or tabbed to).
    • :active - Applies styles when an element is being activated (e.g., when a button is being clicked).
    • :visited - Applies styles to links that have been visited.
    • :checked - Applies styles to checkboxes or radio buttons that are checked.
    • :disabled - Applies styles to form elements that are disabled.
    • :enabled - Applies styles to form elements that are enabled.
    • :first-of-type - Applies styles to the first element of its type within its parent.
    • :last-of-type - Applies styles to the last element of its type within its parent.
    • :only-of-type - Applies styles to elements that are the only ones of their type within their parent.
    • :root - Applies styles to the document's root element (<html>).
    • :empty - Applies styles to elements that have no children.
    • :target - Applies styles to the target element of a URL containing a fragment identifier.

  23. Pseudo-elements

    Pseudo-elements allow you to style specific parts of an element's content:

    • ::before - Inserts content before an element's content.
    • ::after - Inserts content after an element's content.
    • ::first-line - Applies styles to the first line of an element's content.
    • ::first-letter - Applies styles to the first letter of an element's content.
    • ::selection - Applies styles to the portion of an element's content that is selected by the user.
    • ::placeholder - Applies styles to the placeholder text of an input element.

  24. CSS Variables (Custom Properties)

    CSS variables, also known as custom properties, allow you to store values that you can reuse throughout your stylesheet. They are defined using the -- prefix and accessed using the var() function.

    Here is an example of how to define and use CSS variables:

    :root {
--main-bg-color: #f4f4f4;
--main-text-color: #333;
}

body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}

  25. CSS Functions

    CSS functions are built-in functions that you can use to manipulate values in your stylesheets. Some commonly used CSS functions include:

    • calc() - Performs calculations to determine CSS property values.
    • var() - Accesses the value of a CSS variable.
    • rgba() - Defines colors using red, green, blue, and alpha (opacity) values.
    • hsla() - Defines colors using hue, saturation, lightness, and alpha (opacity) values.
    • url() - Specifies a URL for an external resource (e.g., an image).
    • attr() - Returns the value of an attribute of an element.
    • min() - Returns the smallest (minimum) value from a list of values.
    • max() - Returns the largest (maximum) value from a list of values.
    • clamp() - Clamps a value between an upper and lower bound.

  26. CSS Transitions

    CSS transitions provide a way to control the speed of the animation when changing CSS properties. This allows you to make your website more interactive and visually appealing. A transition effect can be created using the transition property.

    Here is an example of how to create a simple transition:

    .box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s ease;
}

.box:hover {
background-color: red;
}

  27. CSS Media Queries

    CSS media queries allow you to apply styles based on the characteristics of the user's device, such as its width, height, and resolution. Media queries are essential for creating responsive web designs that adapt to different screen sizes and devices.

    Here is an example of a media query that applies styles to screens with a maximum width of 600px:

    @media (max-width: 600px) {
body {
background-color: lightblue;
}
}

  28. CSS Grid Layout

    The CSS Grid Layout is a powerful layout system that allows you to create complex, responsive grid-based designs. The grid layout is defined using the display: grid; property, and elements within the grid can be positioned using a variety of grid-specific properties.

    Here is an example of a simple grid layout:

    .container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

.item {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}

  29. CSS Flexbox Layout

    The CSS Flexbox Layout is another powerful layout system that allows you to create flexible and responsive designs. Flexbox is defined using the display: flex; property, and elements within the flex container can be positioned using a variety of flex-specific properties.

    Here is an example of a simple flexbox layout:

    .container {
display: flex;
justify-content: space-between;
align-items: center;
}

.item {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}

  30. CSS Typography

    Typography is a crucial aspect of web design, and CSS provides a variety of properties to control the appearance of text on your web pages. Some commonly used typography-related properties include:

    • font-family - Specifies the font family for text.
    • font-size - Specifies the size of the font.
    • font-weight - Specifies the weight (or boldness) of the font.
    • font-style - Specifies the style of the font (e.g., normal, italic).
    • line-height - Specifies the height of lines of text.
    • letter-spacing - Specifies the spacing between characters.
    • text-align - Specifies the horizontal alignment of text.
    • text-transform - Specifies the capitalization of text (e.g., uppercase, lowercase).
    • text-decoration - Specifies the decoration of text (e.g., underline, line-through).
    • text-shadow - Adds shadow to text.

  31. CSS Transforms

    CSS transforms allow you to modify the appearance and position of elements using various transformation functions. Some commonly used transformation functions include:

    • translate(x, y) - Moves an element by the specified x and y values.
    • rotate(angle) - Rotates an element by the specified angle.
    • scale(x, y) - Scales an element by the specified x and y values.
    • skew(x-angle, y-angle) - Skews an element by the specified x and y angles.

    Here is an example of how to apply a transformation to an element:

    .box {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(45deg);
}

  32. CSS Filters

    CSS filters allow you to apply graphical effects to elements, such as blurring, sharpening, or changing the color. Filters can be applied using the filter property.

    Here are some commonly used CSS filters:

    • blur(value) - Applies a blur effect to the element.
    • brightness(value) - Adjusts the brightness of the element.
    • contrast(value) - Adjusts the contrast of the element.
    • grayscale(value) - Converts the element to grayscale.
    • hue-rotate(angle) - Rotates the hue of the element.
    • invert(value) - Inverts the colors of the element.
    • opacity(value) - Adjusts the opacity of the element.
    • saturate(value) - Adjusts the saturation of the element.
    • sepia(value) - Applies a sepia effect to the element.

  33. Here is an example of how to apply a filter to an element:

    .image {
filter: grayscale(100%);
}

    CSS Animations

    CSS animations allow you to create complex animations by defining keyframes and animation properties. Animations can be created using the @keyframes rule and the animation property.

    Here is an example of a simple animation:

    @keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

.box {
width: 100px;
height: 100px;
background-color: red;
animation: example 5s infinite;
}

  34. CSS Positioning

    CSS positioning allows you to control the layout of elements on your web pages. There are several positioning schemes available in CSS:

    • static - The default positioning scheme, where elements are positioned according to the normal flow of the document.
    • relative - Elements are positioned relative to their normal position.
    • absolute - Elements are positioned relative to their nearest positioned ancestor (or the initial containing block).
    • fixed - Elements are positioned relative to the viewport and do not move when the page is scrolled.
    • sticky - Elements are positioned based on the user's scroll position.

    Here is an example of how to use different positioning schemes:

    .relative {
position: relative;
top: 10px;
left: 10px;
}

.absolute {
position: absolute;
top: 50px;
left: 50px;
}

.fixed {
position: fixed;
top: 0;
right: 0;
}

.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

  35. CSS Specificity

    CSS specificity determines which CSS rule is applied by the browser when multiple rules could apply to the same element. Specificity is calculated based on the types of selectors used in the rule:

    • Inline styles - Have the highest specificity (e.g., style="color: red;").
    • IDs - Have higher specificity than classes, attributes, and pseudo-classes (e.g., #example).
    • Classes, attributes, and pseudo-classes - Have higher specificity than elements and pseudo-elements (e.g., .example, [type="text"], :hover).
    • Elements and pseudo-elements - Have the lowest specificity (e.g., div, ::before).

  36. CSS Box Model

    The CSS box model describes the rectangular boxes generated for elements in the document tree and includes the following components:

    • Content - The inner part of the box where text and images appear.
    • Padding - The space between the content and the border of the box.
    • Border - The border surrounding the padding (if any) and content.
    • Margin - The space outside the border, separating the element from other elements.

  37. CSS Units

    CSS units are used to define the sizes of various properties, such as width, height, padding, margin, and font size. There are several types of units available in CSS:

    • Absolute units - These units are fixed and do not change with the size of the viewport. Examples include pixels (px), points (pt), and inches (in).
    • Relative units - These units are relative to another value, such as the size of the parent element or the viewport. Examples include percentages (%), ems (em), rems (rem), and viewport width/height (vw/vh).

  38. CSS Shorthand Properties

    CSS shorthand properties allow you to define multiple related CSS properties in a single declaration. This can help you write more concise and readable code.

    Here are some commonly used shorthand properties:

    • margin - Sets the margin for all four sides of an element (e.g., margin: 10px 20px 30px 40px;).
    • padding - Sets the padding for all four sides of an element (e.g., padding: 10px 20px 30px 40px;).
    • border - Sets the border width, style, and color in a single declaration (e.g., border: 1px solid black;).
    • background - Sets the background color, image, position, size, and other background-related properties in a single declaration (e.g., background: red url('image.jpg') no-repeat center center;).
    • font - Sets the font style, variant, weight, size, line height, and family in a single declaration (e.g., font: italic small-caps bold 16px/1.5 Arial, sans-serif;).

Community

Stay up-to-date on the development of Levoric Learn and reach out to the community with these helpful resources.

Join Levoric Learn Community to stay ahead in your learning journey and keep up with the latest trends, insights, and developments in your field of interest. Our community is designed to foster collaboration, knowledge sharing, and continuous growth among enthusiasts, learners, and experts alike.

You can follow & Ask Question at levoriclearn @Twitter