this is my stylesheet. Repeat doesn't work. I'm very new to coding and I'm really confused. Please help me. I know it's a very simple code, but it won't work. I don't know what I'm doing wrong.
background-color: white;
font-family: sans-serif;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
background: url("background_image.jpg")
background-repeat: no-repeat;
You're missing a semicolon (;) after your background: url("background_image.jpg")
If you miss a semicolon after an element, nothing after it until the end of the {} will work.
A semicolon is not needed however, on single-style elements or on the last style like the following examples:
.class { color: red }
.class {
background-color: blue;
color: red
}
Basically, a semicolon is required after every style, up until the last style. Although removing the semicolon from the last style is not recommended since you (or other contributors to the code) may forget about this when adding more styles to the element later on.
Related
I am creating my own website and I've came to a strange problem.
I am using CSS and HTML while asking this question (respectively on my web); I m using Mozilla Firefox 66, the Developer version (just has some more web tools etc.)
So, I have a index.html, and index.css, in the index.html it is linked to the index.css <link rel="stylesheet" href="./css/index.css" type="text/css">.
Everything worked until I decided to customize my submit button:
<input type="submit" id="submit" value="Register!">
Basically, I've put this in my CSS (index.css) like I would always do:
#submit{
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
The thing is. This does not affect the submit button in any way. The strange thing is, if I did:
#registerName, #registerMail, #registerPass, #submit{
display: block;
margin-left: auto;
margin-right: auto;
font-size: 30px;
width: 600px;
height: 60px;
};
it would affect the button (and of cource registerName etc.). And I think, what the hell?
So, after searching up on here (StackOwerflow of course :) ), I found people doing some methods such as putting it directly into the button (<input type="submit" value="Register!" style="width:600px;height:60px;") worked, but not what I wanted, also things like input.submit(if I replaced id with class) which didn't work. I don't know. This seems like a strange bug or something.
So, all in all: When I simply do #submit{} in the CSS, it does not actually affect the submit id. Although if mentioning more of them (like #submit, #user, #phone{}), it does affect it. Is this a bug or something?
PS: Sorry for the long post, I am new here, and I wanted to explain fully for you to understand
If the css style sheet you have shown us looks like below, the ";" after the first declaration block is going to cause the second selector and declaration block to fail.
#registerName, #registerMail, #registerPass, #submit{
display: block;
margin-left: auto;
margin-right: auto;
font-size: 30px;
width: 600px;
height: 60px;
};
#submit{
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
Use button instead of input.
#submit {
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
<button type="submit" id="submit">Register!</button>
Why does it work on the group styling? Hard to say without having the whole CSS. My best guess is that something else is applied in between, like a border. For example, you can make the CSS work with input by setting any valid value to the border attribute.
#submit {
display: block;
font-size: 30px;
width: 600px;
height: 60px;
border: 1px solid lightgrey;
}
<input type="submit" id="submit" value="Register!"></input>
Is it possible to create a fancy text in HTML with the help of CSS only?
I am putting a link where you can see a better example of fancy text. https://www.ultimatebeaver.com/modules/fancy-text/
This is one neat CSS style that forces a background image to show through letters on the page.
You can simply put any background in the .knockout class in css given in fiddle, also set different font and style as required.
See the fiddle
.knockout {
background: url(https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=) -80px -80px;
color: red;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
font-size: 100px;
font-family: arial, helvetica;
width: 600px;
margin: 50px auto;
text-align: center;
}
body{
background: #444;
}
<div class="knockout">gaurav</div>
I am learning about CSS from Progate.com (Note that they don't have any doubt clearing forum) and reached the level where I have to work on a simple layout provided in the exercises. It was quite a smooth learning until I was confused by the CSS of a class selector. So, I need to fix some CSS so that only the <li> elements inside header-list are horizontally aligned.
To do the same I changed the code to the following:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
float: left;
padding: 33px 20px;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
This gave me the same result as they wanted in the answer. But, when I try submitting the answer, a popup pops out saying that
The CSS for the float property of <li> elements should be deleted.
So, to understand why this was needed, I re-read their instructions once again and it stated that:
Rewrite the following properties specified for <li> elements so that they are applied only to the <li> elements inside header-list.:
float: left;
padding: 33px 20px;
Thus, here I am confused why it is that much necessary to write the code as follows in order to advance myself to next stage:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
/* CSS properties from here are moved to line 32. But why?
We still get the required result without doing so.
*/
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
/* Added -> CSS for <li> tags within header-list
(CONFUSION: The float and padding property could have been applied in the first .header-list li{}.
But I didn't understand why the same has been told to do again below)
*/
.header-list li {
float: left;
padding: 33px 20px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
I searched over the internet in order to get some clue about the same. But I think, being a beginner it is very hard to clear the smaller concepts. Hence, I took it to our saviour forum - Stackoverflow. Some help or hints about the same will be greatly appreciated.
You may want to try using display: inline; instead, and deleting the floats. You stated above that they mentioned
The CSS for the float property of <li> elements should be deleted.
This is another way of of displaying your list horizontally without using floats.
Hope this helps!
I highly recommend checking out The Net Ninja on YouTube though. He is an amazing teacher, you will learn a LOT, and he is very thorouhg and makes it really easy for you to grasp the concepts. Check out the playlists on his channel he has some for html, css, and a ton more!
https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT
i researched, it is a common bug, but none of the suggested fixes helps.
http://i.imgur.com/MkDLROb.jpg
HTML
<div id="banner">
<h1>Paslaugos</h1>
</div>
CSS
#banner {
width: 100%;
height: 240px;
background-image: url('img/paslaugos_bg.png');
background-position: center;
display: block;
margin-left:auto;
margin-right:auto;
}
h1 {
font-family: Helvetica;
font-weight: 100;
padding-top: 80px;
line-height: 130px;
letter-spacing: 5px;
font-size: 60px;
color: rgb( 255, 255, 255 );
text-transform: uppercase;
text-align: left;
text-shadow: 0px 2px 4px rgb( 3, 3, 3 );
width: 1200px;
margin-left:auto;
margin-right:auto;
}
Any ideas? The space appear even when i delete the whole css or add clear:both
The margin comes from the CSS styles the browser automatically gives those elements. It is called user agent styles. You'll have to overwrite those defaults. In your case #banner h1 { margin: 0 auto;} should do it.
Take a look at Codes & Notes: Default browser styles and normalize for more on the topic.
You should reset your css. The reason is that different browsers have some different default css rules they apply to elements.
Some browsers come with pre-set values for margins and paddings for different elements, these values can differ from one browser to another, in order to get rid of this, you should reset them, in this case, add the folowing code to your h1 CSS:
margin:0px; padding:0px;
Also, there is this padding you added, the 80px one, if you don't need it get rid of it as well.
I have a box defined that works for most of my site:
.searchBox
{
width: 610px;
height: 170px;
padding: 15px 55px 5px 15px;
background: url('../images/advanced_search_BG.jpg') no-repeat;
margin-top: 10px;
}
But I have one box that needs to be a little bigger; it has to be height: 220px.
I know I could duplicate the above, calling it, say searchBoxLarge, put that on my div tag, and be done. But that's duplicate code that I don't want.
This might be a 'dumb question', but I'm not trained in CSS and looking for assistance...
What is the format to specify the searchBoxLarge with the height: 220px, but without duplicating the entire searchBox entry?
Add searchBoxLarge to the searchBox declaration, and then make a separate declaration for just searchBoxLarge which overwrites the height value.
.searchBox, .searchBoxLarge
{
width: 610px;
height: 170px;
padding: 15px 55px 5px 15px;
background: url('../images/advanced_search_BG.jpg') no-repeat;
margin-top: 10px;
}
.searchBoxLarge
{
height: 220px;
}
There was a good article about doing this on SitePoint http://www.sitepoint.com/first-look-object-oriented-css/
I would suggest you read the responses to the article since there are some drawbacks to doing your CSS like this, and also some benefits.
I agree the name Object Oriented CSS is misleading because there is no true sub-typing
Cheers! Orin