• Resolved mzimmers

    (@mzimmers)


    Hi –

    I’m having some trouble understanding the following CSS code (lifted from my theme’s style.css file):

    h1, h2, h3 {
    	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	font-weight: bold;
    	}
    
    h1 {
    	font-size: 4.5em;
    	text-align: center;
    	}
    
    #header .description {
    	font-size: 1.5em;
    	text-align: center;
            color: #B8C5C7;
    	}
    
    #header h1 {
    	font-size:30pt;
    	text-align:center;
    	padding-top:0;
    	}

    It’s this last bit I’m struggling with. Does the syntax mean that the information within the braces applies to code that is in a division called “header” and is of type h1?

    More questions will almost certainly follow from this, so if this isn’t the right place to ask such questions, please let me know

Viewing 10 replies - 1 through 10 (of 10 total)
  • moshu

    (@moshu)

    The first two declarations apply to EVERY h1 (h2, h3) everywhere in your blog/site.

    The 3rd one defines the “description” class INSIDE the “header” ID div, and the last one the h1 ONLY in the div ID header.

    Thread Starter mzimmers

    (@mzimmers)

    Thanks, Moshu. So, if I’m interpreting this correctly, where to put a formatting specifier seems to be more of a function of the scope you wish that specifier to cover, rather than of coding convention. (In this particular instance, it took me awhile to find where the text size for h1 inside the header was being set.)

    Another example of my confusion on this is where my blog title is being forced down a couple of inches on the page. I can’t find anything in the inline html that looks like it does that; I’m wondering if it’s buried somewhere in my style sheet?

    Adam Brown

    (@adamrbrown)

    That’s what style sheets are for. It shouldn’t be in the HTML unless it’s using outdated standards.

    May want to google a quick CSS tutorial (possibly an XHTML one too). They’re all over the web.

    Thread Starter mzimmers

    (@mzimmers)

    Thanks, Adam. I did use a nice tutorial from this site:

    https://www.w3schools.com/css/default.asp

    and it was very helpful in some areas. Where I get confused is when the CSS styles a particular kind of text in multiple places, as it did in my example above. (I edited out some stuff in the middle of that snippet for brevity.) The style sheet in my theme is 10 pages long, and it’s not always easy to find all the places where something affects my HTML. And, since it’s CSS, I can’t see its effect merely by looking at the HTML code.

    Right now, for example, I’m trying to find out why my title appears a couple of inches below the top of the page. I can see that it was done to make room for an image, but now that I’ve commented the image out, I’d have expected the title to go to the top, but it’s not. Finding the CSS code that is causing this behavior is less than obvious.

    The page in question, by the way, is:
    scopedin.com

    Any light you could shed on this would be most helpful. Thanks again.

    Adam Brown

    (@adamrbrown)

    Glad you looked through the w3c thing. Lots of folks come here for help without doing their part first.

    Look for this:

    /* Begin Structure */
    body {
    	margin: 0 0 20px 0;
    	padding: 0;
    	}
    
    #page {
    	margin:auto;
    	padding-top:104px;
    	width: 750px;
    	}

    And fiddle with #page’s padding-top.

    Incidentally, try the “Web Developer” extension for Firefox. Makes answering questions like yours very quick.

    Thread Starter mzimmers

    (@mzimmers)

    Aargh. OK…I guess that wasn’t quite as obscure as I thought.

    Thanks for taking the time to look at my code, Adam. Since you did, I’m curious as to your impression of this particular .css file. Is it conventional to spread stuff out like the author did?

    I’m still new to a bunch of this stuff…I’m reasonably conversant with basic HTML, but I’m new to PHP and CSS, as well as to WP. I’m still trying to get an overall development model straight in my head; hopefully, once I do this, I can answer some of my own questions.

    I’ll look into the Web Developer extension for Firefox, though I normally use Safari. While we’re on the subject of tools, may I ask what you use for editing a .css file? I’m using Dreamweaver “just because,” but I’d like to hear of better tools if they exist.

    This is great…I’m just about done fooling around with the top of my page…soon I can begin on the sidebar. And from there…it’s going to be mostly content!

    Thanks again…

    mz

    Thread Starter mzimmers

    (@mzimmers)

    I just downloaded the Web Developer extension, and all I can say is, “oh wow.” That is truly amazing. Thanks so much for suggesting it. I’m still interested in your input on the above matters if you care to reply. Thanks again…

    Adam Brown

    (@adamrbrown)

    Yes, for WP themes, you’ll often see CSS files like that. I guess they do it to make it easy to modify, although I don’t care for doing it that way.

    As for software, I use Notepad++ for editing PHP, HTML, and CSS files. It’s a basic text editor (like normal notepad), but it also has syntax highlighting, which makes life way, way, way easier. And it’s free. Google it.

    With that web developer thing, check out the “View Style Information” thing on the CSS tab if you haven’t already. Have fun.

    moshu

    (@moshu)

    I use PSPad… but as far as I know it’s only for PC. Not sure whether Notepad++ has Mac version or not. The Codex has a list of “text editors” for both kind of machines.

    Thread Starter mzimmers

    (@mzimmers)

    Thanks for the suggestions, guys. I’ll mark this topic resolved.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘interpreting this CSS code’ is closed to new replies.