dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Nested CSS Styles

  1. #1
    Join Date
    Mar 2017
    Posts
    1

    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="~\graphics\RedRock-LogoSquare.png" Width="150px"></asp:Image>
        
        <br />
        Content Goes Here.
    </p>
        </Center>
        </div>
        </form>
    </body>
    </html>
    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

  2. #2
    Join Date
    Oct 2013
    Posts
    1,695
    In dog beers I've only had one.

  3. #3
    Join Date
    Mar 2012
    Posts
    3,763
    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?
    Last edited by jedaisoul; 03-19-2017 at 02:02 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles