What would the HTML code be to set this url as my background...?
http://fin6.com/wp-content/uploads/2013/08/6c16724dd8d4aef072e62caeb164ff372.jpg
I am using Lead System Network.com' creation wizard trying to set a background as a landing page.
You could either add the background attribute to your body tag.
<body background="IMAGENAME.jpg">
Or you can add a CSS rule for the body element like
body {
background-image:url('IMAGENAME.jpg');
}
and include the CSS in the HTML header
<link rel="stylesheet" type="text/css" href="theme.css">
you can do it with css as the example of a friend or html shape but I do not recommend it because it is obsolete.
working with css, remember that all images you use for the web must be in the root folder of your project or it will not work.
Related
I am making a website, but for some odd reason I can't move or resize the text. I do not want to use CSS because it is really hard for me to understand.
Here is an example of what i'm talking about in the image:
CSS is a very important part of front-end developing, so you shouldn't be afraid to use and learn it. You can start to link your css to your html like this :
<head>
<link rel="stylesheet" href="myfile.css">
<!-- Or specify the directory C:/User/...
but it's more efficient if you only specify the file created into a folder so if you move that folder changes will apply along with the html-->
</head>
Then open the created css and use these rules : (Only {})
Resizing Text:
p(or the part of html that you are using){
font-size: 40px;
}
Move Text :
(Consider that you are moving the object FROM the direction
to the opposite one:
example left:80px means that it will be 80px away from the left side.
p{
position:absolute;
left:80px;
top:20px;
}
I know three ways to change the size of the text, which are:
Use css
Or
Make changes using the Style tag inside the Head tag
Or
Using the Style tag inside the desired used tag, such as:
<p Style="font-size:10px;">hello</p>
use the font tag
<font size="3">I want the size to be small.</font>
I have 4 5 pages on my website and all I need is a different background-image fixed for each page and responsive(Scrolling shouldn't affect the image position). I can't add the style to the body tag because it'll set the image to all pages.
What should I do?
Thank you.
EDIT:
Forgot to mention; all pages linked to one CSS file!
Use different class in body tag. based on that Class name you can set background images using CSS.
Example:
Page1:
<html>
<head></head>
<body class="page-one"> welcome to page one</body>
</html>
Page2:
<html>
<head></head>
<body class="page-two"> welcome to page two</body>
</html>
Style:
.page-one{
background-image:URL("images/bg-one.jpg");
}
.page-two{
background-image:URL("images/bg-two.jpg");
}
give each image and/or body tag its own class and link that in the css stylesheet so the edit of one doesn't affect all.
I currently have this, but it is not setting the background as expected:
<body style: background-image url()>
Also I need it to be a file not a link
Looks like #Sverre beat me to the suggestion of moving your CSS style to a separate file. If you prefer to leave it directly in the tags, you will have to reformat it a bit like so:
<body style="background-image: url('https://yourdomain.com/some-image.png')">
I'd recommend doing this in your CSS file. This page goes in depth on CSS backgrounds and shows you how to style them as well.
You can do it in the body tag as follows:
body {
background-image: url("example.jpg");
}
I read an article online for tips using CSS and one of the pointers was:
Use a master stylesheet. “One of the most common mistakes I see
beginners and intermediates fall victim to when it comes to CSS is not
removing the default browser styling. This leads to inconsistencies in
the appearance of your design across browsers, and ultimately leaves a
lot of designers blaming the browser. It is a misplaced blame, of
course. Before you do anything else when coding a website, you should
reset the styling.”
Could anyone point me to any tutorials (or even help on here) as to how I can setup a Master CSS Page for my website, and also how I can call classes from the Master CSS Page to objects in my webpages.
For example if I set some styles in my Master CSS page,
I could set class on a div to class="main-header-blue" and it would call that style from my Master CSS Page and apply it to my div (and I could call this class from any of my web page)
Any help or advice is appreciated. Thank you in advance.
I think what you're looking for is Normalize.css. By including this asset prior to your own custom styles, it will help to remove browser inconsistencies with things like margins and padding on the document.
Otherwise, just style as you would normally and you should just be fine. Let me know if you have any other questions!
I hope my interpretation is your answer:
CSS is applying styles from a top-down perspective. This means, if you insert two stylesheets, the top one is applied first and then the second one overrides the first stylesheet
That means that:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="mystyle2.css"> // this one overrides the first
That applies to styles too:
div {
background-color:green;
}
div {
background-color:red;
}
// the background color is red.
That could mean that the first stylesheet is the master stylesheet. That one is containing the 'master styles' and the second one is for 'overriding the defaults'. This is useful when you import a stylesheet from 3rth parties (e.g. Bootstrap).
A second interpretation is SASS. Within SASS you can create a master stylesheet containing the variables that will be applied in the other stylesheets. So, in the master stylesheet you say this:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
Then in your other stylesheets you use those:
body {
font: 100% $font-stack;
color: $primary-color;
}
The basic way of setting a "master" stylesheet is the following:
Assume you have a folder structure like this:
webpage (folder)
css (folder)
style.css (file)
index.html (file)
Lets say you have a file called index.html at the root of your project folder. You need to include/reference the stylesheet (style.css) in the index.html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="mydiv">Your content</div>
</body>
</html>
Then you can have this in your style.css file:
.mydiv {
width: 300px;
height: 300px;
background-color: red;
}
This will make the <div>inside the <body>to have a width and height of 300 pixels and a background-color of red. And you can call this style anywhere inside the webpage by giving a <div> the class mydiv.
That is it simply put.
I have prepared a page in HTML. I can only edit the HTML file - I cannot edit the CSS.
In the CSS file, there is a colour declared: color: #fff000. I created a new style in the HTML file. However, the CSS file style.css is more important - when I add a new color in the HTML page, the style.css colour overrides it.
Is there any possibility to set that CSS in the HTML as more important than the colour declared in style.css, without editing style.css?
Inline CSS always takes precedence so if you put your styles directly on the HTML elements themselves, it should work:
<div id="title" style="color:white">Title</div>
This is acceptable, but not something I would do.
What I would recommend is making an overriding style sheet in the header of the HTML. This keeps the styling away from the HTML content, but you have to be sure to use the !important tag to override the specificity. Adding the !important tag is not 100% required, since internal stylesheet take precedence over external style sheets but it might be something to consider.
So, in the case of the earlier example, this would look something like:
<style>
#title {
color: white!important;
}
</style>
Hope this helps you!
Inline CSS has more importance than a style.css rule. Maybe someone has added !important in the CSS though, then that would override your inline CSS. To try this out, do a:
Link
You can use <style> element with scoped attribute like this:
<style scoped="scoped" type="text/css">
//Add rule here
</style>
It is possible to set the css in html like this:
<html>
<head>
<style type="text/css">
.more-important-style {
background-color: #352e7e;
}
</style>
</head>
<body>
</body>
</html>
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)