CSS
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (HyperText Markup Language). CSS separates the presentation style of a web page from its content, allowing for more flexibility and control over the appearance of a website.
CSS enables web developers to control the layout, fonts, colors, backgrounds, and other visual elements of a web page. With CSS, a developer can define styles for specific elements on a page or for the entire document. This allows for a consistent look and feel across an entire website.
CSS also supports media queries, which allows developers to create styles for different screen sizes and devices. This makes it possible to create responsive designs that adapt to different devices, from desktop computers to smartphones and tablets.
Here are some important things to know about CSS:
1.Syntax :
CSS uses a set of rules to apply styles to HTML elements. Each rule consists of a selector, followed by a set of properties and values enclosed in curly braces. For example:
p {
font-size: 16px;
color: #333;
}
In this example, the selector is “p”, which targets all paragraph elements. The properties are “font-size” and “color”, and the values are “16px” and “#333”, respectively.
2. Selector :
Selectors are one of the fundamental building blocks of CSS. They allow you to target specific elements in your HTML document and apply styles to them. Here’s a more detailed explanation of the different types of selectors in CSS:
1. Element selector:
An element selector targets all instances of a specific HTML element. It is represented by the element's tag name. For example, to target all paragraphs in a document, you would use the "p" selector:
p {
color: blue;
}
2. Class selector:
A class selector targets all elements with a specific class attribute value. It is represented by a period followed by the class name. For example, to target all elements with the class "my-class", you would use the ".my-class" selector:
.my-class {
color: red;
}
3. ID selector :
An ID selector targets a single element with a specific ID attribute value. It is represented by a hash symbol followed by the ID name. For example, to target the element with the ID "my-id", you would use the "#my-id" selector:
.my-id {
color: green;
}
4. Attribute selector :
Attribute selectors target elements with a specific attribute on the page. The attribute is specified in square brackets. For example, [type="text"] will target all elements with a type attribute of "text".
[type=”button”] {
border: 2px solid black;
}
5. Descendant selector :
Descendant selectors target elements that are descendants of another element on the page. They are separated by a space. For example, div p will target all p elements that are descendants of div elements.
div p {
font-style : italic ;
}
6. Child Selector :
Child selectors target elements that are direct children of another element on the page. They are separated by a greater than sign. For example, div > p will target all p elements that are direct children of div elements.
div > p {
font-size : 20px ;
}
7. Pseudo-class Selector:
Pseudo-class selectors target elements based on a certain state or condition on the page. They are preceded by a colon. For example, :hover will target an element when it is being hovered over.
a: hover {
text-decoration : underline;
}
Selectors can also be combined in various ways to create more specific targeting. For example, .my-class p will target all p elements that are descendants of elements with a class of “my-class”.
Properties of css :
Properties in CSS are used to control the appearance and layout of HTML elements. Each property is used to set a specific aspect of an element’s style, such as its color, size, font family, background, and position. CSS properties are always applied in combination with a selector, which specifies the HTML elements that should be affected by the styling.Click here to learn more