Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Adding a form or extra css to html

Satoriwolf

Satoriwolf

Coder
Hey Guys,

I can't figure out what to do here. I have a basic HTML page with a navbar and footer, with its CSS stylesheet looking after how it looks. What I would like to add to the page is a nice form, whether that's a drop down menu, or something else. It is a ticket page so I would like a ticket form of some kind. My issue is, when I find some HTML and the CSS to go with it online, and paste it into my current files, the CSS for the form screws up all my layouts, especially the navbar.

How exactly do I use CSS and to only apply it to the specific form within my HTML file and not affect everything else. (I'm very new to this)

This is my webpage
Screenshot 2020-12-12 at 00.26.55.png
 
Sort by date Sort by votes
I do not know exactly what you want to do, but you could use classes.
HTML: 
<body>
    <p>Paragraph 1</p>
    <div class="form">
        <p>Paragraph 2</p>
    </div>
    <p>Paragraph 3</p>
</body>
The following style will only affect the <p> elements inside <div> elements with the class "form".
CSS: 
div.form p{
    font-size: 18px;
}
 
Upvote 0 Downvote
[CODE title="HTML"]<!DOCTYPE html>
<html lang='en'>

<head>



<link rel="stylesheet" type="text/css" href="css/styles2.css" />


<title> Tickets </title>


<script src="js/script.js" type="text/javascript"></script>
<script src="js/script2.js" type="text/javascript"></script>
<meta charset="utf-8">

<style type="text/css">

</style>


</head>

<header>
<div class="container">
<img src='images/logo.png' style="width:180px;height:180px alt="logo" class="logo">



<nav>
<ul>
<li><a href="index.html "> HOME </a></li>
<li><a href="tour.html "> TOUR </a></li>
<li><a href="tickets.html "> BUY TICKETS </a></li>
<li><a href="gallery.html "> GALLERY </a></li>
<li><a href="about.html "> ABOUT </a></li>
<li><a href="profile.html "> Profile </a></li>
<li><a href="cart.html "> Cart </a></li>
</ul>
</nav>
</div>
</header>



<class="buttonlist">
<button class="btn btn1"><a href="tickets.html">DUBLIN STANDING </a></button>
<button class="btn btn2"><a href="tickets.html">DUBLIN SEATED LOWER TIER</a></button>
<button class="btn btn3"><a href="tickets.html">DUBLIN SEATED UPPER TIER</a></button>
<button class="btn btn4"><a href="tickets.html">DUBLIN WHEELCHAIR ACCESSIBLE</a></button>

<button class="btn btn1"><a href="tickets.html">BELFAST STANDING </a></button>
<button class="btn btn2"><a href="tickets.html">BELFAST SEATED LOWER TIER</a></button>
<button class="btn btn3"><a href="tickets.html">BELFAST SEATED UPPER TIER</a></button>
<button class="btn btn4"><a href="tickets.html">BELFAST WHEELCHAIR ACCESSIBLE</a></button>

<button class="btn btn1"><a href="tickets.html">LONDON STANDING </a></button>
<button class="btn btn2"><a href="tickets.html">LONDON SEATED LOWER TIER</a></button>
<button class="btn btn3"><a href="tickets.html">LONDON SEATED UPPER TIER</a></button>
<button class="btn btn4"><a href="tickets.html">LONDON WHEELCHAIR ACCESSIBLE</a></button>

<button class="btn btn1"><a href="tickets.html">MANCHESTER STANDING </a></button>
<button class="btn btn2"><a href="tickets.html">MANCHESTER SEATED LOWER TIER</a></button>
<button class="btn btn3"><a href="tickets.html">MANCHESTER SEATED UPPER TIER</a></button>
<button class="btn btn4"><a href="tickets.html">MANCHESTER WHEELCHAIR ACCESSIBLE</a></button>
</div>







<footer>
<h3>Connect with me on:</h3>
<a target="_blank" class="social-icon" href="https://twitter.com/axelut"><i class="fa fa-twitter"></i></a>
<a target="_blank" class="social-icon" href="https://www.facebook.com/axelut"><i class="fa fa-facebook-square"></i></a>
<a target="_blank" class="social-icon" href="https://dribbble.com/axelut"><i class="fa fa-dribbble"></i></a>
<a target="_blank" class="social-icon" href="https://github.com/alexandru-paduraru"><i class="fa fa-github"></i></a>
<a target="_blank" class="social-icon" href="https://www.reddit.com/user/alexpaduraru/"><i class="fa fa-reddit"></i></a>
</footer>
</div>





<footer>


<body>
[/CODE]



[CODE title="CSS"]body {
margin: 0;
background: #ffffff;
/* white */
color: white;
font-size: 18px;
font-family: "roboto", sans-serif;
font-weight: 300;
}

.container {
width: 80%;
margin: 0 auto;
}


header {
background: #121326;
height: 200px;
}

.logo {
float: left;
position: absolute;
left: 20px;
top: 0;
}

.image {
width: 100%;
}
.aboutimage {
width: 50%;
display: block;
margin: 0 auto;
}

nav {
float: right;
}

nav ul {
padding: 20px;
list-style: none;
}

nav ul li a {
padding: .2em 1em;
font-family:roboto;
font-weight: bolder;
border-radius:4px;
background-color: #27A7DF


}

nav li {
display: inline-table;
margin-left: 50px;
padding-top: 50px;
}

nav a {
color: #ffffff;
text-decoration: none;
text-transform: upper

}

nav a:hover {
color: #FCBA35;
}

nav ul li a:hover {
color: #27A7DF;
background-color: #FCBA35;

}

}



.buttonlist {
text-align:centre;
vertical-align: middle;
margin-top: 360px;


}
a {text-decoration: none;
color:inherit;
}



.btn{
Border: 1px solid #FCBA35;
Background: none;
Padding: 10px 20px;
width: 100%;
Font-size: 20px;
font-family:roboto;
font-weight: bolder;
text-decoration: none;
Cursor: pointer;
Margin: 10px;
Transition: 0.8s;
Position: relative;
Overflow: hidden;
}

.btn1,.btn2{
Color: #27A7DF;
}

.btn3,.btn4{
Color: #FCBA35;
}

.btn1:hover,.btn2:hover{
Color: #27A7DF;
}

.btn3:hover,.btn4:hover{
Color: #27A7DF;
}

.btn::before{
Content: "";
position: absolute;
left: 0;
Width: 100%;
Height: 0%;
Background: #020426;
Z-index: -1;
Transition: 0.8s;
}

.btn1::before,.btn3::before{
top: 0;
border-radius: 0 0 50% 50%;
}

.btn2::before,.btn4::before{
bottom: 0;
border-radius: 50% 50% 0 0;
}

.btn3::before,.btn4::before{
Height: 180%;
}

.btn1:hover::before,.btn2:hover::before{
Height: 180%;
}

.btn3:hover::before,.btn4:hover::before{
Height: 0%;
}


.gallery {
margin: 10px 50px;
}

.gallery img {
transition: 1s;
padding: 15px;
width: 400px;
}

.gallery img:hover {
filter:grayscale(100%);
transform: scale(1.1);
}


.social-icons {

padding: 20px;
width: fit-content;
margin: 0 auto;
}

.tourlist {
padding: 15px;
}



footer {
position: absolute;
bottom: 0;
width: 100%;
}

@media only screen and (max-width: 600px)
p {
font-size: 1.5rem;
line-height: 1.5;
}

}
[/CODE]
 
Upvote 0 Downvote
LTomy said:
I do not know exactly what you want to do, but you could use classes.
HTML: 
<body>
    <p>Paragraph 1</p>
    <div class="form">
        <p>Paragraph 2</p>
    </div>
    <p>Paragraph 3</p>
</body>
The following style will only affect the <p> elements inside <div> elements with the class "form".
CSS: 
div.form p{
    font-size: 18px;
}
Click to expand...

See this for example mate. https://codepen.io/axelut/pen/obGVjV

I would like to add this to my page, but the css that comes with this messes up the css I already have for the page, and the nav bar layout changes

and yes, i need lots of classes
 
Upvote 0 Downvote
I seems that if you want to simply "copy" that code and conserve your styles, you would have to insert it inside a div element, with the class "form" for example, and then insert ".form" before each style in the CSS you copied from the example.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom