I was just wondering how to view p.intro::first-letter in the following code. Does this mean that only in a p element can the intro class be used?
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>
Yes
The selector p.intro::first-letter means "Style the ::first-letter of a <p> element with the class intro.
When there is no space between the selectors p, .intro, ::first-letter (these are called selectors) it is like an "AND" statement
div.RedText means div element AND RedText class
It's worth reading up on the different types of selectors, W3Schools has a really good interactive example too!
Here's a little more:
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
div {
color: #0000ff;
}
div.RedText {
color: #ff0000;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
<div>This text is blue</div>
<div class="RedText">This text is red!</div>
</body>
</html>
Related
I am using Chrome DevTools to audit my website. In one of the web pages, it said "Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more.". I try to click "Learn More" and go to this article https://developers.google.com/web/tools/lighthouse/audits/blocking-resources , which said for javascript, one can use defer/async, for css, one can define the media type.
But what if my css is not critical, but it is required for all media types. Then how to defer such a css?
Thanks
You can place your critical css in the head of your page, it will load before the body part, because css stylesheets are blocking.
And, you can put your non critical css at the end of the body, it will load after all the elements of the DOM.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/critical.css">
</head>
<body>
...
<link rel="stylesheet" href="/nonCritical.css">
</body> ...
add critical css to the head section .. like plain css..
defer all other styles ...
you may read more from here https://web.dev/defer-non-critical-css/ and look at the example below ..
PS: the best approach from my point of view: is to create some global styles and preload them .. create separate stylesheets for every page/component and insert them into the component itself to be loaded when the component is loaded.
that also depends heavily on the way/tool you are using to build the project ..
<!-- Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0 -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.accordion-btn {
width: 100%;
text-align: center;
font-size: 18px;
cursor: pointer;
color: #444;
background-color: #ADD8E6;
padding: 19px;
outline: none;
border: none;
border-radius: 2px;
}
.container {
display: none;
padding: 0 18px;
background-color: white;
overflow: hidden;
}
h1 {
word-spacing: 5px;
color: blue;
font-weight: bold;
text-align: center;
}
</style>
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="style.css">
</noscript>
</head>
<body>
<h1>Critical CSS Demo - Optimized</h1>
<h3>On this demo, the "critical" styles are inlined, while the non-critical ones, are deferred.</h3>
<button class="accordion-btn">Click to see a paragraph styled with set of styles #1.</button>
<div class="container">
<p class="paragraph1">This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text. This is an example of a paragraph that uses <strong>line breaks</strong> for text.</p>
</div>
<button class="accordion-btn">Click to see a paragraph styled with set of styles #2.</button>
<div class="container">
<p class="paragraph2">This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text. This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text. This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text. This is an example of a paragraph that uses <strong>elipsis</strong> for the overflow text.</p>
</div>
<button class="accordion-btn">Click to see a paragraph styled with set of styles #3.</button>
<div class="container">
<p class="paragraph3">This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>. This is an example of a paragraph that <strong>trims text</strong>.</p>
</div>
<script>
var accordionBtn = document.getElementsByClassName("accordion-btn");
for (let i = 0; i < accordionBtn.length; i++) {
accordionBtn[i].addEventListener("click", function() {
var container = this.nextElementSibling;
if (container.style.display === "block") {
container.style.display = "none";
} else {
container.style.display = "block";
}
});
}
</script>
</body>
</html>
I have a HTML of
<span> Day Month </span>
and for CSS I want to target Day seperately and Month seperately (apply different styles to them) without changing the HTML.
How can I do it?
Yeah its possible. You can follow this method.
Here font-word is not posible, that have no option in css. But we use content css property
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: orange;
}
span:before
{
color: red;
content: "Day";
position: absolute;
}
</style>
</head>
<body>
<span>Day Month </span>
</body>
</html>
Updated: Here the fiddle Demo
Is it possible to inline a class definition of CSS inside an xhtml file?
I mean, to put someting like:
p.first{ color: blue; }
p.second{ color: red; }
Inside my page, not in a separate CSS file.
I think you're trying to put your CSS in the HTML page, not inline.
You can put CSS in an HTML page (usually in the head) by surrounding it in style tags:
<style type="text/css">
p.first{ color: blue; }
p.second{ color: red; }
</style>
Sure, here's an example. However, it is best practice to keep your styles in a separate css file.
<html>
<head>
<title>Classes</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<style type="text/css">
img {
padding:10px;
margin:5px;
border:1px solid #d5d5d5;
}
div.thumb {
float:left;
}
div.caption {
padding-left:5px;
font-size:10px;
}
</style>
</head>
<body>
<div>your page code etc..</div>
</body>
</html>
You can also put css inside the p tag.
<html>
<body>
<p class="first" style="color:blue;"></p>
<p class="second" style="color:red;"></p>
</body>
</html>
The nice thing about CSS is it works in any file not just an HTML,XML file. You just need to define the syle block like this anywhere in the page
<style type="text/css">
<all my styles goes here>
</style>
In HTML and HTML/XHTML, the standard is, you will put this block in the head section. If it is other type of file for example .aspx, or .php, the block still works, even it is not in head block.
Example
<?php
/* mytest.php file */
<style>
<my styles>
</style>
?>
the same is true for ASPX file.
You can also define inline CSS which means CSS goes right in the element tag. The syntax is
<p style="<all my styles>"> My paragraph contain inline CSS</p>
Yes, you can insert CSS styles in the HTML file. For example:
<p>...</p>
<style type="text/css">
p.first { ... }
</style>
<div>...</div>
As you'll find in the literature, it's not considered a good practice though.
I'm confused with the way CSS is cascading, I thought if you did something like
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.small p {
color: red;
font-size: 10px;
}
.big p {
color: green;
font-size: 50px;
}
.blue p {
color: blue;
}
</style>
<title>Insert title here</title>
</head>
<body>
<div class="small">
<p>Small</p>
<div class="big">
<p>Big</p>
<div class="small">
<div class="blue">
<p>Blue inside Small</p>
</div>
</div>
</div>
</div>
</body>
</html>
My problem is with the "Blue inside Small" , I thought this will be small text as it has an upper class with "small" class. How can I achieve that.
Please don't tell me to change any thing because I'm building a complex template system that you can have containers(divs) inside containers(divs) and I want the bottom-up style to apply !
You specified .big p's rule after .small p's rule in your CSS, so the font size will be 50 pixels, not 10, because both selectors are of equal specificity.
CSS cascades its equally-specific selectors top-down (for both CSS rules and the DOM). You can't change that unless you do any of these:
Make one or more selectors more specific
Use !important
Modify your HTML
I know you said not to suggest any changes, but I'll do it anyway for the benefit of others — the simplest to make to achieve what you want would be to use the child combinator > in the second selector (as suggested by a now-deleted answer):
.big > p {
color: green;
font-size: 50px;
}
How to give same style to first 2 paragraphs differently in css.
<html>
<head>
<style type="text/css" media="screen">
p+p {color:red}
</style>
</head>
<body>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<p>fourth paragraph</p>
</body>
</html>
I've tried this but it's leaving first paragraph and styling all other.
and this only style first paragraph not others
<html>
<head>
<style type="text/css" media="screen">
p:first-child { color: blue; }
</style>
</head>
<body>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<p>fourth paragraph</p>
</body>
</html>
remember I want to give same style on first 2 paragraph.
Go here, and try this code out :)
http://www.w3schools.com/css/tryit.asp?filename=trycss_first-child1
p:first-child
{
color:blue;
}
p:first-child + p
{
color: red;
}
It depends on what browsers you want to be compatible with. The latest versions of Firefox, Safari, Chrome, and Opera all support the nth-of-type pseudo-element, but IE does not yet (it is a CSS 3 feature, which IE does not support much of). If you can limit yourself to these browsers, the following should work, otherwise, you'll need to use one of the solutions from one of the other answers.
p:nth-of-type(1), p:nth-of-type(2) { color: red }
first of all, ID's need to be unique on a page. You can't use id="hello" twice. You need to use class for that. Try:
<html>
<head>
<style type="text/css" media="screen">
.hello { color: blue; }
</style>
</head>
<body>
<p class="hello">first paragraph</p>
<p class="hello">second paragraph</p>
<p>third paragraph</p>
</body>
</html>