The document explains different CSS selectors and how to apply styles in CSS. It covers using external and internal CSS, inline styles, and different types of selectors like class, ID, element, and descendant selectors. It also discusses separating HTML and CSS code and the specificity of selectors.
The document explains different CSS selectors and how to apply styles in CSS. It covers using external and internal CSS, inline styles, and different types of selectors like class, ID, element, and descendant selectors. It also discusses separating HTML and CSS code and the specificity of selectors.
Original Description:
The Crash Course on CSS for any one even complete Beginners a simplest guide to go on in CSS.
The document explains different CSS selectors and how to apply styles in CSS. It covers using external and internal CSS, inline styles, and different types of selectors like class, ID, element, and descendant selectors. It also discusses separating HTML and CSS code and the specificity of selectors.
The document explains different CSS selectors and how to apply styles in CSS. It covers using external and internal CSS, inline styles, and different types of selectors like class, ID, element, and descendant selectors. It also discusses separating HTML and CSS code and the specificity of selectors.
The <link> element is used to link HTML documents to <!-- How to link an external stylesheet external resources like CSS �les. It commonly uses: with href, rel, and type attributes --> • href attribute to specify the URL to the external resource • rel attribute to specify the relationship of the <link href="./path/to/stylesheet linked document to the current document /style.css" rel="stylesheet" • type attribute to de�ne the type of content type="text/css"> being linked
Purpose of CSS CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can de�ne styles and change the layout and design of a sheet.
Write CSS in Separate Files
CSS code can be written in its own �les to keep it <head> separate from the HTML code. The extension for CSS �les <link href="style.css" type="text/css" is .css. These can be linked to an HTML �le using a <link> tag in the <head> section. rel="stylesheet"> </head>
Write CSS in HTML File
CSS code can be written in an HTML �le by enclosing the <head> code in <style> tags. Code surrounded by <style> <style> tags will be interpreted as CSS syntax. h1 { color: blue; } </style> </head>
1 of 4 8/19/23, 10:15 Firefox about:srcdoc
Inline Styles CSS styles can be directly added to HTML elements by <h2 style="text-align: center;">Centered using the style attribute in the element’s opening tag. text</h2> Each style declaration is ended with a semicolon. Styles added in this manner are known as inline styles. <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>
Separating HTML code from CSS code
It is common practice to separate content code in HTML �les from styling code in CSS �les. This can help make the code easier to maintain, by keeping the syntax for each �le separate, and any changes to the content or styling can be made in their respective �les.
Class and ID Selectors
CSS classes can be reusable and applied to many /* Selects all elements with elements. Class selectors are denoted with a period . class="column" */ followed by the class name. CSS ID selectors should be unique and used to style only a single element. ID .column { selectors are denoted with a hash sign # followed by the } id name.
/* Selects element with id="first-item" */
#first-item { }
Groups of CSS Selectors
Match multiple selectors to the same CSS rule, using a h1, h2 { comma-separated list. In this example, the text for both color: red; h1 and h2 is set to red. }
Selector Chaining CSS selectors de�ne the set of elements to which a CSS rule set applies. For instance, to select all <p> elements, the p selector can be used to create style rules.
2 of 4 8/19/23, 10:15 Firefox about:srcdoc
Chaining Selectors CSS selectors can be chained so that rule sets apply only /* Select h3 elements with the section- to elements that match all criteria. For instance, to select heading class */ <h3> elements that also have the section-heading class, the selector h3.section-heading can be used. h3.section-heading { color: blue; }
/* Select elements with the section-
heading and button class */ .section-heading.button { cursor: pointer; }
CSS Type Selectors
CSS type selectors are used to match all elements of a /* Selects all <p> tags */ given type or tag name. Unlike for HTML syntax, we do not p { include the angle brackets when using type selectors for tag names. When using type selectors, elements are } matched regardless of their nesting level in the HTML.
CSS class selectors
The CSS class selector matches elements based on the .calendar-cell { contents of their class attribute. For selecting color: #fff; elements having calendar-cell as the value of the } class attribute, a . needs to be prepended.
HTML attributes with multiple values
Some HTML attributes can have multiple attribute values. <div class="value1 value2 value3"></div> Multiple attribute values are separated by a space between each attribute.
3 of 4 8/19/23, 10:15 Firefox about:srcdoc
Selector Speci�city Speci�city is a ranking system that is used when there are h1#header { multiple con�icting property values that point to the color: blue; same element. When determining which rule to apply, the selector with the highest speci�city wins out. The most } /* implemented */ speci�c selector type is the ID selector, followed by class selectors, followed by type selectors. In this example, only h1 { color: blue will be implemented as it has an ID selector whereas color: red has a type selector. color: red; } /* Not implemented */
CSS ID selectors The CSS ID selector matches elements based on the #job-title { contents of their id attribute. The values of id font-weight: bold; attribute should be unique in the entire DOM. For selecting the element having job-title as the value of } the id attribute, a # needs to be prepended.
CSS descendant selector
The CSS descendant selector combinator is used to div p { } match elements that are descended from another matched selector. They are denoted by a single space between each selector and the descended selector. All section ol li { } matching elements are selected regardless of the nesting level in the HTML.
