To explain what I wish to achieve, lets say I have a long css document with many classes. I have several different "h1" tags and "h2" tags, "iframe", "ul", and many have different classes. Is it possible for all "h1" or other tags, regardless of class, to be grouped together and all "iframe" are grouped together in one group in Notepad++.
h1.left {
font-family: Papyrus;
font-size: 45px;
color: white;
margin-left: 15px;
}
h1.center {
font-family: Papyrus;
font-size: 30px;
color: white;
text-align: center;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre>PS: All code in this document is just
so it would be seen as I meant it to be,
and I hope you can read it right.<pre>
<!--For example:-->
+ h1
<!--And if i roll the h1 down, i can get all h1 in the document:-->
<ul>
<li> h1.left</li>
<li>h1.center <li>
<li>h1.right<li>
<!--And if i open those again, I will get all the code that is inside them-->
</body>
</html>
Not sure whether Notepad++ can run SASS but it sounds like what you are after.
h1 {
color: white;
font-family: Papyrus;
text-align: center;
&.left {
font-size: 45px;
}
&.center {
font-size: 30px;
}
}
Related
Novice here.
I'm creating a button however when I upload it onto the webpage it affects every other button by changing the styling to match the new button.
I don't know how to make the styling specific to only that button and have it not affect anything else on the website. Thanks!
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
you can make specific id (using #) or class (using dot . can be used multiple times in html dom if you will use button many times)
<html>
<head>
<style>
a#someId:link,
a#someId:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a#someId:hover,
a#someId:active {
background-color: #810001;
}
</style>
</head>
<body>
<a id="someId" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>
</html>
You can keep class or id to resolve this issue.
<a id="explore-projects" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10"> </a>
Add CSS to this particular id element.
Check this : http://jsfiddle.net/wzfs238L/
You can define the styling for a class, this snippet uses class name mybutton and shows one with the class added and one without.
<html>
<head>
<style>
a.mybutton:link,
a.mybutton:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a.mybutton:hover,
a.mybutton:active {
background-color: #810001;
}
</style>
</head>
<body>
<h2>With mybutton class</h2>
<a class="mybutton" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
<h2>Without mybutton class</h2>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
This is what you use 'classes' or 'ids' for. They help class a type of element for your page or identify a specific one you want to target in CSS. As #Rana suggested, w3schools has a page for this which might be helpful
Use id on your HTML element, and add # on the style. An id must be unique. Further reading about id click here.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
#fabulous{
background-color: yellow;
color:maroon;
margin-top:1rem;
}
#fabulous:hover,
#fabulous:active {
background-color: #fcc726;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
<a id="fabulous" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">This one is fabulous</a>
</body>
</html>
I'm new to HTML and CSS. The following lines I wrote in the Atom text editor are not properly shown in the preview. The font is not changing from the default Times New Roman. Even after adding extra font-packages. However, I did not use any fancy kind of fonts. Is their something wrong with my code instead?
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Text</title>
</head>
<body>
<p> This is a paragraph. All of the text on this page has a font size of 16 pixels.
This paragraph, like most of the text on this page is black and uses Tahoma font.</p>
<ul>
<li id="point1">This list item uses the Verdana font and color orange.</li>
<li id="point2">This list item uses the Impact font and the color red.</li>
<li id="point3">This list item uses the Georgia font and the color pink.</li>
<li id="point4">This list item is black and uses the Tahoma font. It also contains a link to
<link href="http://www.spiced-academy.com"></link>
</ul>
<p>This is another paragraph. Each item in the list above has a top and bottom
margin of 10 pixels.</p>
</body>
</html>
I'm not sure that is the problem but try to add the attribute type on the link css stylesheet:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Well, in the code preview window I see it works (Chrome, Mac). Try to clear your browser cache or write font-family: Tahoma !Important;
Make sure that your CSS page is saved as stylesheet.css because this is what is referenced in your code.
Check that your HTML file and CSS file are saved in the same directory.
For testing, you could have the CSS in a <style> tag, before even trying to link to a stylesheet. You can place this in the <head> tag. Then tackle the external stylesheet once you can successfully see the styles here.
<head>
<style>
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
Question:
How do I style different elements of a HTML website properly? I've looked all over the internet and read books but am still sort of struggling.
Issue:
My problem is that I have a main heading, which is like the main "title" for my website which displays the website name, but to the left of my heading, I want to style a vertical navigation bar which will be in-line with my heading. Yet I am having trouble styling the navbar and heading to work next to each other, rather than one of them being on top of the other.
JSFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="homepage.css">
<head>
<title>CSGOWin | Win Big!</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Jackpot</li>
<li>Coinflip</li>
<li>Giveaways</li>
<li>About Us</li>
<li>Contact Us<li>
</ul>
</div>
<h1>CSGO Win</h1>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
background-image: url(bgimg.jpg);
width: 100%;
height: 100%;
background-size: 100%;
}
h1 {
font-family: Arial, Verdana, sans-serif;
background-color: #FFA500;
border-style: solid;
border-radius: 25px;
text-align: center;
margin-top: 50px;
margin-left: 350px;
margin-right: 350px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 45px;
}
ul {
list-style-type: none;
margin-left: 50px;
margin-right: 85%;
margin-top: 50px;
background-color: #FFA500;
}
li a {
font-family: Arial, Verdana, sans-serif;
display: block;
}
.navbar{
}
Finally, I am very new to stack overflow, so I apologise if my question is not fully detailed. I will answer questions if there are any. Thanks for your kind help.
Like mentioned in the comment you can use float: left see this pen http://codepen.io/anon/pen/bpWzeK?editors=1100. Another way to do it is by using flex.
you can add class or id attributes to certain html tags and then in your stylesheet reference that class or id
->.navbar{
}
that references any tag with "navbar" class will get the style in that block
->#thisIsAnID{
}
that references any tag with the id " thisIsAnID" id
so . is used for classes
is used for ids
Problem has been resolved, thank you to everyone who has helped me with this. The problem was that I was using <.style> tags in the css file which is a HTML tag, which is not read properly in the css making varying things happen.
I working on an assignment for my HTML class and were getting into .css for external setup.
What I've been noticing is when I move one block of code into anothers spot, the entirety of my webpage changes, but what I moved seems to "no longer exist".
My css code is
<style>
body { background-color: #6699ff;
color: #d5e3ff;
font-family: verdana; }
header { background-color: #6699ff;
color: #003366;
font-family: serif; }
h1 { line-height: 200%; }
nav { font-weight: bold; }
#category { font-style: bold;
background-color: #6699ff;
color: #003366;
font-size: 1.1em; }
footer { font-size: 0.60em;
font-style: italic; }
</style>
And the page looks like: http://i.imgur.com/eGthqWR.jpg
But when I move the the body to where the header is
<style>
header { background-color: #6699ff;
color: #003366;
font-family: serif; }
body { background-color: #6699ff;
color: #d5e3ff;
font-family: verdana; }
h1 { line-height: 200%; }
nav { font-weight: bold; }
#category { font-style: bold;
background-color: #6699ff;
color: #003366;
font-size: 1.1em; }
footer { font-size: 0.60em;
font-style: italic; }
</style>
The page ends up looking like this... http://i.imgur.com/GxTfpTs.jpg
I'm really confused as to why it only uses the second "block" to actually get what the page should look like.
I can edit in my index page if you need to see that as well, but I'm pretty sure it's just an issue with how I'm coding the css file.
Here's the Index.html
<!DOCTYPE html>
<html lang="en">
<link rel= "stylesheet" href="fishcreek.css">
<header>
<title> Fish Creek Animal Hospital </title>
<meta charset="utf-8">
<h1> Fish Creek Animal Hospital </h1>
</header>
<nav>
Home
Services
Ask the Vet
Contact
</nav>
<body>
<dl>
<dt><strong>Full Service Facility</strong></dt>
<dd>Veterinarians and staff are on duty 24 hours a day, 7 days a week.</dd>
<dt><strong>Years of Experience</strong><dt>
<dd>Fish Creek Veterinarians have provided quality, dependable care for your <br>
beloved animals since 1984.</dd>
<dt><strong>Open door Policy</strong></dt>
<dd>Our Professionals welcome owners to stay with their pets during any medical <br>
procedure.</dd>
<dl>
1-800-555-5555 <br> 1242 Grassy Lane <br> Fish Creek, WI 55534
</dl>
</dl>
</body>
<footer>
<small><i>Copyright © 2014 Fish Creek Animal Hospital <br>
Johnathon#Olivas.com</i> </small>
</footer>
</html>
If anyone knows whats wrong with mine, or why it seems to be doing that, I'd love to know! Thanks in advance -John
As a temporary fix to the problem, I was able to add a small single line of code as the "fodder" to being skipped and the header now works the way it's supposed to, and the rest is all according to plan!
THEFIX! {background-color: #6699ff;}
That's all I had to do and it works... kinda, I just hope that I can figure out how to get rid of "thefix" so it works without it.
Thanks for the help everyone, sorry that it wasn't worded very well and probably didn't make much sense, but yea... temporary workarounds ftw
You shouldn't use <style> and </style> in your css files — it's a html tags, not css syntax.
What's going on in your case:
You are trying to apply css rules to <style> body selector or <style> header selector depending on the order. There is no such elems in your html, so it in fact doesn't applies your first rule.
I try something like this, and change the order css code for header and body the result is same.
<!DOCTYPE html>
<html>
<head>
<style>
/*
body { background-color: #6699ff;
color: white;
font-family: verdana; }
header { background-color: #6699ff;
color: red;
font-family: serif; }
*/
header { background-color: #6699ff;
color: red;
font-family: serif; }
body { background-color: #6699ff;
color: white;
font-family: verdana; }
</style>
</head>
<body>
<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>
I'm sorry, I'll admit I'm a bit of a newbie when it comes to HTML. But I can't see where I'm going wrong. I've declared the page to be aligned center, but for some reason invisible to me, it won't actually align!
My code is here...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body,td,th {
font-size: 14px;
text-shadow: inherit;
max-width: 1000px;
min-width: 600px;
float: none;
vertical-align: central;
position: absolute;
width: auto;
}
h1 {
font-size: 40px;
color: #FFF;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
h2 {
font-size: 16px;
color: #666;
}
h3 {
font-size: 24px;
color: #FFFFFF;
}
.Headertext2 {
}
h5 {
font-size: 16px;
color: #666;
}
h6 {
font-size: medium;
color: #000;
}
h4 {
font-size: 12px;
color: #FFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #999;
}
a:active {
text-decoration: none;
}
</style> <title>We'll fix your Potholes!</title>
</head><center>
<body bgcolor="#B90D32"> <div id="container" width "1200" align="center" >
<h1>A1Jay Pothole Solutions</h1>
<h3><strong>Permanent Pothole Repair that lasts</strong></h3>
<div id="content" align="center" bgcolor="#FFFFFF" width"600" class="content">
<h6>Potholes are a growing problem and cause lasting damage to your vehicle.
We here at A1JAy Pothole Solution have the solution. We use only the best products on the market to repair potholes ensuring that the problem is fixed permanently and never returns. Our repairs are professional water tight and permanent. We replace any road markings that may be removed. We respond quickly to repair any holes, therefore stopping the damage to your vehicle.
Our products are cold lay, fully graded to PSV-60 and all packaging is recyclable.
We have different rates depending on the amount of potholes you require permanently repairing, get in touch for details.
If you have a pothole on your drive, street, place of work, car park, walkway or anywhere else, please get in contact and I will happily give you a free, no obligation quote.. </h6>
<p> </p>
</div>
</div>
</body>
</html>
I apologise if this question has already been asked, I'm still getting to know Stack Overflow. Thanks in advance :).
Let's start with a stripped down (and working) solution: http://jsfiddle.net/WDTCK/1/
Major Points
<center> is obsolete* (it's also an illegal parent for body, and unclosed in your example)
align=center is obsolete*
A simple way to center something using CSS is to assign a container element a width and margin: 0 auto
Like this:
#container {
margin: 0 auto;
width: 600px;
}
Minor Points
Always prefer styles declared separate from the markup
Always declare styles using CSS (not deprecated properties like bgcolor="#B90D32")
Make sure you are using headings correctly. I see H1, H3, and H6. Headings should represent the outline of your document; they should not be used just for formatting.
Here's a cleaner example which demonstrates better semantics: http://jsfiddle.net/WDTCK/2/
* "obsolete and non-conforming, and [...] must not be used by authors."
Put this inside the body
<div align = "center">
<!--somecodes-->
</div>