CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a web page. It allows you to control the layout, colors, fonts, and overall appearance of your website, making it visually appealing and user-friendly. CSS separates content from design, enabling you to maintain and update styles across multiple web pages efficiently.
Inline CSS is used to apply a unique style to a single HTML element. It is added directly within the HTML element’s style attribute, making it convenient for quick changes but not ideal for maintaining large-scale websites.
Syntax:
<p style="color: blue; text-align: center;">This is an inline CSS example.</p>
Internal CSS is used to define styles for a single HTML document. It is placed within the <style> tag in the <head> section of the HTML file. This method is useful for applying styles to a single page without affecting other pages.
Syntax:
<head>
<style>
p {
color: blue;
text-align: center;
}
</style>
</head>
External CSS is used to apply styles to multiple HTML documents. It is stored in a separate .css file, which is linked to the HTML file using the <link> tag. This method is best for maintaining consistent styles across a large website.
Syntax:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
styles.css:
p {
color: blue;
text-align: center;
}
CSS selectors are used to select HTML elements to apply styles. They can target elements based on their name, class, ID, attributes, and more.
p {
color: blue;
}
This selector applies styles to all <p> elements.
#.
#uniqueElement {
color: green;
}
This selector applies styles to the element with the ID uniqueElement.
..
.myClass {
color: red;
}
This selector applies styles to all elements with the class myClass.
[type] {
border: 1px solid black;
}
This selector applies styles to all elements that have a type attribute.
div p {
color: purple;
}
This selector applies styles to all <p> elements that are within a <div> element.
Controls the alignment of text within an element.
p {
text-align: center; /* options: left, right, center, justify */
}
This property aligns the text inside the <p> element to the center.
Adds decoration to text.
p {
text-decoration: underline; /* options: none, underline, overline, line-through */
}
This property adds an underline to the text inside the <p> element.
Specifies the weight (boldness) of the font.
p {
font-weight: bold; /* options: normal, bold, bolder, lighter, 100-900 */
}
This property makes the text inside the <p> element bold.
Sets the font family for text.
p {
font-family: Arial, sans-serif;
}
This property sets the font of the text inside the <p> element to Arial, with sans-serif as a fallback.
Defines the size of the text.
p {
font-size: 16px; /* options: px, em, rem, %, etc. */
}
This property sets the font size of the text inside the <p> element to 16 pixels.
Controls the capitalization of text.
p {
text-transform: uppercase; /* options: none, capitalize, uppercase, lowercase */
}
This property transforms the text inside the <p> element to uppercase letters.
Sets the height and width of an element.
div {
height: 200px;
width: 300px;
}
These properties set the height to 200 pixels and the width to 300 pixels for the <div> element.
Defines the border around an element.
div {
border: 1px solid black;
}
This property adds a 1-pixel solid black border around the <div> element.
Creates space around elements, outside of any defined borders.
div {
margin: 10px;
}
This property adds a 10-pixel margin outside the <div> element.
Creates space around content, inside of any defined borders.
div {
padding: 10px;
}
This property adds a 10-pixel padding inside the <div> element, around the content.
Default positioning of elements.
div {
position: static;
}
This is the default position for elements, placing them in the normal document flow.
Positions the element relative to the browser window.
div {
position: fixed;
top: 10px;
right: 10px;
}
This property positions the <div> element 10 pixels from the top and right of the browser window, and it stays fixed during scrolling.
Positions the element relative to its normal position.
div {
position: relative;
top: 10px;
left: 10px;
}
This property moves the <div> element 10 pixels down and 10 pixels to the right from its normal position.
Positions the element relative to the nearest positioned ancestor.
div {
position: absolute;
top: 10px;
right: 10px;
}
This property positions the <div> element 10 pixels from the top and right of its nearest positioned ancestor.
Switches between relative and fixed positioning based on the user’s scroll position.
div {
position: sticky;
top: 0;
}
This property makes the <div> element stick to the top of the page when you scroll past it.
Displays an element as an inline element (like <span>).
div {
display: inline;
}
This property makes the <div> element behave like an inline element, allowing other elements to flow around it.
Displays an element as a block element (like <div>).
div {
display: block;
}
This property makes the <div> element behave like a block element, starting on a new line and taking up the full width available.
Displays an element as an inline-level block container.
div {
display: inline-block;
}
This property makes the <div> element behave like an inline element but allows you to set a width and height.
Hides an element.
div {
display: none;
}
This property completely hides the <div> element, removing it from the document flow.