I am very new with CSS and I can't style my code well. How to set "font-size:30px;" for the text "font_30", and "font-size:3px;" for the text "font_3" in the code example?
<style>
.cl_30 {font-size:30px;}
.cl_3 {font-size:3px;}
</style>
<div class="cl_30">
<p class="cl_3">font_3</p>
font_30
</div>
What you've done is exactly correct. The font-size of 3px is quite small and easy to glance by, but the text is visible if you look closely.
<style>
.cl_30 {
font-size: 30px;
}
.cl_3 {
font-size: 3px;
}
</style>
<div class="cl_30">
<p class="cl_3">font_3</p>
font_30
</div>
Related
I have the following boostrap cards and I want to style them (override the existing style) by using some css.
Card code
<div class="card" style="width: 18rem;">
<img src="https://cdn.ymaws.com/cilip.site-ym.com/resource/resmgr/cilip/information_professional_and_news/non_infopro_news/2020_03_coronavirus/coronavirus_header.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
What I've tried to add in the css (in the head tags)
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.card{
body {
color: blue;
}
h1 {
color: green;
}
p{
color: red;
}
}
</style>
</head>
In this bit
<style>
.card{
I am trying to refer to the bootstrap class card, and change its style.
Can anyone point out what I am doing wrong with a solution and adequate explanation for a beginner please.
Goal: The goal is to style the card using the css that I have provided. For instance for the card's p and h1 tags to be styled as I've specified. In this case the headings in the cards to be green and the paragraphs to be red and for the body of the card to be blue.
For some reason the styling applied in the head does not apply to the card.
What I've tried:
I've also tried doing each one seperately as suggested
<style>
.card-body{background-color: blue;}
.card-body{h1: green;}
.card-body{p: red;}
</style>
In the above case, the first style (blue) worked but it didn't change the h1 and p.
you have to code them individually, for example .card-body{background-color: blue;}
to override existing style, you need to use !important
for example
h1 {
color: green !important;
}
You have to change you css code to this:
<style>
.card-body { color: blue; }
.card-body h1 { color: green; }
.card-body p { color: red; }
</style>
I am putting in new code as I have been studying, Hopefully this is a clearer picture of what my goal is.
I want to go from a table based to a div setup, I have tried
<div class="image"></div>
with this CSS
div.image:before {
content:url(http://placehold.it/350x150);
}
But I am unsure of the placement of the text, also putting an image in the div as well as making sure the dimension is correct.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>
<div class="mainsection">
</div>
</body>
</html>
CSS code:
td {
text-align: left;
vertical-align: top;
font-family:Tahoma;
font-weight: bold;
font-size:15px;
color: #E5E5E5;
}
.div-with-bg
{
width: 263px;
height: 94px;
background-image:url('smpic.jpg');
margin:0;
padding:0;
}
a {
text-decoration: underline;
color:#9D5FBB;
}
A:Hover {
color : #DBACF2;
text-decoration : underline;
}
h1 {
color: #9929bd;
font-weight: normal;
font-size: 20px;
font-family: Tahoma;
}
H3 {
color: #7F409E;
font-weight: bold;
font-size : 20px;
font-family:Tahoma;
}
My goal is to have the div's go out to the edge of the browsers as I have multiple tables that I would like to replace with div elements. I have viewed this setup in a browser and the div and image show up but not at the edge of the page.
I don't know if I understand what you're asking but I just copied your HTML in Sublime text, and did this for css:
div.image:before {
width: 263px;
height: 94px;
background-image:url('somepic.jpg');
content:url(http://placehold.it/350x150);
margin:0;
padding:0;
}
It works for me. I have the left div on the left and the right div next to it.
Also, I would the the style of the divs in the css file:
div.right {
float: "middle"
}
div.left {
float: "left";
}
And for the HTML:
<body>
<div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>
And if you want to make your life easier just learn flexbox. The way i learned it was using this site.
.container{
display:flex;
}
<div class="container">
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
RIGHT
</div>
</div>
This is one way to do it.
However i think that you should change the question into how i can learn to design in the browser (e.g. https://hackernoon.com/css-box-model-45ecf4ac219e) or something like that.
I have following div:
<div class="mydiv">
This is some introduction text
<br />
click me
</div>
Is it possible to style the click me differently than the rest of the div using CSS only?
You can style the :first-line differently. If there's only 2 lines, it's kind of feasible to style the 2nd and last line than the first one in pure CSS.
Codepen
BUT
you can't style every property (MDN)
being certain that a text will occupy exactly 2 lines would be ignoring narrow devices like smartphones (hello RWD) or zooming at the will of each user (graphical or text zooming). The web is not a PDF :)
+1 to Pevara suggestion: it should be a link or a button and then it can easily be styled
div {
text-transform: uppercase;
font-size: 2rem;
color: red;
}
div::first-line {
text-transform: initial;
font-size: 1rem;
color: initial;
}
<p>OK</p>
<div class="mydiv">
This is some introduction text
<br />
click me
</div>
<hr>
<p>#fail</p>
<div class="mydiv" style="width: 100px; border: 1px dotted blue">
This is some introduction text
<br />
click me
</div>
No, without modifying the HTML or using JavaScript there is no pure CSS way to select the text click me.
<article class="tweet-inner">
<div class="text-wrapper">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</div>
</article>
I have the following repeating html structure.
As of now, I want to provide alternate rows with different background. The element which I want to color is class=text
I do the following in my css -
.tweet-inner .tweet .text-wrapper .text:nth-child(even) {
background-color: #FF0000;
}
This does not work, I also tried -
.text:nth-child(even) {
background-color: #FF0000;
}
This is what works -
article.text:nth-child(even) {
background-color: #FF0000;
}
But I want the .text to be alternately colored, not the entire article.
This also does not work.
The fiddle is http://jsfiddle.net/LKqvz/. Please let me know.
It should be:
article:nth-child(even) .text{
...
}
Because you have multiple article elements with a single .text DIV (your attempts select the nth .text child from article)
Try this
article:nth-child(even) .text {
background-color: red;
}
Js Fiddle
try this:
article:nth-child(even) .tweet .text {
background-color: #FF0000;
}
I'm looking for a way to align a number of elements (spans, inputs, and buttons) such that despite their differing sizes, their vertical mid point is on the same horizontal line:
How do I achieve this in CSS? Here's the HTML file to play with:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<style>
.content { font-size: 18px; border: 1px dotted blue; }
.content input, .content button { font-size: 40px; float: left; }
.label { border: 1px dotted red; float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="content">
<span class="label">Label: </span><input type="text">
<span class="label">More text: </span><input type="text">
<button type="submit">Submit Me</button>
<div class="clear"></div>
</div>
</body>
</html>
Set the main div's line-height: height of tallest element in px, then set vertical-align: middle. You may have to set display:inline or display:inline-block on the subelements as well.
That should work.
As others (David Nguyen and thirtydot) have said, adding vertical-align:middle; will accomplish the effect you're after so long as you get rid of the floats that are currently in your code. Adding display:inline-block; will let you have better control over the dimensions, and I don't know if you were planning on it, but I'd definitely swap out your <span class="label"> for actual <label> tags.
Your span, input and button need the property:
vertical-align:middle;display:inline