Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post

    Applying specific CSS only within a div/ certain part of html page

    Hello,

    Is there another way to put style only within this div (not changing the other styles of the other content in the same HTML page), as in not having to write them repeatedly in the <p> and <h2> tags? The <div> style is fine.

    Code:
    <div style="width: 800px; height: auto; background-color: silver; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px; border: 5px double blue;">  <!-- border: 1px double red; -->
    
      <h2 style="font-family: Calibri, Cambria, Arial;">Beachwerks</h2>  
    
    <p style="font-family: Calibri, Cambria, Arial;">Welcome to the Beachwerks organization; our goal is dedicated to studies relating to the outdoors.  We also do other stuff.</p> 
    
     <h2 style="font-family: Calibri, Cambria, Arial;">Computer Solutions</h2> 
     
    <p style="font-family: Calibri, Cambria, Arial;">Need help?  Helping to solve computer problems, ranging from internet connectivity to disk fragmentation. </p> 
    
     <h2 style="font-family: Calibri, Cambria, Arial;">JavaScript Advancement</h2>
    
      <p style="font-family: Calibri, Cambria, Arial;">Working to improve and expand on JavaScript, including JSON, JQuery, JavaScript DOM and other frameworks. </p>  
    
    <h2 style="font-family: Calibri, Cambria, Arial;">Beach Projects</h2> 
    
     <p style="font-family: Calibri, Cambria, Arial;">Research on the studies of seawater and seawater salt content.  Using various forms of desalination and water-pressurized osmosis, more efficient ways of separation can be found; this means that more energy is conserved, without pollution.</p> </div>
    I will not use external CSS for this occasion. Also, putting the CSS style script at the top of the page will affect all the code in the page. I am thankful for the replies, in advance.
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #2
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Couldn't you put the css at the top of the page but assign the styling to a particular element using an ID (#) and then wrap whatever part of the page you want styled that way in that div ID?

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    Css

    You could create a unique ID
    Code:
    #silver {width: 800px; height: auto; background-color: silver; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px; border: 5px double blue;
    font-family: Calibri, Cambria, Arial; }
    to apply to <DIV id="silver">...</DIV>
    and or could "contextually" (nested in that div) have
    #silver h2. #silver p {font-family: Calibri, Cambria, Arial; } or
    "collectively" assign h2, p {font-family: Calibri, Cambria, Arial; }

    Remember multiple space-separated classes can be assigned to same element.
    Last edited by waxdoc; 06-07-2012 at 02:34 AM.

  • #4
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by waxdoc View Post
    You could create a unique ID
    Code:
    #silver {width: 800px; height: auto; background-color: silver; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px; border: 5px double blue;
    font-family: Calibri, Cambria, Arial; }
    to apply to <DIV id="silver">...</DIV>
    and or could "contextually" (nested in that div) have
    #silver h2. #silver p {font-family: Calibri, Cambria, Arial; } or
    "collectively" assign h2, p {font-family: Calibri, Cambria, Arial; }

    Remember multiple space-separated classes can be assigned to same element.
    I appreciate the response; so now the div styling is separated between two classes, therefore making is simpler to change the style without having to rewrite it out of the HTML page. I will try this out soon; hopefully this works out.
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    3 ways to apply CSS

    Should have pointed out that CSS style rules can be

    (1) an external text file (containing no HTML tags) that is linked to in <HEAD>
    like so: <LINK REL="stylesheet" TYPE="text/css" HREF="filename.css">
    This is most efficient, but less "specific" than embedded or inline style rules.

    (2) embeded in doc using HTML taqs:
    <STYLE TYPE="text/css"> selector { property: value; property2: value2; }
    </STYLE>

    (3) least efficient, but most "specific" are the inline rules you had using "style" attribute in opening tag.

    Think "cascading" -- more specific rules override less specific.

    For the linked and embedded CSS, you specify the "selector" to which style rules will apply (this can be any HTML element -- such as p, h1, ul, a ... or you can define your own selector using a period for .class or hash mark for #ID). The ID should be unique to the page. classes can be used multiple times on page. The rule is encased in { curly braces } and colon separates the property: value; and is ended by semi-colon.

    Like any attribute inside opening tag, the inline syntax is <p style="property:value; property2:value2;">equal sign = "quoted"</p>

    This is stated roughly, with CAPS for emphasis only. There are plenty of CSS/HTML books and online references and tutorials that will help you get the gist of how it works.

    P.S. -- always end font list with generic one such as "sans-serif" like Arial.
    Last edited by waxdoc; 06-08-2012 at 03:54 AM.

  • #6
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    I finally tested it out now. You can put a div or a div ID and classify a font-family only within the div. Any font will be affected unless you add an inline CSS style with the text.


    For example:
    Code:
    <html>
    <body>
    <div style="font-family: Cambria, Arial;">
    <h2>Here is Something Random</h2>
    <p style="font-family: Calibri, Times New Roman;">My boyfriend ate the dishwasher.</p>
    </div>
    </body>
    </html>
    Validation probably does not matter, as the Transitional Doc-type was used. Maybe the more localized code, the greater the effect on how the computer analyzes it.

    You were right; thanks for spending time on this matter.
    Last edited by Taro; 06-10-2012 at 12:09 AM.
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #7
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    check this out

    You should read something about CSS ("Cascading Style Sheets"). Several things affect "specificity" of style rules. Generally, the external style-sheet is overridden by the embedded style-sheet, and both are overridden]n by an inline style attribute assigned to an <HTML> tag -- the "cascading" effect.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body { color: black; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: medium; }
    h1 { font-size: 1.6em; text-align: center;}
    h2 {font-size: 1.3em; text-align: right;}
    #silver { background-color: silver; color:orange; }
    h3 { font-size: 1.2em; text-align: left;}
    p { font-size: 1em; text-align: left;}
    .sans { font-family: Calibri, Arial, sans-serif; color: red; }
    .serif { font-family: Cambria, "Times New Roman", Times, serif; color: purple;  }
    </style>
    </head>
    
    <body>
    <h1>Body text</h1>
    <div id="silver" class="serif">
    <h2>Here is &lt;h2&gt; Something Random in &lt;DIV&gt;</h2> 
    <p class="sans">My boyfriend ate the dishwasher.</p>
    
    </div>
    <h3><span class="serif">Cambria looks like "serif"</span> and  
    <span class="sans">Calilbri
     looks &quot;sans-serif.&quot;</span> Give the browser choice of similar, alternate fonts and include generic at end.  Do not mix &quot;serif&quot; with &quot;sans-serif.&quot;</h3>
     <p class="serif"> How common are  <span class="serif">Cambria</span> and <span class="sans">Calilbri</span>?  You might need to look into CSS3 @ font-face to import special Web fonts. </p>
    </body>
    </html>
    Last edited by waxdoc; 06-10-2012 at 03:23 AM.

  • #8
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    do NOT use MULTIPLE inline styles

    When I first approached Web page construction circa 2000, there was no talk of CSS -- just HTML, which was overwhelming enough for starters. Now professors of introductory Web courses are faced with a dilemma trying to concentrate on explaining the HTML structural mark-up, while also handling appearance. One professor might use the horrible, deprecated <FONT> tags and another multiple inline CSS STYLE="property: value; property: value:" attributes (as you did).

    Using multiple inline style attributes is just as bad as multiple <FONT> tags and should be avoided -- unless you want to dynamically alter the element's style using JavaScript or cannot otherwise resolve conflicting stylesheet rules.

    The above example was supposed to move you from fully defining the same font-family list in multiple style attributes of individual tags to, at least, defining the fonts as a .class. But, in that example, the class="serif" or class="sans" still had to be individually applied to elements.

    What you should do is STOP and stand back (like an artist working on a big painting) to get a broader perspective. What would be purpose and "product displayed" of given Web site. Would there be a lot of text (maybe requiring a 3-column layout)? Could it be a "responsive" scalable single-column layout with navigation at top? When you get a sense of the layout, develop a comprehensive CSS file for all your HTML elements. Just like designing a book for print, you do not want to use too many different font-family styles. In any font-family list you define your preferred font first, then give browser alternate similar font names, and end with generic name (e.g., serif or sans-serif).

    In your CSS file you can define overall font-family for entire page, designate distinct font styles for h1-h6, p, oil ul, etc. You can then define more specific "contextual" font (and other) styles for certain sections of page.

    See for example, Jason Confrere Teague's books "Speaking in Styles" or "CS3 Visual Quick Start Guide" or
    http://webdesign.about.com/od/beginn...a/aa100107.htm
    and/or you can copy a stylesheet from an existing Web site


  •  

    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
    •