CSS - abc The Basics

Turn the text into a comment in CSS:

/* This is a comment */

In the rule, the "selector":

selects which element to style

Select the attribute that organizes the inline styling:

style

What is the "style", when creating an internal CSS?

tag

What are style sheets used for?

to control the look and feel of web documents

The Style definition rule consists of selector, property and:

value

Drag and drop from the options below to create a style rule for all paragraphs belonging to the element with id="test":

#text p{ color: red; }

Why Use CSS?

CSS allows you to apply specific styles to specific HTML elements. The main benefit of CSS is that it allows you to separate style from content. Using just HTML, all the styles and formatting are in the same place, which becomes rather difficult to maintain as the page grows. All formatting can (and should) be removed from the HTML document and stored in a separate CSS file.

CSS Syntax

CSS is composed of style rules that the browser interprets and then applies to the corresponding elements in your document. A style rule has three parts: selector, property, and value. The selector points to the HTML element you want to style. The declaration block contains one or more declarations, separated by semicolons. Each declaration includes a property name and a value, separated by a colon.

Welcome to CSS!

CSS stands for Cascading Style Sheets. - Cascading refers to the way CSS applies one style on top of another. - Style Sheets control the look and feel of web documents. CSS and HTML work hand in hand: - HTML sorts out the page structure. - CSS defines how HTML elements are displayed. To understand CSS, you should already have a basic knowledge of HTML. If you want to study HTML, check out the free SoloLearn Learn HTML app.

Comments

Comments are used to explain your code, and may help you when you edit the source code later. Comments are ignored by browsers. Comments can also span multiple lines.

From the three types of styling, which one is the most useful in terms of website optimization?

External

Inheritance

Inheritance refers to the way properties flow through the page. A child element will usually take on the characteristics of the parent element unless otherwise defined. Since the paragraph tag (child element) is inside the body tag (parent element), it takes on any styles assigned to the body tag.

Embedded/Internal CSS

Internal styles are defined within the <style> element, inside the head section of an HTML page. An internal style sheet may be used if one single page has a unique style.

Cascade

The final appearance of a web page is a result of different styling rules. The three main sources of style information that form a cascade are: - The stylesheet created by the author of the page - The browser's default styles - Styles specified by the user CSS is an acronym for Cascading Style Sheets.

Type Selectors

The most common and easy to understand selectors are type selectors. This selector targets element types on the page. A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.

Descendant Selectors

These selectors are used to select elements that are descendants of another element. When selecting levels, you can select as many levels deep as you need to. The descendant selector matches all elements that are descendants of a specified element.

Inline CSS

Using an inline style is one of the ways to insert a style sheet. With an inline style, a unique style is applied to a single element. In order to use an inline style, add the style attribute to the relevant tag. The style attribute can contain any CSS property.

External CSS

With this method, all styling rules are contained in a single text file, which is saved with the .css extension. This CSS file is then referenced in the HTML using the <link> tag. The <link> element goes inside the head section. Both relative and absolute paths can be used to define the href for the CSS file. In our example, the path is relative, as the CSS file is in the same directory as the HTML file.

Where should the style tag be declared to organize an internal CSS?

head

id and class Selectors

id selectors allow you to style an HTML element that has an id attribute, regardless of their position in the document tree. To select an element with a specific id, use a hash character, and then follow it with the id of the element. Class selectors work in a similar way. The major difference is that IDs can only be applied once per page, while classes can be used as many times on a page as needed. To select elements with a specific class, use a period character, followed by the name of the class. Do NOT start a class or id name with a number!

Why use CSS?

it allows for the separation of style and content

Fill in the blank to apply white text color to the paragraph.

p {color: #FFF;}