/    Sign up×
Community /Pin to ProfileBookmark

Nested CSS Styles

I apologize if there has been a previous thread on this question but I was unable to locate one.

I hope this is a simple question but I am having a heck of a time figuring it out. I have a new ASP webpage that when completed will be populated with data from a SQL table. But that is not the area of my questions. I am trying to format the page with a nice rounded edge frame and inside that frame is where I am running into problems. I want to be able to use CSS to format the content. Such as using a <h1> tag. But I want to set the properties of the tag in my <Styles> session of the page. The problem I run into is the error that says you cannot nest a CSS style inside another style. Now I understand that but I want to have the nice boarder and I want to be able to use styles to control the content. I guess you could say I want the best of both worlds.

Here is the code that I have that is working to produce a really nice round edge box that is nicely formatted to the page.

[CODE]

<%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”ViewOrder.aspx.vb” Inherits=”ViewOrder” %>

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Order Preview</title>
<style>

p.frame, .h1 {
border-radius: 25px;
border: 2px solid #73AD21;
width: 800px;
height: 1400px;
}

body {
color: black;
font-size:large;
}

</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<Center>
<br />
<br />

<p class=”frame”>

<asp:Image ID=”RRLogo” runat=”server” Height=”150px” ImageAlign=”Middle” ImageUrl=”~graphicsRedRock-LogoSquare.png” Width=”150px”></asp:Image>

<br />
Content Goes Here.
</p>
</Center>
</div>
</form>
</body>
</html>

[/CODE]

As you can see the P.Frame works great. But then how do I control the font formatting. Or a paragraph formatting inside the P.Frame Class?

Many thanks in advance for any help that can be provided. If you do provide some solution it would also be great if you provide some comments on how it works and why.

Thanks,
Mike

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@jedaisoulMar 19.2017 — Hi and welcome to the site. There are a number of errors and bad practices in your code:

  • 1. <h1> defines the top level heading in a web page or section. It should not be used for a class descriptor. I.e. ".h1" is incorrect.


  • 2. <center> is obsolete and is not supported in HTML 5.


  • Not strictly errors but unnecessary or bad practice:

  • 3. It is unnecessary to proceed ".frame" with "p". It is only necessary if you want to make the class "frame" behave differently in a paragraph from when in, say, a heading. Why would you want to do that??? Note: "frame" is an obsolete tag, so it probably should be avoided anyway.


  • 4. Multiple <br>'s should not be used for formatting the page. Use CSS.


  • 5. Setting a fixed width of 800px is not very mobile friendly. Roughly half the browsing of the internet is done on mobiles so this matters...


  • Also, CSS cannot be nested (the subject of the thread), so I can't see how any of this is relevant? What were you seeking to achieve by "nesting" CSS?
    ×

    Success!

    Help @mikeadkins spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.20,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...