A rectangle box is wrapped around every HTML element. The box model is used to determine the height and width of the rectangular box. The CSS Box consists of Width and height (or in the absence of that, default values and the content inside), padding, borders, margin.
The main advantages of CSS are given below:
Disadvantages of CSS are given below:
There are different ways to include a CSS in a webpage,
1 - External Style Sheet: An external file linked to your HTML document: Using link tag, we can link the style sheet to the HTML page.
<link rel="stylesheet" type="text/css" href="mystyles.css" />
2 - Embed CSS with a style tag: A set of CSS styles included within your HTML page.
<style type="text/css">
/*Add style rules here*/
</style>
Add your CSS rules between the opening and closing style tags and write your CSS exactly the same way as you do in stand-alone stylesheet files.
3 - Add inline styles to HTML elements(CSS rules applied directly within an HTML tag.): Style can be added directly to the HTML element using a style tag.
<h2 style="color:red;background:black">Inline Style</h2>
4 - Import a stylesheet file (An external file imported into another CSS file): Another way to add CSS is by using the @import rule. This is to add a new CSS file within CSS itself.
@import "path/to/style.css";
A CSS selector is the part of a CSS ruleset that actually selects the content you want to style. Different types of selectors are listed below.
Universal Selector: The universal selector works like a wildcard character, selecting all elements on a page. In the given example, the provided styles will get applied to all the elements on the page.
* {
color: "green";
font-size: 20px;
line-height: 25px;
}
Element Type Selector: This selector matches one or more HTML elements of the same name. In the given example, the provided styles will get applied to all the ul elements on the page.
ul {
line-style: none;
border: solid 1px #ccc;
}
ID Selector: This selector matches any HTML element that has an ID attribute with the same value as that of the selector. In the given example, the provided styles will get applied to all the elements having ID as a container on the page.
#container {
width: 960px;
margin: 0 auto;
}
Class Selector: The class selector also matches all elements on the page that have their class attribute set to the same value as the class. In the given example, the provided styles will get applied to all the elements having ID as the box on the page.
.box {
padding: 10px;
margin: 10px;
width: 240px;
}
Descendant Combinator: The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method.
#container .box {
float: left;
padding-bottom: 15px;
}
This declaration block will apply to all elements that have a class of box that is inside an element with an ID of the container. It’s worth noting that the .box element doesn’t have to be an immediate child: there could be another element wrapping .box, and the styles would still apply.
Child Combinator: A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements.
#container> .box {
float: left;
padding-bottom: 15px;
}
The selector will match all elements that have a class of box and that are immediate children of the #container element. That means, unlike the descendant combinator, there can’t be another element wrapping .box it has to be a direct child element.
General Sibling Combinator: A selector that uses a general sibling combinator to match elements based on sibling relationships. The selected elements are beside each other in the HTML.
h2 ~ p {
margin-bottom: 20px;
}
TitleParagraph example.
Paragraph example.
Paragraph example.
Paragraph example.
In this example, all paragraph elements (
) will be styled with the specified rules, but only if they are siblings of
, and the styles would still apply.
Adjacent Sibling Combinator: A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.
p + p {
text-indent: 1.Sem;
margin-bottom: 0;
}
TitleParagraph example.
Paragraph example.
Paragraph example.
Paragraph example.
Paragraph example.
The above example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn’t have the styles applied.
Attribute Selector: The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets.
input [type=”text”] {
background-color: #444;
width: 200px;
}
The ruleset is used for the identification of selectors, which can be attached with other selectors. The two parts of a ruleset are:
The CSS box model defines the layout and design of CSS elements. The elements are content (like text and images, padding (the area around content), border (the area around padding), and margin (the area around the border).
The main difference between CSS3 and CSS2 is that CSS divides different sections into modules and supports many browsers. It also contains new General Sibling Combinators responsible for matching similar elements
There are three ways of integrating CSS into HTML: using style tags in the head section, using inline-styling, writing CSS in a separate file, and linking into the HTML page by the link tag.
With CSS, different documents can be controlled using a single site, styles can be grouped in complex situations using selectors and grouping methods, and multiple HTML elements can have classes.