π Announcing Our Ultimate CSS Guide – Now in PDF! πβ¨
I’m thrilled to share something that I believe will be a game-changer for both budding and seasoned web developers: Our comprehensive PDF guide on CSS! ππ»
π Dive into the depths of CSS with our meticulously crafted guide. From the basics of understanding CSS, internal style sheets in HTML, to advanced topics like Flexbox layouts and CSS Grid – we’ve got it all covered! ππ‘
π¨ What’s Inside?
- CSS Basics: Master the fundamentals, including selecting elements by ID and class, text capitalization, and more.
- Text Styling and Formatting: Elevate your text with size control, hyperlink styling, and creative font applications.
- Selectors and Specificity: Learn to efficiently use background images, list item displays, and master <fieldset> formatting.
- Layout and Positioning: Grasp the essentials of display properties, child selectors, and the nuances of CSS units.
- Box Model and Borders: Understand the intricacies of margin, padding, flexbox, text wrapping, and border styles.
- Transformations and Animations: Bring life to your pages with hover effects, drop shadows, and flexbox ordering.
- Spacing and Alignment: Fine-tune your design with line height adjustments, text transformations, and RGBA color formats.
- Pseudo-Classes and Elements: Dive into link color changes, first-child selection, and background repeats.
- Other Styling and Effects: Explore flexbox direction, white-space properties, cursor styles, and more!
This guide is more than just a document; it’s a roadmap to mastering the art of CSS! π Whether you’re starting your journey in web development or looking to brush up on your skills, this guide is the perfect companion. π
Let’s make our web projects more vibrant and dynamic than ever before! Share your thoughts and let me know how this guide helps you in your CSS journey! π
#CSSGuide #WebDevelopment #CSSBasics #FrontEndDevelopment #CSS3 #WebDesign #TechResources #LearningCSS #CodingCommunity #DigitalDesign #UserInterface #UIDesign #UXDesign #WebDev #TechTips #CSSStyling #CreativeCoding #TechEducation
- CSS Basics: Understanding CSS, Internal Style Sheets in HTML, Selecting Elements by ID and Class, Text Capitalization, Background and Font Properties, List Styles, Selecting Nested Elements.
- Text Styling and Formatting: Text Size Control, Hyperlink Presentation, Margin Adjustments, Bold Text, Word Spacing, Font Syntax, Borders and Font Color, Position Property Defaults, CSS Shapes.
- Selectors and Specificity: Background Images, Inline Display of List Items, <fieldset> Layout and Formatting, Rounded Corners, Shadow Effects, Adjacent Sibling Selectors, Table Cell Spacing, Opacity and z-index Properties.
- Layout and Positioning: Display Property, Child Selectors, CSS Units, Overflow Control, Visibility vs Display, Cursor Styles, Pseudo-Classes, Comments in CSS.
- Box Model and Borders: Margin and Padding, Flexbox Layout, Clear Property, Text Wrapping, Numbered Lists, Content Spacing, Display Values, Pseudo-Elements, Border Styles, Relative Positioning.
- Transformations and Animations: Hover Effects, Drop Shadow, Letter Spacing, Flexbox Ordering, Text Alignment, Border Styling, Text Italicizing, Border Radius.
- Spacing and Alignment: Line Height, First Letter Styling, Text Transformations, RGBA Color Format, Border Width, Hover Background Color, List Item Markers, Overflow-x Property, Table Row Selection, Text Decoration.
- Pseudo-Classes and Elements: Link Color Changes, Specific Element Selection, CSS Grid Layout, Inline-Block Display, First-Child Selection, Text Alignment, Background Repeat, Grid Column Spacing, Flexbox Item Ordering, Attribute Selectors.
- Other Styling and Effects: Flexbox Direction, White-Space Property, Parent-Hover Effects, Character Spacing, Vertical Text Alignment, Last-Child Selection, Cursor Styles, Text Overflow, Border Style, Font Family, Transparency, Class Selectors, Box Sizing, Specific Section Link Selection, Element Shadow, Last Element Selection, Rotation Animations, Text Decoration Removal, First Element Selection, Line Spacing.
CSS Basics:
1. What does CSS stand for?
CSS stands for Cascading Style Sheets.
Purpose: It’s used for designing and customizing the appearance of web pages by styling HTML elements.
2. HTML Tag for Defining an Internal Style Sheet:
Use the <style> tag within the HTML document’s <head> section.
<head>
<style>
body { background-color: lightblue; }
</style>
</head>
Tip: Internal style sheets are useful for single-page styles. For larger projects, external CSS files are recommended.
3. Selecting an Element with ID “demo” in CSS:
Use the hashtag # followed by the ID.
#demo {
color: blue;
}
Tip: IDs are unique to each element, making #demo select the specific element with id=”demo”.
4. Selecting Elements with Class Name “example”:
Use the dot . followed by the class name.
.example {
font-size: 20px;
}
Tip: Class selectors are used to select and style all elements with the specified class attribute.
5. Capitalizing Each Word in a Text:
Use the text-transform property with value capitalize.
p {
text-transform: capitalize;
}
Tip: This property capitalizes the first letter of each word in the selected element(s).
6. Changing the Background Color:
Use the background-color property.
body {
background-color: lightgray;
}
Tip: You can use color names, RGB, RGBA, HEX, etc., as values for this property.
7. Changing the Font of an Element:
Use the font-family property.
p {
font-family: Arial, sans-serif;
}
Tip: Always provide a fallback font (like sans-serif or serif) in case the first choice font isn’t available.
8. Making a List with Square Items:
Use the list-style-type property on ul or li elements.
ul {
list-style-type: square;
}
Tip: This styles the bullet points of a list. Other values include circle, disc, none, etc.
9. Selecting All <p> Elements Inside a <div>:
Use descendant combinator (space) to select nested elements.
div p {
color: red;
}
Tip: This selects all <p> elements that are inside any <div> element.
10. Understanding the Given CSS Code:
Please provide the specific CSS code you’re referring to for a detailed explanation.
Text Styling and Formatting in CSS: Detailed Guide with Examples
1. CSS Property for Text Size:
Property: font-size
p {
font-size: 16px;
}
Tip: You can use different units like px, em, rem, or % for setting the size.
2. Displaying Hyperlinks Without Underline:
Property: text-decoration
a {
text-decoration: none;
}
Tip: This property is also used to add underline, overline, or line-through decorations.
3. Changing Left Margin of an Element:
Property: margin-left
div {
margin-left: 20px;
}
Tip: You can also use margin shorthand to set margins for all sides.
4. Making Text Bold:
Property: font-weight
strong {
font-weight: bold;
}
Tip: Besides bold, you can use numeric values like 700 for weight.
5. Setting Spacing Between Words:
Property: word-spacing
p {
word-spacing: 5px;
}
Tip: Adjust the value to increase or decrease space between words.
6. Changing the Font Name:
Property: font-family
body {
font-family: ‘Arial’, sans-serif;
}
Tip: Always provide a fallback font type. Use font names in quotes if they contain spaces.
7. Making a Border Visible on All Sides of a Box:
Property: border
div {
border: 2px solid black;
}
Tip: The border shorthand sets the width, style, and color of the border.
8. Changing Font Color of an Element:
Property: color
h1 {
color: blue;
}
Tip: color can be specified using names, HEX, RGB, or HSL values.
9. Default Value of the Position Property:
Default Value: static
In static positioning, elements are positioned according to the normal flow of the document.
10. Creating a Circle Shape in CSS:
.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
Tip: border-radius: 50% transforms a square into a circle. Ensure height and width are equal.
11. Applying CSS Style for a Component with Two Specific Classes:
Syntax: Use a dot . to concatenate the class names without any space.
.classOne.classTwo {
color: green;
}
Example HTML: <div class=”classOne classTwo”>Text</div>
Tip: This rule will only apply to elements that have both classOne and classTwo.
Selectors and Specificity in CSS: A Comprehensive Guide with Examples
1. Setting Background Image of an Element:
Property: background-image
div {
background-image: url(‘image.jpg’);
}
Tip: The URL should point to the image you want to set as the background. It can be a relative or absolute path.
2. Displaying List Items Inline:
Property: display
li {
display: inline;
}
Tip: This makes list items appear in a row, rather than the default stacked vertically.
3. Controlling Layout and Formatting of <fieldset> Element:
Property: General layout properties like width, margin, padding, border, etc., are used.
fieldset {
border: 2px solid gray;
padding: 10px;
width: 50%;
}
Tip: Customize your <fieldset> elements using these standard CSS properties to fit the layout of your form.
4. Creating Rounded Corners Using CSS:
Property: border-radius
div {
border-radius: 10px;
}
Tip: The border-radius property can accept pixel values or percentages to create circular or elliptical shapes.
5. Selecting All <p> Elements with a <div> Parent:
Selector: Descendant combinator (space)
div p {
color: blue;
}
Tip: This selector targets all <p> elements that are inside a <div> element.
6. Adding Shadow to Elements:
Property: box-shadow
div {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
Tip: The box-shadow property takes values for horizontal offset, vertical offset, blur radius, and color.
7. Meaning of h1 + p in CSS:
Represents: The adjacent sibling combinator.
It selects a <p> element immediately following an <h1>.
h1 + p {
font-weight: bold;
}
Tip: This is useful when you want to style an element that directly follows another specific element.
8. Specifying Space Between Cells in a Table:
Property: border-spacing
table {
border-spacing: 5px;
}
Tip: This property sets the distance between the borders of adjacent table cells.
9. Setting Opacity of an Element:
Property: opacity
div {
opacity: 0.5; /* 50% transparency */
}
Tip: opacity ranges from 0 (completely transparent) to 1 (completely opaque).
10. Purpose of the z-index Property:
Function: Controls the stacking order of positioned elements.
div {
position: relative;
z-index: 10;
}
Tip: Elements with a higher z-index cover those with a lower one. It works only on elements with a position value other than static.
Layout and Positioning in CSS: Detailed Insights with Examples
1. Function of the CSS Display Property:
Purpose: The display property specifies how an element is displayed.
div {
display: none; /* Hide an element */
}
span {
display: block; /* Make an inline element behave like a block-level element */
}
Tip: Common values include block, inline, inline-block, none, and more recently, flex and grid.
2. Selecting All Child <p> Elements of a <div>:
Selector: Child combinator (>)
div > p {
color: blue;
}
Tip: This selector targets only <p> elements that are direct children of a <div>.
3. Invalid CSS Unit:
Invalid Unit: Example of a non-valid unit is ptx.
Valid Units: px, em, rem, %, vh, vw, etc.
4. Purpose of the Overflow Property in CSS:
Function: Controls what happens to content that exceeds the bounds of its container.
div {
overflow: hidden; /* Hides content that overflows the div’s box */
}
Tip: Other values include scroll, auto, and visible.
5. Difference Between visibility and display:
visibility: hidden; makes an element invisible, but it still takes up space in the layout.
display: none; removes the element from the document flow, and it takes up no space.
.hidden {
visibility: hidden;
}
.gone {
display: none;
}
Tip: Use display: none; for removing an element completely and visibility: hidden; to hide but maintain space.
6. Changing Cursor Type on Hover:
Property: cursor
button:hover {
cursor: pointer; /* Changes the cursor to a pointer when hovering over a button */
}
Tip: cursor can be set to various values like default, pointer, crosshair, etc.
7. Using :nth-child() Pseudo-Class in CSS:
Purpose: Selects the nth child of a parent element.
p:nth-child(2) {
color: blue; /* Selects the second <p> element */
}
Tip: You can use formulas like nth-child(2n+1) for complex selections.
8. Default Position Value in CSS:
Default Value: static
In this default state, elements are positioned according to the normal flow of the document.
9. Adding a Comment in a CSS File:
Syntax: Comments in CSS are added using /* comment */.
/* This is a comment */
body {
background-color: white;
}
Tip: Use comments to explain sections of CSS code, making it easier to understand and maintain.
Box Model, Borders, and Layout in CSS: In-Depth Explorations
1. Creating Space Around Elements (Outside Borders):
Property: margin
div {
margin: 10px; /* Creates 10px space around the div */
}
Tip: margin can be set for each side individually (e.g., margin-top, margin-right, etc.) or using shorthand notation.
2. The Flex Property in CSS Flexbox Layout:
Function: In a flex container, the flex property specifies how a flex item will grow or shrink to fit the available space.
.flex-item {
flex: 1; /* Flex item will grow or shrink to fill the space */
}
Tip: flex is a shorthand for flex-grow, flex-shrink, and flex-basis.
3. Purpose of the Clear Property in CSS:
Function: Prevents floating elements from affecting the element it’s applied to.
div {
clear: both; /* Neither left nor right floating elements will affect this div */
}
Tip: Commonly used in layouts where floating elements are involved, ensuring consistent spacing and alignment.
4. Controlling Text Wrapping in CSS:
Property: white-space
p {
white-space: nowrap; /* Prevents text from wrapping to a new line */
}
Tip: Other values include normal, pre, pre-wrap, and pre-line.
5. Creating a Numbered List:
HTML Element: <ol> (Ordered List)
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Tip: <ol> automatically creates a numbered list, with <li> for each item.
6. Moving Content Away from Borders:
Property: padding
div {
padding: 15px; /* Adds space between the content and the border of the div */
}
Tip: Padding increases the internal space within an element, unlike margins which create space outside.
7. Default Display Value for Most Elements:
Default Value: block for elements like <div>, <p>, etc., and inline for elements like <span>, <a>, etc.
8. Function of the :after Pseudo-Element:
Purpose: Inserts content after the content of the selected element.
p:after {
content: ‘ *’; /* Adds an asterisk after every paragraph */
}
Tip: Commonly used for decorative elements or to append content.
9. Selecting Every <p> Element Whose Parent is Not a <div>:
Selector: :not() and direct child combinator (>)
:not(div) > p {
color: red; /* Styles <p> elements that are not direct children of <div> */
}
Tip: This selector is versatile for excluding specific parent-child relationships.
10. Changing Style of the Bottom Border:
Property: border-bottom
div {
border-bottom: 2px solid blue; /* Sets a blue bottom border for div */
}
Tip: Similar properties exist for border-top, border-left, and border-right.
11. Effect of position: relative; in CSS:
Function: This property sets the element’s position relative to its normal position.
div {
position: relative;
top: 10px; /* Moves the div 10px down from its original position */
}
Tip: Relative positioning doesnβt remove the element from the normal document flow, unlike absolute positioning.
Transformations and Animations in CSS: Essential Techniques and Examples
1. Changing Color of an Element on Mouse Hover:
Property: :hover pseudo-class
button:hover {
color: red; /* Changes the text color to red when the mouse hovers over it */
}
Tip: The :hover pseudo-class can be applied to almost any element, not just links.
2. Creating a Drop Shadow Effect:
Property: box-shadow
div {
box-shadow: 5px 5px 10px grey; /* Adds a grey shadow to the div */
}
Tip: box-shadow can accept multiple values to create complex shadow effects.
3. Controlling Space Between Letters:
Property: letter-spacing
p {
letter-spacing: 2px; /* Increases the space between letters */
}
Tip: Negative values are allowed to reduce the space between letters.
4. Changing Order of Flex Items:
Property: order in Flexbox
.flex-item {
order: 2; /* Changes the order of this flex item */
}
Tip: Items in a flex container can be reordered without changing the HTML structure.
5. Center Aligning Text Horizontally:
Property: text-align
p {
text-align: center; /* Horizontally centers the text inside a paragraph */
}
Tip: text-align: center; is one of the most commonly used properties for text alignment.
6. Adding a Border to an Element:
Property: border
div {
border: 1px solid black; /* Adds a solid black border */
}
Tip: The border property is shorthand for border-width, border-style, and border-color.
7. Making Font Italic:
Property: font-style
p {
font-style: italic; /* Makes the paragraph text italic */
}
Tip: Other values for font-style include normal and oblique.
8. Creating Rounded Corners with Specific Radius:
Property: border-radius
div {
border-radius: 10px; /* Rounds the corners of the div */
}
Tip: You can specify different radii for each corner (e.g., border-radius: 10px 5px 15px 20px; for top-left, top-right, bottom-right, and bottom-left respectively).
9. Making Text Bold:
Property: font-weight
strong {
font-weight: bold; /* Makes the text within <strong> bold */
}
Tip: Besides bold, you can also specify numeric values for weight (e.g., 700).
Spacing and Alignment in CSS: Detailed Guide with Examples
1. Specifying Space Between Lines of Text:
Property: line-height
p {
line-height: 1.5; /* Sets the space between lines to 1.5 times the normal line space */
}
Tip: line-height can improve readability, especially in large blocks of text.
2. Applying Styles to the First Letter of a Text Element:
Pseudo-element: ::first-letter
p::first-letter {
font-size: 200%;
color: blue;
}
Tip: This is often used to create a drop cap or stylize the first letter of a paragraph.
3. Transforming Text to Uppercase:
Property: text-transform: uppercase;
p {
text-transform: uppercase; /* Converts all text in the paragraph to uppercase */
}
Tip: Other values for text-transform include lowercase, capitalize, and none.
4. Purpose of the rgba() Color Format:
Function: Allows specifying colors with an alpha channel (transparency level).
div {
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}
Tip: The rgba format is useful for creating overlay effects or semi-transparent elements.
5. Controlling Width of an Element’s Border:
Property: border-width
div {
border-width: 5px; /* Sets a 5px border width */
}
Tip: You can specify individual border widths for each side (e.g., border-width: 1px 2px 3px 4px;).
6. Changing Background Color on Mouse Hover:
Property: :hover pseudo-class with background-color
button:hover {
background-color: lightblue; /* Changes background color when hovered */
}
Tip: This property is widely used for interactive elements like buttons and links to improve user experience.
7. Specifying List Item Markers:
Property: list-style-type
ul {
list-style-type: square; /* Uses squares as the list item marker */
}
Tip: For ordered lists (<ol>), values like decimal or lower-alpha can be used.
8. Purpose of the CSS Overflow-x Property:
Function: Controls how overflow is handled horizontally in a container.
div {
overflow-x: scroll; /* Adds a horizontal scrollbar if the content overflows */
}
Tip: Use overflow-x when you want to control horizontal overflow without affecting the vertical overflow.
9. Selecting All Even Rows of a Table:
Selector: :nth-child() pseudo-class
tr:nth-child(even) {
background-color: lightgray;
}
Tip: This CSS selector is particularly useful for styling alternate rows in tables for better readability.
10. Purpose of text-decoration: underline;:
Function: Adds an underline to the text.
a {
text-decoration: underline; /* Underlines all anchor (link) text */
}
Tip: Commonly used for emphasizing or highlighting text, especially for links.
Pseudo-Classes and Elements in CSS: A Comprehensive Exploration
1. Changing Color of Visited Links:
Property: :visited pseudo-class
a:visited {
color: purple;
}
Tip: Use :visited to style links differently once they have been clicked. Be mindful of privacy concerns when styling visited links.
2. Applying Styles to Every Second Element:
Pseudo-class: :nth-child()
li:nth-child(2n) {
color: blue; /* Styles every second list item */
}
Tip: The 2n in nth-child(2n) represents an even pattern, thus selecting every second element.
3. Controlling Order of Columns in CSS Grid:
Property: order within a grid item
.grid-item {
order: 2; /* Positions this item second in the grid layout */
}
Tip: The order property works in both Flexbox and CSS Grid layouts to control the sequencing of items.
4. The display: inline-block; Property:
Function: Allows an element to flow like an inline element but retains block-level styling capabilities.
span {
display: inline-block;
width: 50px;
height: 50px;
}
Tip: inline-block is useful for aligning elements side by side while still being able to set width and height.
5. Selecting the First Child of a Specific Element Type:
Pseudo-class: :first-child
p:first-child {
font-weight: bold; /* Styles the first paragraph element in its parent */
}
Tip: This selector targets the first occurrence of the specified element within its parent.
6. Purpose of text-align: center;:
Function: Horizontally centers the inline content of an element.
div {
text-align: center; /* Centers the text inside the div */
}
Tip: It’s commonly used for centering text or inline elements within a block-level element.
7. Control by background-repeat Property:
Function: Determines how background images are repeated.
body {
background-image: url(‘image.jpg’);
background-repeat: no-repeat; /* The image will not be repeated */
}
Tip: Other values include repeat, repeat-x, repeat-y.
8. Controlling Space Between Columns in CSS Grid:
Property: grid-column-gap or column-gap in newer specifications
.grid-container {
display: grid;
column-gap: 20px; /* Sets the gap between columns */
}
Tip: column-gap is part of the modern Grid Layout specification, providing a standardized way to set gaps.
9. Controlling Order of Items in Flexbox:
Property: order within a flex item
.flex-item {
order: 1; /* This item will be positioned first */
}
Tip: Especially useful in responsive layouts where order might change based on screen size.
10. Creating a CSS Class for Elements with a Specific Attribute:
Attribute Selector:
input[type=”text”] {
border-color: blue; /* Applies styles to all text-type input elements */
}
Tip: This selector targets elements based on their attributes, providing a powerful way to apply styles conditionally.
Other Styling and Effects in CSS: Detailed Explanations and Examples
1. flex-direction in Flexbox Layout:
Function: Determines the direction of the flex items within a flex container.
.flex-container {
display: flex;
flex-direction: column; /* Stacks flex items vertically */
}
Tip: Other values include row, row-reverse, and column-reverse.
2. Purpose of white-space: nowrap;:
Function: Prevents text from wrapping to a new line.
p {
white-space: nowrap; /* Keeps text in a single line */
}
Tip: Useful in situations where text wrapping is not desirable, like in navigational menus.
3. Applying Styles on Hover of Parent Element:
div:hover p {
color: red; /* Styles <p> when its parent <div> is hovered */
}
Tip: This is a common technique for creating interactive hover effects on parent-child relationships.
4. Spacing Between Characters:
Property: letter-spacing
p {
letter-spacing: 2px; /* Increases the space between characters */
}
Tip: Negative values can be used for closer character spacing.
5. Vertical Text Alignment:
While CSS doesn’t provide a direct way to vertically align text, a common technique involves using display: flex and align-items.
div {
display: flex;
align-items: center; /* Vertically centers text in the div */
height: 100px;
}
Tip: Flexbox is a versatile tool for both horizontal and vertical alignment.
6. Selecting the Last Child of a Specific Element Type:
Pseudo-class: :last-child
p:last-child {
font-weight: bold; /* Styles the last <p> element in its parent */
}
Tip: Targets the last occurrence of the specified element within its parent.
7. cursor: pointer; Property:
Function: Changes the cursor to a pointer, indicating a clickable element.
button {
cursor: pointer;
}
Tip: Commonly used for buttons, links, or other interactive elements.
8. Purpose of text-overflow: ellipsis;:
Function: Truncates text and shows an ellipsis (…) when it overflows its container.
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Tip: Ensure overflow is set to hidden and white-space to nowrap for this to work.
9. Specifying Style of an Element’s Border:
Property: border-style
div {
border-style: dashed; /* Sets a dashed border */
}
Tip: Values include solid, dotted, dashed, double, none, etc.
10. font-family Property:
Function: Specifies the typeface used for text in an element.
body {
font-family: “Arial”, sans-serif;
}
Tip: Always provide fallback font options.
11. Controlling Transparency:
Property: opacity
div {
opacity: 0.5; /* 50% transparent */
}
Tip: The value of opacity ranges from 0 (fully transparent) to 1 (fully opaque).
12. Selecting Elements with a Specific Class:
.example {
color: blue; /* Selects all elements with class ‘example’ */
}
Tip: Class selectors are the backbone of CSS styling and are widely used due to their versatility.
13. box-sizing: border-box; Property:
Function: The dimensions of the element include padding and border.
div {
box-sizing: border-box;
}
Tip: Makes width and height styling more predictable, especially when adding padding or borders.
14. Selecting Links Within a Specific Section:
#sectionId a {
color: green; /* Styles all <a> elements within the element with id ‘sectionId’ */
}
Tip: Replace #sectionId with the actual ID of the section you’re targeting.
15. Creating a Shadow Behind an Element’s Border:
Property: box-shadow
div {
box-shadow: 10px 10px 5px grey; /* Adds a shadow to the div */
}
Tip: Use box-shadow to add depth to elements, enhancing the user interface.
16. Selecting the Last Element of a Specific Type:
Pseudo-class: :last-of-type
p:last-of-type {
color: red; /* Styles the last <p> element within its parent */
}
Tip: This is similar to :last-child but specific to the element type.
17. Creating a Rotating Animation:
Property: CSS Animations with @keyframes
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
div {
animation: rotate 2s infinite linear;
}
Tip: CSS animations allow for complex effects and transformations.
18. text-decoration: none; Property:
Function: Removes decoration from text, commonly used to remove underlines from links.
a {
text-decoration: none;
}
Tip: Essential for custom link styling.
19. Selecting the First Element of a Specific Type:
Pseudo-class: :first-of-type
p:first-of-type {
font-size: 20px; /* Styles the first <p> element within its parent */
}
Tip: Targets the first instance of the specified type, regardless of siblings of other types.
20. Controlling Spacing Between Lines of Text:
Property: line-height
p {
line-height: 1.5; /* 1.5 times the normal line height */
}
Tip: line-height improves text readability and aesthetics, especially in large text blocks.