hi I want to add css in title sections in my page
I have a different sections in 1 page
but I want to change in each section fonts and color of title text
but not sure about how to do that
Give each section a class, and then apply the stylings to the children of that class. For example:
.section-1 h2{
color:#fff;
}
.section-1{
background-color:orange;
}
.section-1 p{
color:blue;
}
.section-2 h2{
color:#fff;
}
.section-2{
background-color:peachpuff;
}
.section-2 p{
color:black;
}
.section-3 h2{
color:#fff;
}
.section-3{
background-color:pink;
}
.section-3 p{
color:purple;
}
<html>
<head></head>
<body>
<div class="section-1">
<h2>Section 1</h2>
<p>Filler paragraph text</p>
</div>
<div class="section-2">
<h2>Section 2</h2>
<p>Filler paragraph text</p>
</div>
<div class="section-3">
<h2>Section 3</h2>
<p>Filler paragraph text</p>
</div>
<div class="section-4">
<h2>Section 4</h2>
<p>Filler paragraph text</p>
</div>
</body>
</html>
You can make separate css options via Id attribute.
Check out https://www.w3schools.com/html/html_css.asp. "The id Attribute"
You can use the style attribute
https://www.w3schools.com/tags/att_style.asp
<h1 style="color:blue;text-align:center">This is a header</h1>
<p style="color:green">This is a paragraph.</p>
Related
I have 5 paragraphs in my div and I need to style them differently.
Is there an easier way to do it rather than giving each paragraph a different class?
<div class="container-fluid">
<div class="row">
<div class="col bg-dark text-white">
<p class="text">Nikolina Tute 2 Mount Street, Manchester M2 5WQ</p>
<p class="text-2">#1 in Customer Service in the UK</p>
<p class="text-3">Free Shipping for Orders over 60$</p>
<p class="text-4">support#hlfonline.co.uk</p>
<p class="text-5">07441 430 469</p>
</div>
</div>
</div>
Just make a standard class and then make micro classes for the changes you want:
<p class="p-class"> Some Text </p>
<p class="p-class"> Some Text </p>
<p class="p-class diff-class"> I'm Different!! </p>
.p-class{
background: green;
text-align: center;
font-size: 1rem;
}
.diff-class{
"Some different stuff here"
}
If you don't want to write in the class name for each paragraph than you can replace ".p-class" with just "p" Keep in mind this will affect all "p" elements.
I'm aware these aren't good class-naming conventions.
Generally speaking, if each P tag needs to be accessed differently. Then yes you will need to put an ID/Class selector on each p tag. You can either use an ID on each p tag or do some type of subclasses in CSS and take advantage of the cascading effect.
.base{
color: green;
}
.firstP{
color:red
}
.lastP{
color: purple;
}
<div>
<p class="base firstP">Some text</p>
<p class="base">Some text</p>
<p class="base">Some text</p>
<p class="base">Some text</p>
<p class="base lastP">Some text</p>
</div>
Another thing you could do if you wanted to have cleaner markup in the HTML is nth-child selector. This way you HTML doesn't have a bunch of classes on it and all the work is done in the CSS file
#base p{
color: green;
}
#base p:nth-child(1){
color: red;
}
#base p:nth-child(5){
color: purple;
}
<div id="base">
<p >Some text</p>
<p >Some text</p>
<p >Some text</p>
<p >Some text</p>
<p >Some text</p>
</div>
What is the difference between declaring:
p.myClass { color: red; }
and
.myClass p { color: red; }
The first one is all p elements with class myClass:
<p class="myClass"></p>
and the second one is all p elements inside element has class myClass:
<div class="myClass">
<p></p>
<p></p>
</div>
p.myClass refers to elements with p tag having .myClass
p .myClass refers to elements with elements having class inside element with p tag
.myClass p refers to elements with p tag inside element having class 'myClass'
the first means p has a class .myClass the second one means all the p which .myClass is the parent/ancestor will have the rules you apply
p.myClass {
color: red
}
.myClass p {
background: red;
margin: 10px 0
}
<div class="myClass">
<p class="someClass">this will be red</p>
<p>this will be red</p>
<p>this will be red</p>
<p>this will be red</p>
<p>this will be red</p>
<p>this will be red</p>
<p>this will be red</p>
</div>
<hr />
<p class="myClass">this will be red</p>
<hr />
<section class="myClass">
<div class="someClass">
<p>this will be red</p>
<p>this will be red</p>
<p>this will be red</p>
<p>this will be red</p>
<p>this will be red</p>
<p>this will be red</p>
<p>this will be red</p>
</div>
</section>
p.myClass is referring to a paragraph elements with a class of "myClass":
<p class="myClass">
.myClass p refers to the a paragraph element which is a descendant (child) of any element with a class of "myClass". For example:
<div class="myClass">
<p></p>
</div>
The space used here is called a CSS "combinator", which is a relationship operator between multiple selectors. You can read about combinators here: https://www.w3schools.com/css/css_combinators.asp
Additionally, you can read more about CSS selectors here: https://www.w3schools.com/cssref/css_selectors.asp
p.className will assign the CSS rules to the designated elements only.
.testClass
{
color:red;
}
p.testClass
{
color:blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" type="text/css" href="Template.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="Template.js"></script>
</head>
<body>
<main>
<div class=testClass>
This text should be red.
</div>
<p class=testClass>
This text should be blue.
</p>
</main>
<footer>
Copyright © 2017~M.A.F.
</footer>
</body>
</html>
1)
<div class="testimonials">
<div class="content">
<p>Content ONE</p>
<p>Content TWO</p>
<p>Content THREE</p>
</div>
</div>
<div class="other-content">
<p>Content Here</p>
</div>
2)In above code i have give position:absolute to <p></p> tag, so the other-content class content is not displayed under the content class.
3)I need other-content content will be displayed below the other-content class.
4)please don't use height, solve the issue.
5)Please check the below link.
6)Here is the fiddle.
Thanks in advance.
remove the position from .content p
try this..
.content p{
width: 50%;
background-color: #eee;
float: left;
padding: 15px;
}
FIDDLE
Wrap the both divs (testimonials and other-content) in an extra wrapper div and then set position:absolute on that wrapper.
FIDDLE
.wpr {
position: absolute;
}
<div class="wpr">
<div class="testimonials">
<div class="content">
<p>Content ONE</p>
<p>Content TWO</p>
<p>Content THREE</p>
</div>
</div>
<div class="other-content">
<p>Other Content Here</p>
</div>
</div>
I have been trying to build a very simple layout where everything flows vertically but as soon as I add any content to one of the divs, it creates whitespace between the div below it.
Here is an image for an example: http://chriswebbonline.com/imagelinks/help.jpg
Here is my HTML
<body>
<div id="container">
<div id="header">
<p> </p>
</div>
<div id="chat">
<p>.</p>
</div>
<div id="footer">
<p>.</p>
</div>
</div>
</body>
Here is my CSS
body {
background-color:#777;
font-family:Verdana, Geneva, sans-serif;
}
#container {
width:100%;
}
#header {
text-align:center;
background-color:#000;
color:#FFF;
}
#chat {
background-color:#EEE;
}
#footer {
background-color:#000;
}
I would like to know how to stop the whitespace from automatically appearing.
~Chris
try
p {
margin : 0;
}
paragraph tag margin is not 0 by default
Just a hunch, but try:
<div id="header">
<p> </p>
</div><div id="chat">
<p>.</p>
</div><div id="footer">
<p>.</p>
</div>
(No whitespace between opening and closing tags.)
I am just starting with responsive webdesign. I have a 2 column layout (sidebar and content).
<div class="main-container">
<div class="main wrapper clearfix">
<div class="con1">
<header>
<h1>container 1 h1</h1>
<p>text1</p>
</header>
<section>
<h2>overview section h2</h2>
<p> test</p>
</section>
</div>
<div class="con2">
<header>
<h1>container 2 article header h1</h1>
<p></p>
</header>
<section>
<h2>article section h2</h2>
<p>text</p>
</section>
</div>
<aside>
<h3>aside</h3>
<p>text</p>
</aside>
</div> <!-- #main -->
</div> <!-- #main-container -->
The content got 2 div container. On a small screen I want
Div1
Div2
On a large screen I want them swapped,
Div2
Div1
In my CSS I now got the following Media Query:
#media only screen and (min-width: 768px) {
.main div.con1 {
float: right;
width: 57%;
}
.main div.con2 {
float: right;
width: 57%;
}
Is it possible to swap the order around and if so, how can I do it? Anyone got maybe a link to a good tutorial?
Thanks a lot in advance !
The method used in the StackOverflow question "CSS positioning div above another div when not in that order in the HTML" seems to be your best bet.
with js:
//on load
responsive_change_box_order();
//on resize
window.addEventListener('resize', responsive_change_box_order );
function responsive_change_box_order() {
if (window.matchMedia("(max-width: 1118px)").matches) {
jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
}
else{
jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
}
}
This snippet uses flexbox and related properties to meet your end requirement.Also kindly note that you use use appropriate vendor prefixes for flexbox when you implement or use something like autoprefixer or prefixfree.
.main{
display:flex;
flex-direction:column
}
.con1{
order:2;
background-color: green;
}
.con2{
order:1;
background-color: red;
}
/*For Large screen only*/
#media(min-width:1200px){
.con1{
order:1;
}
.con2{
order:2;
}
}
<div class="main-container">
<div class="main wrapper clearfix">
<div class="con1">
<header>
<h1>container 1 h1</h1>
<p>text1</p>
</header>
<section>
<h2>overview section h2</h2>
<p> test</p>
</section>
</div>
<div class="con2">
<header>
<h1>container 2 article header h1</h1>
<p></p>
</header>
<section>
<h2>article section h2</h2>
<p>text</p>
</section>
</div>
<aside>
<h3>aside</h3>
<p>text</p>
</aside>
</div>
<!-- #main -->
</div>
<!-- #main-container -->