Specifaclly I just want to change this header by giving it's own, color, font, size, weight.etc
<div id="header">
<a href="google.com">
<h1>
<li>EXAMPLE LINK</li>
</h1>
</div>
Firstly, there are several errors in your HTML, which should be fixed first:
<div id="header">
<!-- needs a closing </a> tag and some text, as well as a full href -->
<!-- what is your reason for using an LI element here? -->
<h1><li>EXAMPLE LINK</li></h1>
</div>
As far as styling, you can use CSS, like so:
h1 {
color: red;
font-size: 5em;
text-decoration: underline;
}
/* etc. */
Search Google for basic CSS tutorials. Once you've decided which styles you would like to apply, simply save your text document as something like "style.css", and add a LINK element to the header of your HTML file (this will allow you to use it as an external stylesheet.):
<head>
<link rel="stylesheet" href="style.css" />
</head>
There are other methods for applying styles, such as inline styling, etc., but the above is one of the more typical ways of going about doing it.
Here are some resources to get you started:
w3schools CSS tutorial
CSS-Tricks
How to apply stylesheets
Here is a jsfiddle
You specify a stylesheet with:
<link href="<path>/site.css" rel="stylesheet" type="text/css" />
where <path> is the path to the stylesheet and Site.css is the name of your stylesheet. This is normally in <head>.
You do this either with an inline style or a style section in your page or in a style file.
I wasn't sure if you wanted to format the a as well. Also, I wasn't sure if you want to style the header div or h1. If you want to style h1, then replace #header with h1 in css.
Related
I have read and learned that internal stylesheets will override external ones. And also, I learned that the stylesheet last to be called will override the previous one.
With that said, when I had unintentionally placed an external stylesheet after my <style> tag, I noticed it overwrote the internal. It would make sense, as the external sheet was called last, but with what I have learned so far about internal CSS as having higher precedence, it shouldn't matter if it was placed before the external one, right?
There are only three types of styles:
Inline
Embedded
External
And the inline styles are very powerful, because, they are included along with the tag:
<div style="/* rules */">
The embedded styles are almost similar to external styles. Embedded styles are defined by using the <style> tag inside the same page. The main difference between embedded styles and external are, embedded are specific to the page, which they are contained, while external are generic to any page that uses it.
<!-- External Style -->
<link rel="stylesheet" href="style.css" />
<!-- Embedded Style -->
<style>
/* Page Specific */
</style>
And specificity matters in the way of how you import the styles. Always load your external styles <link /> first and then your page specific embedded <style> tags.
The specificity is as follows:
* Image credits CSS Tricks.
I had unintentionally placed an external stylesheet after my <style> tag, I noticed it overwrote the internal.
Consider I am using bootstrap library, and Google Fonts. I will load them first, and then override them in my own styles.
<link rel="stylesheet" href="googlefonts.css" />
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="custom-styles.css" />
There's no difference between having your embedded or internal styles in CSS file or using <style> tag. The order of loading precedence matters.
A CSS file, say style.css with the following contents:
* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Segoe UI'; font-size: 10pt;}
And having a style tag like this:
<style>
* {margin: 0; padding: 0; list-style: none;}
body {font-family: 'Segoe UI'; font-size: 10pt;}
</style>
Both of them have no difference in them. The order you load matters very much.
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html
I encountered a peculiar CSS formatting problem when I changed a <div id="header"> block to HTML5's <header> block. Basically, I want links within the <header> block to be of a certain colour and to not get any decoration.
The relevant HTML and CSS codes look as follows:
<!-- HTML5 code -->
<header>
<h1>
Link text
</h1>
</header>
/* CSS code */
header a {
color: black;
text-decoration: none;
}
The output I see (using Firefox 20.0 with Ubuntu 12.04) is as if the CSS code fragment above does not exist.
Adding something like class="hdr" to the anchor block and changing the CSS rule to a.hdr works. Changing back to <div id="header"> and #header a also works. Still, I don't see why just using <header> and a corresponding rule fails, and it strikes me as the "correct" approach.
An initial search for a solution led me, among other links, to this link (I had the <h1> block nested within the <a> block, initially), but using a <div> wrapper didn't work either.
Try being more specific.
<header class="main-header">
<h1>Link Text</h1>
</header> <!-- .main-header -->
.main-header a {
color: green;
text-decoration: none;
}
using
header h1 a {}
as your selector should fix your specificity issue
Else if your style is getting overridden once it's become visited (by the a:visited selector) you can write a style of equal specificity but it'll override the other rule because it's later in the cascade
header a:visited {}
Just make it come later in the stylesheet
BTW, sorry had to post an answer as I can't comment yet
I like to have the navbar-inner element in my Bootstrap Layout to be customizable by the jQuery UI framework.
<div class="navbar-inner ui-widget-header">
</div>
But the background of the navbar is always black.
How can overwrite the Bootstrap Background with the background from the ui-widget-header class without changing the bootstrap css file?
Create your own CSS file which you will use to overwrite styles from the bootstrap.css and add its reference to your HTML after the reference to bootstrap.css. Also, to ensure that your styles overwrite the bootstrap ones you can use the !important keyword in your css.
So, create a CSS file and call it something like bootstrap-overwrite.css.
Add the bootstrap class you want to overwrite -
.navbar-inner
{
background: none !important;
}
Add the reference to your HTML after the bootstrap reference -
<link href="styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="styles/bootstrap-overwrite.css" rel="stylesheet" type="text/css" />
Twitter Bootstrap is a framework that is supposed to be restyled so you shouldn't be afraid of overwriting the default styling.
Make the ui-widget-header selector more specific, so that it overrides navbar-inner in the cascade. For example,
#pageid .navbar .ui-widget-header {
background: red;
}
Is more specific than simply...
.ui-widget-header {
background: red;
}
We've got a site wide style sheet that's setting the background on a:link to transparent. This is causing a problem displaying the icons from jqueryui. In the example below the trash can icon associated with the ui-icon-trash CSS class is not being displayed because the a:link background property overrules it.
I could apply the same styles ui-icon-trash uses to the link in question but that will be fragile if the jqueryui theme were ever to be updated in the future. Is there a way I can get the jqueryio icons to display at the same time as having a site wide background:transparent property on a:link?
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<style>
a:link {
text-decoration: underline;
color: #066E37;
background: transparent;
}
</style>
</head>
<body>
<a class="ui-icon ui-icon-trash" href="#"></a>
</body>
</html>
I don't see a real solution there, but I can offer two hacks:
Put an additional <span> inside the <a> and apply the css to this element.
Don't use <a> but <button> instead. Drawback: this would require additional javascript to make the button work.
If it is sufficient to override only the background color of your links, background-color: transparent instead of background: transparent could do the trick (but I guess you might have thought of that already).