EDITED: I am showing the whole code instead
I know this is probably a really simple question, but I am somewhat new at HTML5 and CSS coding. The problem I am encountering is that I have one line of text I wish to edit individually from the other paragraphs, so I am using a Div ID. The problem is, CSS is linked right to text, but when I add CSS to the div, it won't edit. It's all on a separate sheet, and CSS works for everything else besides the Div. Here is the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<title>Codetopia - Learn to Code</title>
<link href="externalfile:drive-be6fc3227f0f52098e01c434b3f53296322df648/root/Coding/main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lemonada" rel="stylesheet">
</head>
<body>
<h1><i>CODETOPIA</i></h1>
<h1>Learn to Code the <i>Fun</i> Way</h1>
<img src="http://www.rouzell.net/wp-content/uploads/2016/01/html_css.png" alt="HTML 5 and CSS3 Image"/>
<p>Explore the world of code through this interective course for ages 7-12.</p>
<p></p>
<h2>Why Codetopia?</h2>
<p>Codetopia presents a playful, fun, academic atmosphere for young children to discover. <br /> Here are some of the benefits:</p>
<ul>
<li><b><i>100% free</b></i> for everyone at any age</li>
<li>Learn through an interactive storyline</li>
<li>Simple to follow steps</li>
<li>Color-coded text</li>
</ul>
<img src="https://edsurge.imgix.net/uploads/post/image/7747/Kids_coding-1456433921.jpg" alt="Coding for Kids"/>
<!--<img src="http://codeteachers.com/wp-content/uploads/2016/03/kids-coding.png
" alt="Coding for Kids"/> is optional image-->
<h2>How it works</h2>
<p>The teaching process is extremely unique and flexible. Children start with being introduced to a fictional story, that they can read. Throughout the story, certain issues or missions will be needed where the child then will be taught the basis of coding to help the characters. <br /> Here is more in detail:</p>
<ol>
<li>Follow Lee and Madison's numerous interactive adventures</li>
<li>Learn and develop basic coding skills to help the twins throughout the story</li>
<li>Put your skills to the test to complete each mission and story</li>
<div id="join">
<p><b>Join the Codetopia Adventure today!</b></p>
</div>
<!-- Pic of the twins here? Make sure to resize it -->
</ol>
</body>
</html>
* {
font-family: Georgia,Times,serif;
background-color: White;
}
h1 {
text-decoration: none;
font-size: 42px;
color: rgba(46,139,87,0.9);
font-family:'Lemonada',cursive;
line-height: 1em;
}
h2 {
text-decoration: none;
font-size: 24px;
background-color: SeaGreen;
color: White;
margin-right: 1100px;
font-style:italic;
text-align:center;
font-family:'Lemonada',cursive;
}
p, li {
font-size: 18px;
line-height: 1.5em;
}
li {
color: rgb(37,232,98);
#join p {
color: SeaGreen;
}
#join p b {
color: SeaGreen!important;
}
as you can see in the doc you are giving color to that DIV not giving color to the child p or b tag of parent div which is based on identifier so how you can gave separate color to text based on ID:
#join p {
color: SeaGreen;
}
<div id="join">
<p><b>Join the Codetopia Adventure today!</b></p>
</div>
if you want your child elements to herit their parents attributes, use !important.
b, p
{
color: inherit !important;
}
To expand on these answers, the reason why you need to specify #join p is that CSS rules "cascade" by specificity. I assume you have another style rule for p which is considered more specific.
Another option would be to change your p color rule to a body color rule.
you must assign the code to "p" such as this:
#join p{
color: red !important;
}
in your css you missing one "}" before #join, and the second problem is that SeaGreen is not acceptable, so i change it to red.
Related
Let's say I have links looking like buttons all over my app. They are orange, unless they are "disabled" (having no href):
a.button {
background-color: orange;
}
a.button:not([href]) {
background-color: grey;
}
Now, I'm not sure how to allow certain buttons look different in their context, but keep the disabled ones as they were. Let's say I need the "buttons" inside my <footer> to be green, or - as usual - grey if disabled:
footer a.button {
background-color: green;
}
The problem is that this rule has higher priority, as it's more specific. How can I allow disabled buttons in the footer to still be grey without repeating my code? I know I can use !important, but please assume that my real-life example is more complex and I want to avoid using it.
Use CSS variables. You define the default value and you simply set the variable to define a new one.
a.button {
background-color: var(--main, orange);
}
a.button:not([href]) {
background-color: var(--disable, grey);
}
footer#foo a.button { /*I am adding an ID to make it really more specific*/
--main: green;
}
<a class="button">a link</a>
a link
<footer id="foo">
<a class="button">a link</a>
a link
</footer>
Check out http://qnimate.com/dive-into-css-specificity/ to see a full list of CSS specificity.
Assuming you have more than one a.button in your footer, we'll skip using a plain id selector. You could pair an id and attribute selector, using the title attribute to identify all disabled "buttons":
index.html
<a class="button">a link</a>
a link
<footer id="foo">
<a class="button" title="disabled">a link</a>
a link
</footer>
and styles.css
#foo a[title="disabled"] {
color: green;
}
I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,
Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?
What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?
Thanks
CSS
.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;
The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:
<body class="home">
<div class="top_container">
<!-- Do something -->
</div>
</body>
--or--
<body class="about">
<div class="top_container">
<!-- Do something -->
</div>
</body>
now you can use css like:
.home .top_container{}
.about .top_container{}
Let's assume this is your Home page
<div id="home">
<div class="top_container">
//stuff
</div>
</div>
And this is your about page:
<div id="about">
<div class="top_container top_container_about">
//stuff
</div>
</div>
Now, in your CSS file, add the style for the 'top_container' class like so:
.top_container {
//css styles common to the top_container element
}
And then write the style that's unique to the top_container in the about section:
.top_container_about {
//css style unique to the about section
}
This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.
Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:
.top_container {
background: #000;
color: #fff;
width: 200px;
height: 50px;
padding: 10px;
}
.top_container.top_container--narrow {
width: 100px;
}
<div class="top_container">
Default
</div>
<div class="top_container top_container--narrow">
Narrow
</div>
I add the page name to the body class, and make changes like that using CSS like
.style {
margin: 0;
}
.home .style {
margin: 10px;
}
From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:
CSS
.top-container{
width: 100%;
}
.top-container.about{
width:60%
}
.top-container.contact{
width:30%
}
HTML
home.html
<div class="top-container"></div>
about.html
<div class="top-container about"></div>
contact.html
<div class="top-container contact"></div>
The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.
If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.
I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.
Homepage: header background color is blue.
<header class="top_container" id="home_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
About page: header background color is red
<header class="top_container" id="about_header">
<!--YOUR WEBSITE HEADER-->
<h1>TITLE</h1>
</header>
<div>
<!--YOUR SITE CONTENT-->
</div>
CSS file:
.top_container{
background-color: blue;
color: white;
}
#about_header{
background-color: red;
}
I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:
.top-container {
/* apply all styles for .top-container */
}
.home.top-container {
/* this .top-container will have all styles from .top-container defined above */
/* so only define all DIFFERENT things for .home.top-container here */
}
.about.top-container {
/* define all DIFFERENT things for .about.top-container here */
/* like before it will always have the .top-container styles */
}
I am converting a docx to html format (using apache poi) and sending it as email.
A snippet of generated html looks something like this
<html>
<head>
....
<style>
span.Normal{
font-family: 'Arial';font-size: 9.0pt;
}
span.Title{
font-family: 'Cambria';font-size: 28.0pt;color: #000000;
}
span.MySubtitle{
font-family: 'Arial';font-size: 18.0pt;color: #000000;
}
span.MyTitle{
font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000;
}
...
</style>
</head>
<body>
....
<p class="Normal Title MyTitle">
<span id="_GoBack">
<span class="Normal Title MyTitle">Welcome Message</span>
<span class="Normal Title MyTitle"> </span>
<span class="Normal Title MyTitle">Username</span>
</p>
<p class="Normal Title MySubtitle">
<span class="Normal Title MySubtitle">Issues and Solutions</span>
</p>
...
</body>
</html>
The multiple css classes are not recognized by Outlook client. It is only rendering the first css class "Normal" and ignoring the rest. But my original formatting (in docx) is present in "MyTitle" & "MySubTitle" classes.
Does Outlook support multiple css? Is there a way I can control multiple css generation.
I've just discovered this problem myself.
It seems that Outlook is only taking the first class listed in the class attribute, ignoring everything else.
Stylesheet:
<!--[if gte mso 9]>
<style type="text/css">
.red {
color: red;
}
.large {
font-size: 72px;
}
</style>
<![endif]-->
Markup:
<div class="red">
THIS SHOULD BE RED IN OUTLOOK
</div>
<div class="large">
THIS SHOULD BE LARGE IN OUTLOOK
</div>
<div class="red large">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
<div class="large red">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
Result:
As far as I see, all versions of Outlook are affected. Including the newer ones.
I've filed a bug report to hteumeuleu/email-bugs documenting this quirk:
https://github.com/hteumeuleu/email-bugs/issues/117
As said previously you should first check your html to make it cleaner. Emails are tough to get right and perfect in every single mail client/server out there. So if you want to get things right, have a look at all the free and responsive templates available anywhere on the web.
The classic yet efficient solution for mail is rely in the table tag.
You can find a good example here
Also, when it comes to display on different mail clients, Outlook is one of the most difficult. There are tools like Litmus that allows you to preview the result of your email but it's quite expensive. Fortunatly they also propose free responsive templates that you can use for inspiration.
Don't hesitate to post an improved version of your email so we can look at it and help you more efficiently.
Okay, there's a lot going wrong here. First and foremost, the html isn't really correct at all. You have paragraphs nested in paragraphs, and you're using spans to define headings, and splitting each word into it's own span.
I don't know what those three dots at the beginning and end are for, but they shouldn't be in the style tags.
Your class names aren't really descriptive, they're repeating rules, you have every class applied to every element, and they're out of order in the style sheet, making it confusing to understand what's going on.
My suggestions are to:
Use semantic markup
Discard classes and use semantic selectors
Use the DRY principle (don't repeat yourself)
list rules with a logical order, such as starting from the largest and ending at the smallest.
Here's some refactored code using your styling rules and demonstrating how to use each element.
<html>
<head>
<style>
body {
color: #000000;
}
h1,
h2,
p {
font-family: 'Arial';
}
h3 {
font-family: 'Cambria';
}
h1 {
font-size: 28pt;
}
h2 {
font-size: 22pt;
}
h3 {
font-size: 18pt;
}
p {
font-size: 9pt;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<p>
This is paragraph text.
</p>
</body>
</html>
Okay, so I'm trying to do my homework for school, and I'm finally starting to work on CSS.
My issue is that the code I enter, for id #articleheader does not apply, and the only reason I can think of is that there are four rules present before I close the line.
#articleheader {
font-size: 18px;
font-weight: normal;
letter-spacing: 7px;
text-align: center;
}
<header id="articleheader">
<h1>Bike the Mountains Tour</h1>
</header>
Any help?
The h1 has its own styles for size and weight, even by default if you don't set them specifically. To set them for the h1:
#articleheader h1 {
...
Everything seems fine in terms of what you are trying to do and when your code is dropped into a html document. If the solution offered by Matt still isn't working I suggest you need to check that you have the css file linked to properly if an external stylesheet or it's onpage make sure you have it wrapped around tags properly.
<html>
<head>
<style>
#articleheader {
font-size: 18px;
font-weight: normal;
letter-spacing: 7px;
text-align: center;
}
</style>
</head>
<body
<header id="articleheader">
<h1>Bike the Mountains Tour</h1>
</header>
</body>
</html>
enter code hereYou should apply the id="articleheader" tag with h1,not with header.
Although,there is nothing wrong with using id tag in header, the results will not be as expected. i.e. the properties would be applied,but at a different scale.
This is the result when id is applied on h1
This is the result when id is applied on header
<header>
<h1 id="articleheader">Bike the Mountains Tour</h1>
</header>
There is nothing wrong with the css code
The precedence of id tag being applied on h1 is proved when same id tag is applied on both h1 and header, but results as shown in the earlier image(h1 with id) are displayed.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="articleheader" >
<h1 id="articleheader" >Bike the Mountains Tour</h1>
</header>
</body>
</html>
I have the following CSS to show a whole event as "completed".
.afc-completed,
.fc-agenda .afc-completed .fc-event-time,
.afc-completed a {
color: yellow; /* text color */
background-color: #6C3; /* default BACKGROUND color #36c */
text-decoration: line-through;
}
How do I write a CSS for only changing the fc-event-title only?
I saw my class afc-completed is added to the <div> element, but I don't find a solution to just change the title (fc-event-title) or the time.
Any help here?
Günter
#wsanville & #Thomas
I think that's not that simple, sorry.
Just defining what wsanville said will change for all events. The point is to change only for "completed" events.
For that I have
if (newEvent.completed != null) {
newEvent.className = "afc-completed";
}
But that's going to the div and not to title only.
I think I need to add a class directly to/or instead of the '.fc-event-title' for just only those selected/completed events, and only to the title.
Here is a typical div:
<div style="position: absolute; z-index: 8; left: 144px; width: 135px; top: 40px;"
class="fc-event fc-event-hori fc-corner-left fc-corner-right afc-completed ">
<a><span class="fc-event-time">15:15 - 16:15<br></span>
<span class="fc-event-title">Fri Dille</span>
</a>
<div class="ui-resizable-handle ui-resizable-e" unselectable="on"
style="-moz-user-select: none;">
</div>
</div>
But the newEvent.className doesn't work like that!
Is there another possibility?
And I need more modifications to the event presentation, like additional icons or text with italic ... and different combinations of those 'options'.
Thanks for your help.
Günter
OK, here is a working solution to solve for "important" and "completed" attributes of the event:
newEvent.className = ((newEvent.completed != null)? "afc-completed " : "")
+ ((newEvent.priority != null) ? "afc-important " : "");
and
.afc-completed .fc-event-title {
color: yellow;
background-color: #A6B5BC; /* grey */
text-decoration: line-through;
}
.afc-important .fc-event-title {
color: #C00 !important;
font-weight: bold !important;
}
Thanks for helping ;)
If you post some of your markup, I can give a better answer, but in the general case, you will need to add an additional rule to your stylesheet that applies to elements with the fc-event-title class. Something like this:
.fc-event-title
{
color: #ff0000; /* change the color values to something more appropriate */
background-color: #00ff00;
text-decoration: line-through;
}