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.
What are style sheets used for?
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.
Why use CSS?
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 example below shows how to create a paragraph with a gray background and white text:<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
Result:
The style attribute can contain any CSS property.
Select the attribute that organizes the inline styling:
Embedded/Internal CSS
Internal styles are defined within the <style> element, inside the head section of an HTML page.
For example, the following code styles all paragraphs:<html>
<head>
<style>
p {
color:white;
background-color:gray;
}
</style>
</head>
<body>
<p>This is my first paragraph. </p>
<p>This is my second paragraph. </p>
</body>
</html>
All paragraphs have a white font and a gray background:
An internal style sheet may be used if one single page has a unique style.
Where should the style tag be declared to organize an internal CSS?
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.
Here is an example:
The HTML:<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph. </p>
<p>This is my third paragraph. </p>
</body>
The CSS:
Result:
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.
Fill in the blanks to call an external stylesheet called "test.css":
<____rel="stylesheet" href="test.css">
</head>
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.
For example, the headline color can be defined as:
Where:
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.
In the rule, the "selector":
Type Selectors
The most common and easy to understand selectors are type selectors. This selector targets element types on the page.
For example, to target all the paragraphs on the page:
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.
Rearrange the code to create a valid CSS style rule:
}
color: blue;
p {
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. Here is an example of an id selector:
The HTML:<div id="intro">
<p> This paragraph is in the intro section.</p>
</div>
<p> This paragraph is not in the intro section.</p>
The CSS:
To select an element with a specific id, use a hash character, and then follow it with the id of the element.
Result:
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.
In the example below, both paragraphs having the class "first" will be affected by the CSS:
The HTML:<div>
<p class="first">This is a paragraph</p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section</p>
<p> The second paragraph is not in the intro section. </p>
The CSS:
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!
Fill in the blanks to give yellow background color to the element with id="intro", and black text color to the class="mytext":
back ground-color: yellow;
}
color: black;
}
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.
For example, to target only <em> elements in the first paragraph of the "intro" section:
The HTML:<div id="intro">
<p class="first">This is a <em> paragraph.</em></p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section.</p>
<p> The second paragraph is not in the intro section. </p>
The CSS:
As a result, only the elements selected will be affected:
The descendant selector matches all elements that are descendants of a specified element.
Drag and drop from the options below to create a style rule for all paragraphs belonging to the element with id="test":
color: red;
}
.test
#test
p
#p
Comments
Comments are used to explain your code, and may help you when you edit the source code later. Comments are ignored by browsers.
A CSS comment look like this:/* Comment goes here */
Example:
The comment does not appear in the browser:
Comments can also span multiple lines.
Turn the text into a comment in CSS:
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.
Which three different sources are responsible for the styles you see on the web page?
Select all that apply
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.
For example:<html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>
This is a text inside the paragraph.
</p>
</body>
</html>
Result:
Since the paragraph tag (child element) is inside the body tag (parent element), it takes on any styles assigned to the body tag.
What color does the paragraph have?
<style>
body {color: green; }
.mydiv {color: red; }
</style>
<body>
<div class="mydiv">
<p>Some text</p>
</div>
</body>
<style>
body {color: green; }
.mydiv {color: red; }
</style>
<body>
<div class="mydiv">
<p>Some text</p>
</div>
</body>
From the three types of styling, which one is the most useful in terms of website optimization?
What is the "style", when creating an internal CSS?
The Style definition rule consists of selector, property and:
____________________________
Fill in the blank to apply white text color to the paragraph.
p {_____
#FFF;}
Posts
No comments:
Post a Comment