I want to change the style of my text that I am embedding with the following markup
<iframe src="URL">
My web page has a limited amount of characters that can be used up very fast with coding in CSS and HTML. The code I'm using the iframe to embed is this:
<style type="text/css">
body {
color: black;
}
h1 {
color: #FFFFFF;
}
h2 {
color: rgb(255,255,255);
}
</style>
<h1>Hello World!</h1>
But when I'm using the following to embed it:
<iframe src="THE RAW URL of the code above" frameBorder="0">
...the whole code is showing, not just the Hello World! in #FFFFFF.
What am I doing wrong here? I would embed just the Hello World! but I know that the CSS on the parent page will not change the style of the source I'm putting in the iframe.
Since the iframe is for embedding HTML documents, you should try using a fully valid HTML as your external file. Something like this:
<!DOCTYPE html>
<html>
<head>
<title>iframe example</title>
</head>
<body>
<style type="text/css">
body {
color: black;
}
h1 {
color: #FFFFFF;
}
h2 {
color: rgb(255,255,255);
}
</style>
<h1>Hello World!</h1>
</body>
</html>
Related
I'm trying to use a Jupyter notebook to teach HTML and CSS. I can create an HTML block in a Jupyter notebook with %%html. However, when I try to include a SOME CSS tag the CSS doesn't take effect. (I can use embedded CSS).
EXAMPLE that works
The following works and the content is displayed as an h1 and the color is blue:
%%html
<h1 style="color=blue;">Hello</h1>
EXAMPLE that does NOT work
The following does NOT work.
The content IS displayed as an h1 BUT the color is NOT blue:
%%html
<style>
h1: { background-color: yellow; }
</style>
<h1>hello</h1>
Other things that I've tried
None of the following work either:
I tried using type="text/css"
%%html
<style type="text/css">
h1: { background-color: yellow; }
</style>
<h1>hello</h1>
I tried using the --isolated option
%%html --isolated
<style type="text/css">
h1: { background-color: yellow; }
</style>
<h1>hello</h1>
I tried using an entire HTML document.
%%html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1: { color: blue; }
</style>
</head>
<body>
<h1>hello</h1>
</body>
</html>
I tried using the IPython HTML function - the CSS in the tag doesn't get rendered.
from IPython.core.display import HTML
HTML("""
<style>h1: { color: blue; }
</style>
<h1>hello</h1>
""")
To sum up:
Is there any way I can use a Jupyter notebook to teach CSS ?
you have a typo in your css,
you have add : after h1
h1 : { ... }
%%html
<style>
h1 { background-color: yellow; }
</style>
<h1>hello</h1>
I am trying to display an image on a mock webpage I'm building as a background image. When I try using the css background-image and url it will not load. I am trying to put the image as a background image on the header section under the header class, but it just won't load. Whne I hover over the path in brackets it brings up a thumbnail of the image, so I know it can access it.
I have tried everything - moving the file, renaming the file, checked my paths are correct, using and removing quote marks, backslashes, forward slashes, checking my css path is correct in my head section, checking the file extension. When I click on the file name in the console 'sources' section and select open in new window it brings the image up in a new window just fine, but Chrome or any other browser won't seem to load the file for some reason?!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(resources/img/table_window.jpg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>
The file loads and displays just fine if I put it into the HTML using an img tag, but won't display from css.
You just need to specify a height for your header - as it was just defaulting to 0 pixels high :-)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(https://picsum.photos/200/300);
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>
I'm starting to learn Sass and started to check some nesting examples. This is the first one I tried and it's not working:
body {background:#eee;}
.blog .entry {
p{
color:#ff0;
}
}
This is my markup:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.scss">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body class="blog">
<div class="entry">
<h1>My blog post</h1>
<p class="blue">Text <a>link</a></p>
</div><!-- .entry -->
</body>
</html>
The background of the body does change to #eee, but the paragraph stays the same (unless I un-nest it to just p{} ).
First you cannot link an SCSS file just like CSS, you have to compile it to CSS then link the compiled file.
In order to nest properly in SCSS you can do the following:
.blog {
.entry {
p{
color:#ff0;
}
}
}
Your markup and Sass work as you can see here: https://jsfiddle.net/6pa0r48g/
Please check the compiled CSS directly if you are overloading your css rule by another one (i. e. by formatting .blue).
Also this would be more readable:
body {
background: #eee;
}
.blog {
.entry {
p {
color: #ff0;
}
}
}
I would recommend to not go any deeper with your nesting in Sass.
I am creating this simple html page... everything seems to work fine. But when I came to link my css to my html. Nothing happens and I made sure I save everything, nothing happens to my webpage. Can you check my code below and see if there is any problems thanks.
HTML:
<html>
<head>
<title>What if?</title>
<meta http-equiv="What if" content="text/html; charset=uft-8"/>
<img src="images/Logo.jpg" height="300" width="400"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header>
<h1>What if</h1>
</header>
</body>
</html>
My CSS:
body {
font-family : Verdana, Arial, sans-serif;
font-size : medium;
}
h1 {
<center></center>
background-color: #CCCCCC;
color: #000000;
}
Also Don't use <img> tag into <head> section. <img> tag should be in <body> section.
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.