CSS stands for Cascading Style Sheets.
It's a style sheet language used for describing the presentation of
a document written in a markup language like HTML (Hypertext Markup Language). CSS describes how
elements should be rendered on screen, on paper, in speech, or on other media.
Here are some key points about CSS:
1. Separation of Content and Presentation: CSS allows web developers to separate the content of
a web page (HTML) from its presentation (styling). This separation makes it easier to maintain
and update websites.
2. Styling HTML Elements: With CSS, you can apply styles to HTML elements, such as setting colors,
fonts, margins, padding, and layout properties like positioning and sizing.
3. Selectors: CSS uses selectors to target specific HTML elements and apply styles to them.
Selectors can be based on element names, classes, IDs, attributes, or their relationships within
the document structure.
4. Cascading: The "C" in CSS stands for cascading, which refers to the process of combining
multiple style sheets and resolving conflicts between different styles. CSS rules can be applied
from various sources, including external style sheets, internal style blocks, and inline styles, and
they cascade in a specific order of precedence.
5. Responsive Design: CSS plays a crucial role in creating responsive web designs that adapt to
different screen sizes and devices. Media queries in CSS allow developers to apply different
styles based on factors such as screen width, height, and orientation.
6. Animation and Effects: CSS enables the creation of animations and transitions without the need
for JavaScript. Developers can use CSS properties like transition, animation, and transform to
add movement and interactivity to web elements.
Overall, CSS is essential for creating visually appealing and user-friendly websites by controlling the
layout, typography, colors, and other visual aspects of web pages.
CSS (Cascading Style Sheets) properties define how HTML elements are displayed on a web page. These
properties control various aspects of an element's appearance, such as its size, color, font, positioning,
and more. Here are some common CSS properties categorized by their functionalities:
Box Model Properties:
1. width: Specifies the width of an element.
2. height: Specifies the height of an element.
3. padding: Specifies the space between the content and the border.
4. margin: Specifies the space outside the border of an element.
5. border: Sets the border properties of an element.
6. box-sizing: Determines how the width and height of an element are calculated.
Layout Properties:
1. display: Specifies the display behavior of an element.
2. position: Specifies the positioning method of an element.
3. float: Places an element to the left or right side of its container.
4. clear: Specifies the behavior of elements next to floated elements.
5. flex: Defines a flexible container and the layout of its children.
6. grid: Defines a grid container and the layout of its children.
Typography Properties:
1. font-family: Specifies the font family of text.
2. font-size: Sets the size of the font.
3. font-weight: Sets the boldness of the font.
4. font-style: Sets the style of the font (normal, italic, or oblique).
5. line-height: Sets the height of a line of text.
6. text-align: Specifies the alignment of text content.
7. text-decoration: Adds decorations such as underline or strikethrough to text.
8. color: Sets the color of text.
Background and Border Properties:
1. background-color: Sets the background color of an element.
2. background-image: Sets one or more background images for an element.
3. border-radius: Rounds the corners of an element's border.
4. background-position: Sets the initial position of a background image.
5. background-repeat: Specifies how a background image is repeated.
Animation and Transition Properties:
1. transition: Specifies the transition effects on an element.
2. animation: Defines animation keyframes and timing functions.
Miscellaneous Properties:
1. opacity: Sets the transparency level of an element.
2. z-index: Sets the stack order of positioned elements.
3. cursor: Specifies the type of cursor to be displayed when hovering over an element.
4. outline: Sets the outline properties of an element.
These are just a few examples of CSS properties. There are many more properties available, each serving
a specific purpose and allowing for fine-tuning of the appearance and behavior of web pages.
CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
Use our CSS Selector Tester to demonstrate the different selectors.
Selector Example Example description
.class .intro Selects all elements with class="intro"
.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with class="intro"
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects the first <p> element that is placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that is preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target="_blank"] Selects all elements with target="_blank"
[attribute~=value] [title~="flower"] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|="en"] Selects all elements with a lang attribute value equal to "en" or starting with "en-"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring
"w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:default input:default Selects the default <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the input element which has focus
:fullscreen :fullscreen Selects the element that is in full-screen mode
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:indeterminate input:indeterminate Selects input elements that are in an indeterminate state
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
::marker ::marker Selects the markers of list items
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the
last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting
from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
::placeholder input::placeholder Selects input elements with the "placeholder" attribute specified
:read-only input:read-only Selects input elements with the "readonly" attribute specified
:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor
name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links
