I just got a html template with sections and a few things are not clear about them.
The file contains a section look like this:
<section id="section-name" class="row">
</section>
As I already found simple <section> </section> tags, I'm confused about a few things. Mainly, what does the section id's? Are they referring to CSS rules or they can be used without any connection with the CSS? So far I couldn't find anything in my CSS file related to the used section names so I assume the id's are named based on practical reasons that helps to structure the code.
Am I right that section id's don't have any connections with CSS? Or they can refer to CSS options but they can also work without any CSS related connection?
The id attribute on a section does exactly the same as it does on every other element.
You can link to it with a fragment identifier on the end of a URL
You can target it with CSS
You can target it with a programming language (e.g. client side JavaScript).
There is nothing unique to sections about how the id attribute is handled.
It's the same as an ID on any other tag. You don't have to use it in CSS, but you can.
You can use sections in css like this:
css:
section
{
color:red;
}
or
section#section-name
{
color:red;
}
or
section.row
{
color:red;
}
or
section#section-name.row
{
color:red;
}
Related
New to this, bare with me please.
I've started having fun with HTML code doing offline documents. I just found out that I could easily change my font, in the head, by adding this:
<style type=text/css>
mkf { font-family:'Courier'; color:red; }
</style>
Then, as I go to add code to , every time I want to change the font of a select group of word with the addition of the color red, I just need to type
<mkf>words here</mkf>
Wonderful! It saves me so much time. But then I got to wonder, what if I wanted to add a link to a word. For example, instead of typing all of this out:
<mkf>Example1</mkf>
I would simply be able to parse whatever text I inputted between, let's say,
<linkandfont>Example1</linkandfont>,
which would basically create a link to the file "to_do_list.pdf".
I've tried to find a name or term for this so that I can study and learn more, but I have not found it yet.
Thank you.
Why are you not using classes instead? These achieve the same thing. For example;
<style>
.mkf {
font-family:'Courier';
color:red;
}
</style>
<div class="mkf">test</div>
However, to properly answer your question, what you want is ABSOLUTELY possible in HTML5 and CSS3. And I've used such methods in certain projects of mine (just know this isn't entirely Kocher or conventional).
mkf {
font-family:'Courier';
color:red;
}
<mkf>this is working</mkf>
As for making <linkToSomething>Click Here</linkToSomething> not as easy. You would definitely need JavaScript etc to handle all that. You won't achieve it in CSS and HTML alone.
You cannot. Only way to create a link in HTML is by typing description. You could also shorten by using JavaScript but that's not HTML.
The way you changed the color in head is part of styling or CSS, so you could give a class to a tag like <a class='redlink' href='.. and define that class in head like you did with mkf : .redlink {color:red} or if you want all your links to be red then you could give color to a in head style: a {color:red;}
By typing <mkf> in body I guess you created custom tag which is not part of standard HTML tags, more proper way would be using class to a standard tag like div or p.
Instead of creating a whole other id and ruleset, why can’t I just put multiple values (ex. font-family: cursive; color: blue) in a single ruleset? I tried it and it works and seems like a quicker way to do it. For example, if I want to change the font, color, and uppercase/lowercase of a title, can't I just put all those values into one ruleset?
The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.
Explanation :
<[tag] style="[css]"> Content </[tag]>
Where [tag] can be anything. For example "p" (paragraph), "span", "div", "ul", "li".. etc.
and where [css] is any valid CSS. For example "color:red; font-size:15px; font-weight:bold"
The recommended way to add style to a html element is by assigning it a "class" (a identifier that can be repeated on the document) or a "id" a unique identifier that shall not be repeated in the document.
For example:
<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>
Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.
Then in the CSS (inside the tags of your document):
<style type="text/css">
.red {
color:red;
}
#element1 {
background-color:black;
}
</style>
For this example and to keep it simple to new users I named the class "red". However class="red" isn't the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So class="error" or class="highlight" might be more appropriate. ( Thanks to Grant Wagner for pointing that out )
For a complete guide to CSS you can visit this link: http://www.w3schools.com/css/
Remember:
Keep your HTML Code clean and use CSS to modify ANY visual style that's needed. CSS is really powerful and it'll save you a lot of time.
Yes you can and it’s okay to do that.
Actually this is the right way!
so you create a ruleset with a specific selector, then you write all the properties that you wish and element to have (if the selector applies to the element)
So I want to select the <div> element with the class .thisClass, but not any other elements with class of .thisClass:
<div class="thisClass"></div>
<p class="thisClass"></p>
CSS Selector by class name and tag: div.thisClass { ... }:
div.thisClass {
background-color: red;
}
<div class="thisClass">thisClass (div)</div>
<p class="thisClass">thisClass (p)</p>
But this is a bad way to write selectors:
Don’t qualify class rules with tag names
The previous concept also applies here. Though classes can be used many times on the same page, they are still more unique than a tag.
One convention you can use is to include the tag name in the class name. However, this may cost some flexibility; if design changes are made to the tag, the class names must be changed as well. (It’s best to choose strictly semantic names, as such flexibility is one of the aims of separate stylesheets.)
BAD
treecell.indented {…}
GOOD
.treecell-indented {…}
BEST
.hierarchy-deep {…}
Using JavaScript
document.querySelector('div.thisClass')
Using jQuery
$("div.thisClass")
Using CSS:
<style>
div.thisClass{}
</style>
The following code illustrates how to select the first class from the list of classes in both CSS and Javascript.
CSS
.thisClass:first-child {
/*css property*/
}
JAVASCRIPT:
var divElement = document.getElementsByClassName('thisClass')[0];
This question already has answers here:
Difference between ID and Class
(8 answers)
Closed 8 years ago.
I want to know what is the exact difference between id and class in html and css.
I read somewhere that ids are unique and there can be only one element with corresponding id, and classes can be applied to many elements.
But I think this is wrong I have a code in which I have applied a single id to two elements.
<link type="text/css" href="main.css" rel="stylesheet">
</head>
<body id="header">
<p id="header2">Poster</p>
<p id="header2">Hello World</p>
</body>
</html>
and here is my css code
p#header2{
background-color:white;
width:50%;
height:50%;
margin-left:25%;
margin-right:25%;
text-align:center;
font-size:50px;
}
Could anyone please explain me???
Here is the Explanation in detail.
Use a class when you want to consistently style multiple elements throughout the page/site. Use the ID when you have a single element on the page that will take the style. class is a type of item and id is the unique name of an item.
EDIT:
CSS doesn't care
Regarding CSS, there is nothing you can do with an ID that you can't do with a Class and vice versa. I remember when I was first learning CSS and I was having a problem, sometimes I would try and troubleshoot by switching around these values. Nope. CSS doesn't care.
Javascript cares
JavaScript people are already probably more in tune with the differences between classes and ID's. JavaScript depends on there being only one page element with any particular, or else the commonly used getElementById function wouldn't be dependable. For those familiar with jQuery, you know how easy it is to add and remove classes to page elements. It is a native and built in function of jQuery. Notice how no such function exists for ID's. It is not the responsibility of JavaScript to manipulate these values, it would cause more problems than it would be worth.
EDIT2:
The Documentation clearly shows that HTML required the ID attribute to be unique in a page:
This attribute assigns a name to an element. This name must be unique in a document. If you have several elements with the same ID, your HTML is not valid.
So in JavaScript, getElementById() should only ever return one element. You can't make it return multiple elements.
Well, you can have more than one element with the same ID, but you shouldn't - because the consequences of doing so is unpredictable, due to differences between browsers.
ID: Id name must have 1.
<link type="text/css" href="main.css" rel="stylesheet">
</head>
<body id="header"> // ID
<p id="header2">Poster</p>
<p id="header2">Hello World</p>
</body>
</html>
Class: have multi tag using the same class name. And you can apply style for all class have name is "name".
<p class = "name">abcdef</p>
<image class = "name">......</image>
It's right:
The id of an element should be unique in the entire dom.
The class can be applied to multiple elements.
In css if you use this syntax
.yourClass {
color: white;
}
every element with class="yourClass" have the style color: white.
The id HAVE to be unique for different reason. The thing first jump into my mind its the use of jquery where you identify dom elements with the ID
The id attribute is meant to be unique and should contain a single identifier. The class attribute may contain a space-separated list of class identifiers allowing for cumulative application of css rules.
This is notwithstanding to css engines that do not complain on double ids.
Simple - id is the one that can be used only once and it will be unique. Scripts mostly use id's but it doesn't mean that id will only be used with js and not css. You can used a id as selector to in css.
While classes when two or more divs have the same styling so use class instead of increasing lines of codes.
I know that id selector is used to specify a style for a single element. My question is, if I have a project and it has multiple php files, can these php files contain elements with same id?
Here is example:
php file 1:
...
<body>
<h1 id="test">header1</h1>
</body>
...
php file 2:
...
<body>
<h3 id="test">header3</h3>
</body>
...
css file:
#test
{
color:red;
}
This usage is correct or not?
If they are all rendered in the same HTML page in the browser, it's incorrect as ID should be unique on a single page. If only one is ever rendered then it'll be a-ok.
If you want your Web pages to validate as XHTML or HTML, then you should have unique IDs on your pages.
Yes, that is correct. In fact, that is a good idea. If you do that, you can use the same stylesheet on both pages. As long as you don't combine the files, it's a great idea.
What you are doing is fine, but it looks like class is better for what you are trying to do. You typically use ID to specify a specific element on a specific page and class to apply styling to different elements, on the same or different pages.
Using the same ID on multiple pages WILL work, but imo class is the more proper thing to use.
The id should be unique for each element per (HTML) document.
So, unless you combine the output of your PHP files into a single HTML file there is no problem. In page1 your one h1 heading will be red, in page2 your one h3 heading will be read, etc.
Personally, I prefer CSS classes for appearance and DOM IDs for functions, but they can be mixed.