Menu
In relation to my previous question here. If I am using the below HTML code as part of my web page, where there will likely be many more div tags, how can I target these particular divs in my CSS ? The sample I think works best is [This Answer][2].
I added Id attributes to make the divs more selectable in a large HTML DOM... I don't know how else to make them more distinguishable. If there is a better method for doing so please let me know. The goal is to apply the CSS design to about 6 div tag elements inside a large share point portal website. If there is a more generic way that would be cool so I can easily add more sections and use this format in the future... I can add a class attribute to each element I want the formatting applied to, but I don't know the syntax.
What's the designer professional web way of getting this done?
<div id="projectName">
Realtime Account Activiation
</div>
<div id="divAnnounce">
Announcements
</div>
I have http://jsfiddle.net/eW532/1/
I am using the code below but getting bad results where the entire horizontal length is blue but not the first letter. I'm trying to have an html element use two classes together.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.even_spacing { color: purple;
background-color: #d8da3d }
.first_letter { background:blue;
color:white;
padding:4px 0px 4px 5px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="first_letter even_spacing">
Realtime Account Activiation
</div>
<div class="first_letter even_spacing">
Announcements
</div>
</form>
</body>
</html>
683
in the HTML file put
<LINK REL=StyleSheet HREF="Path/to/your/stylesheet.css" TYPE="text/css" MEDIA=screen> at the top of the page to reference the new style sheet.
in your CSS File put:
#projectName{
style:value;
}
#divAnnounce{
}
The # targets things with ID's if you use a . before it will target the class names,
You can also use both if you need to get specific such as
#idname.classname{
}
If you have another div inside of the divAnnounce you can do
#divAnnounce #yournewdiv{
}
OR
#divAnnounce div{
}
OR
#newdivid{
}
Notice the space inbetween the two targets saying that they are a parent and child
80
<style>
.class1 {
style: value;
}
.class2 {
style:value;
}
</style>
<div class="class1" id="projectName">
Realtime Account Activiation
</div>
<div class="class2" id="divAnnounce">
Announcements
</div>
More info: Class vs ID selectors
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
