1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I want to use CSS file and use it in my html site But I need help for it

Discussion in 'CSS' started by alamlinks, May 3, 2015.

  1. #1
    Hello Friends,
    SEMrush
    I want to use CSS file and use it in my html site to make it less waitfull and getting more benefit in Google search. But I am new in css for this I failed to create the css file properly and use it properly.

    In my site header, footer and side portions are same in all the pages. so i needed to use css so that there will not need to write down the same html code in all the pages. But I failed. Plz friends help me to create the css file and how to call it.

    My pages are like the image i am attaching. Plz help me dear.

    Thanks in Advance
     

    Attached Files:

    alamlinks, May 3, 2015 IP
    SEMrush
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    An image is of no help. we need a link to the page or the code please.
     
    COBOLdinosaur, May 3, 2015 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Just create the css-file, and link to it in the pages you want it on? How can you not manage to do that? It's as simple as putting something like this in between the <head></head> part of your page:
    
    <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen">
    
    Code (markup):
    and the CSS-file will have a lot of rules to define how stuff look like on your page, something like this:
    
    p {
      margin: 1em;
    }
    .someclass {
       color: red;
       border: 1px solid blue;
    }
    #someid {
      color: white;
      background: black;
    }
    
    Code (markup):
     
    PoPSiCLe, May 3, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #4
    If you are going to use CSS, or HTML for that matter, you should probably learn to use it properly; or at the very least drag your HTML skills out of the mid 1990's.

    You have no logical document structure, no proper heading orders, bold tags on things that aren't proper titles (basically doing heading's job), tags like FONT and CENTER and attributes like BGCOLOR, WIDTH, HEIGHT, ALIGN and BORDER that have NO business in ANY website written after 1997, proprietary tags like MARQUEE that are an accessibility disaster which is why they have NEVER been accepted into ANY version of HTML, tables for layout, static style in the markup, presentational images in the markup and broken scripted nonsense I probably wouldn't even put on a website in the first place. With nothing resembling semantics you have failed to implement any of the dozens of things one should have before even THINKING about what your screen layoutS will be, much less things like colouration.

    Which you also have failings on with the stock link colors on black making your menu effectively invisible for more than 50% of the population, and a headache for everyone else.

    Honestly, whoever taught you to write HTML that way should be taken 'round back o' the woodshed and put down like Old Yeller.

    Even the doctype and character encoding proudly proclaim "in transition from 1997 to 1998 development practices". That you then go on to state teh content-type TWICE and start pissing on things with that openGraph nonsense... Even the keywords meta is overstuffed gibberish with little content relevance.

    The first order of business would be to restructure the document into something that makes sense (like your content column FIRST), using numbered headings to divide up the sections into sub-sections and sibling-level sections. First take the content and put it into a flat text editor and make the 'order' make sense / be useful as if HTML never even existed. Then one goes through and adds HTML to say what thigns ARE, like headings, lists, paragraphs, etc... Doing so would also mean at this point you do NOT add DIV, SPAN or even worry about your final appearance, as that is NOT what HTML is even for!

    That would come out something like this:

    <h1>
    	<a href="/">
    		Dhubulia Deshbandhu High School
    	</a>
    </h1>
    
    <ul>
    	<li><a href="/">Home</a></li>
    	<li><a href="/about">About</a></li>
    	<li><a href="/headmaster">Headmaster's Desk</a></li>
    	<li><a href="/staff">Staff's Room</a></li>
    	<li><a href="/management">Management</a></li>
    	<li><a href="/holiday">Holiday's List</a><li>
    	<li><a href="/donation">Donation Box</a></li>
    	<li><a href="/gallery">Gallery</a></li>
    	<li><a href="/student">Student Room</a></li>
    	<li><a href="/contact">Contact</a></li>
    </ul>
    
    <h2>Welcome to our site</h2> 
    <p>
    	>DHUBULIA DESHBANDHU HIGH SCHOOL was established in the year of 1953 for the local people by some of respected people who wanted to do something for the locality and tryied to motivated the common man of Dhubulia. This School is established in good location, on the NH-34, near by Dhubulia Rail way station, Just near about 1 KM from the Dhubulia Rail Way Station and Just near the Dhubulia Bus Stand cum Dhubulia Market.
    </p>
    <img
    	src="Images/School 3.jpg"
    	alt="DHUBULIA DESHBANDHU HIGH SCHOOL"
    >
    <p>
    	DHUBULIA DESHBANDHU HIGH SCHOOL was a Madhyamik school in that time and code of the School in the madhyamik section is School Index WBBSE DI-037. Now Higher Secondary section also running in our DHUBULIA DESHBANDHU HIGH SCHOOL and Higher Secondary section's code is WBCHSE code-12026. Vocation stream in H.S section is also running in this school and it's code is WBSCVET code-6270.
    </p><p>
    	There are around 2500 students in this school who are studying in class V to XII. There are around 40 Class room around 5 office room. In this school around 70 teaching stuff are there and around 10 non-teaching stuff.
    </p><p>
    	Computer Education is provided to the students from class-V in this school. In H.S. section there are 3 streams ie. Art, Science and Commerce. One more important thing, Here in this school Vocation stream also available.
    </p><p>
    	DHUBULIA DESHBANDHU HIGH SCHOOL is also famous for the records in the sports' achievement. Students of this school have a great record in sports, in every year, every one knows this in this area. And about NCC, This is the school which has a good number of NCC student and Our Head Master a NCC gazetted officer</span>
    </p>
    
    <h2>Recent Updates</h2>
    <ul>
    	<li><a href="Pratrika.pdf">School's Magazine 'Ankur'</a></li>
    	<li><a href="XI Practical.pdf">Practical Exam IX</a></li>
    	<li><a href="notice.html">1st Summative Exam V-X</a></li>
    </ul>
    
    <h2>Important Contacts</h2>
    D.B.L. Health Centre - 261219<br>
    Dhubulia Police Station - 261211<br>
    Dhubulia BDO office - 261216 / 261222<br>
    Dhubulia Rail Way Station - 260066<br>
    Dhubulia Post Office - 260193<br>
    Dhubulia Library - 261543
    
    <h2>Nearest Institutions</h2>
    Dhubulia Subhas Ch Balika Vidhyalaya<br>
    Dhubulia Shyamaprasad sikhyatan<br>
    Nivedita Balika Vidhyalaya<br>
    Nowpara Rupdaha High School<br>
    Kamarhati High School
    
    <hr />
    
    <a href="#top" class="backToTop">Back to top / menu</a><br>
    Original designed by Md Noor Alam<br>
    Rewrite by Jason M. Knight
    Code (markup):
    The H1 is the heading under which EVERYTHING on the page is a subsection, so that's usually the site title; just as how the name of the paper is at the top of EVERY page in a newspaper despite it being smaller on subpages. H2 indicate the start of subsections of that H1, H3 indicate the start of subsections of the H2 and so forth. The HR indicates a change in topic where a heading is unwanted/unwarranted. 90%+ of the attributes you were using have NO business in a properly written page and were browser proprietary garbage from 18 years ago.

    I would NOT waste space or bandwidth duplicating the menu, and instead just have a 'back to top' link.

    Menus are a list of choices -- short bullet point choices, that belongs in a LIST tag instead of as the run-on sentence you had. Remember anchors are inline-level and provide no structure or even semantic meaning to what you put them on other than "this goes somewhere".

    If I have time later I'll toss together the rest of the markup as STRICT, and put together an example of how I'd handle the CSS layout as well as a breakdown explaining it so you can learn from that.
     
    deathshadow, May 3, 2015 IP
    PoPSiCLe likes this.
  5. Phil S

    Phil S Member

    Messages:
    60
    Likes Received:
    18
    Best Answers:
    4
    Trophy Points:
    35
    #5
    A stunning example of the term transitional.
    You might as well just declare it as html5, it wouldn't make a difference. Oh wait, it would --that's what the "kool kids" do today. That, and you'd have less validation errors, although that wouldn't make your markup any less invalid, sadly.
    ....and what @deathshadow said.
     
    Phil S, May 4, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #6
    ... and here's that rewrite I mentioned -- got waylaid for a few days by other projects. I took a good number of stylistic liberties to address multiple issues with your page. This is probably going to take two or three posts to explain as I'm about to attempt to teach you more in this thread than you are likely to learn in four years of college with web design and development as a major. (Mostly because 99% of the halfwits out there calling themselves educators aren't qualified to open their traps on the subject!)

    http://www.cutcodedown.com/for_others/alamlinks/template.html

    As with all my examples the directory:

    http://www.cutcodedown.com/for_others/alamlinks/

    Is wide open for easy access to the gooey bits and pieces.

    I tried to stay true to your intent of a three column layout, but made it responsive stripping off columns when it was too narrow. Pure green as a component without red doesn't trip the eye's natural response to brightness making that cyan a bit painful to look at and feeling "too bright" -- a brighter color of similar luminance to the grey around it feels more natural and like less of an eyesore. Between that disastrously bad cyan background and the animated GIF's (that I also axed) what you had stylistically felt more like The worst website ever. -- the tables for layout and use of borders was similarly afflicted.

    I used flex-box to make it a 100% min-height design. This means that if the content is shorter than the display the columns will stretch and the footer will still be at the bottom of the display. The column backgrounds are made using a technique known as "faux columns" which uses two dummy DIV absolute positioned to 'fake' the appearance of the columns all being the same length. The column technique used is called "content first" which is important for non-screen and non-CSS targets and for a degree of on-page SEO.

    The responsive design first strips off a column as the screen gets narrower making the left and right columns into a single left one, then eventually goes down to it being a single column. When there isn't enough room for the normal desktop menu I enlarge the menu items on the assumption it's a touch device to give larger 'finger-sized' targets on the screen., then let them wrap normally. At even smaller sizes I do the 'hide the menu' trick, but instead of the uselessly vague "hamburger" icon most people crap all over websites with and the even bigger steaming pile of manure that they do with scripttardery for that or abusing form elements like input[checkbox], I do the show/hide menu entirely using CSS and the :target attribute.

    I redesigned the header as the scaled image just looked like rubbish -- it's one of those things I call "not viable for web deployment". Using some trickery I semi-scale the image to fit to the font-size and put it to the left of the semantic structural heading you should probably have had on the page all along. SAY where people are big, front and center.

    I did not include the social media stuff, I figured that could easily be added later for now I figured just focus on your real content and the various screen layouts. I was thinking that at desktop resolutions it might not be a bad idea to move the social media stuff up next to the heading on the right side, and maybe make it a 'bar' before the menu on smaller displays. That wouldn't be too hard to implement.

    The colours got tweaked as well as I tried to unify things. You had some dark green behind the menu that might as well have been grey, oddball and inconsistent padding, spacing and margins that looked just kind-of slapped together any-old-way (a common problem in table based layouts), and a host of other issues I went through and addressed.

    As all good designs should be I tried to keep it simple and not go TOO overboard with the fancy effects, though I did add some text-shadows to improve legibility and make the hover effects more pronounced.

    I'm going to start working on a breakdown of the how/what/why of the HTML so you can look at the code and follow along in the next post. The post after that will be a CSS breakdown to explain where the real magic of all this is occurring. The CSS is quite complex and there is a LOT you'll need to learn to come up to speed if you care about things like, well as you said "getting more benefit in Google search" -- it's why I made the design semi-fluid, elastic and responsive since more and more people are visiting sites on mobile, and in mobile searches the big G is now pimp-slapping non-responsive sites. I'm hoping they soon do that to all searches and maybe start slapping people for accessibility failings too? One can dream.

    So stay tuned, I'll post the HTML breakdown in a bit.
     
    deathshadow, May 5, 2015 IP
    malky66 and PoPSiCLe like this.
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #7
    Alright, let's explain the markup. I uploaded a copy as .txt
    http://www.cutcodedown.com/for_others/alamlinks/template.txt

    to make it easier to follow along with if you are uncomfortable using "view source"

    Technically I wrote this as HTML 4 Strict, but I put the HTML 5 doctype on it since you may end up having some of 5's garbage shoved down your throat like AUDIO or VIDEO, or end up using something written by halfwits who have no business making websites when they use tags like IFRAME or CANVAS. (I LIKE CANVAS as a JavaScript feature, it has no business even having a tag in the markup).

    This is a departure from my own sites where I'm pretty much staying with XHTML 1.0 STRICT for the forseeable future, but I recognize most people aren't me.

    I put the doctype, HTML, HEAD and META[charset] all on one line just as it is simpler to keep track of and a reminder that really NOTHING should come before the doctype, and nothing should go between the DOCTYPE, <HTML> or <HEAD> for tags. Likewise you'll see farther down the code I put </head><body> together and at the end </body></html> together -- again so I (and other people working on it) are reminded that no tags, CDATA or anything other than whitespace belongs between those tags. You see far too many cases of people repeating those tags, placing things between those tags that don't go there, etc, etc... which could be avoided if this were clearly explained and practiced from the start.

    When tag attributes are long I like to put them on their own lines. It's just clearer what's being declared so you can go to the beginning of the line to see it instead of having to scan the line. This seems to upset some developers, **** 'em.

    I made the document UTF-8 so that you can have proper modern character encoding and mix in non-Latin 1 languages as you see fit. Given the school's location I would THINK some non-English text may show up at some point.

    META name="viewport" is there to tell mobile browsers we know what we are doing so don't lie to the site about dimensions or font sizes. Normally mobile browsers assume sites are NOT written to be mobile friendly and lie about the width and height of the device. MOST people don't include the height line, but a handful of android devices will report the fake height as width when the device is rotated to 'landscape' aspect so it's safer to just include that too. Initial-scale tells it not to zoom in/out automatically. There are other parameters people will incorrectly set that break the ability to zoom -- don't use those. THIS is the version that 99.99% of responsive websites SHOULD be using.

    META name="description" -- like the rest of the text on the page I spent some time punching the copy up a bit to fix the broken Engrish. That said you WERE trying to use description properly which is kind-of a rare thing! Was nice to see at least something being used for what it's for -- a brief description usually used as the text to be shown beneath your SERP listing.

    META name="keywords" -- your original on this was flawed, redundant to itself, and had little relevance to the content of the page. It's called keywords for a reason. It's not keyphrases, or keysentences, It's keyWORDS!!! Seven or eight words or proper names (the only time more than one word makes sense) that exist as CDATA inside the document BODY that you want a slight uprank on; preferably not exceeding 128 bytes in length. (some people say 96 characters or less is idea) Despite wild claims to the contrary this still works IF you obey that rule; if your keywords does not meet those guidelines it is guaranteed to be ignored by search engines!

    LINK rel="shortcut icon" -- despite FF and Chrome supporting it, I still suggets using a .ico instead of a png for the favicon, and you are best off putting it in the root alongside the markup since some older browsers don't obey the LINK and will still go looking for it there under the EXACT name "favicon.ico". Better to have it that way than to let one's error logs fill up with 404's.

    LINK rel="stylesheet" -- I like to give my stylesheets a meaningful name that says what they are for in terms of layout -- like screen.css, or print.css, etc, etc... some of the uselessly idiotic vague names people use like "style.css" make me wonder if there really is 50 points of IQ underneath the 50 pounds of makeup on the art school skin.

    The MEDIA attribute is one of the most important things you should have, and one you REPEATEDLY see developers going "what's that for?" even on big commercial systems like Wordpress or Joomla. If you don't have it you are probably sending CSS to targets where it doesn't apply. For all intents and purposes projection devices and TV's are also screen media, so it's best to include all three. This is particularly true when if you omit TV some browsers like the version of Opera for the Wii will apply it's own style overrides, and in Kiosk mode many browsers report themselves as projection instead of TV. (for Christmas knows what reason).

    But really just think about it, how exactly does your screen layout make ANY sense when printed?

    Title -- really doesn't need much explanation.

    -------- end HEAD, start BODY

    Something I should point out is my commenting style. I don't use opening comments as if you have MEANINGFUL ID's and classes there's no reason to say "start main menu" or "start content" since that's what <div id="mainMenu"> or <div id="content"> quite clearly conveys. I do however use closing comments but you'll notice I say what's being closed in terms of class and/or ID, but don't say "end" -- of course it's the end that's what </div> means! I don't bother with closing comments on semantic tags since those already provide meaning.

    I put the closing comments BEFORE the closing tag as comments between sibling elements can trip rendering bugs in some versions of FF and a lot of headaches in legacy versions of IE. The two nastiest of which being "disappearing content" and "double render" -- the names of which describe exactly what they do. Putting the comment inside the close means you'll never have them between sibling-level tags, so you NEVER have to worry about those errors! (or the ridiculous hoops and hacks I've seen people load down pages with to avoid)

    H1 -- most of the time I try to make the H1 the first content element inside BODY since it is by definition the heading under which EVERYTHING on the page is a subsection. That's why people who use H1 for their content title are completely missing the point and their document structure is gibberish. For example I'm pretty sure that "Recent Updates" and "Important Contacts" are NOT subsections of "Welcome to our site". Those are all subsections of the page and/or site, hence the site name should be the top priority heading in the structure. The rest of them are siblings to each-other structurally.

    That's what headings and "rules" (as in ruler/divisors, not as in "rules" rules) are FOR. To provide STRUCTURE. H2 are subsections of H1, h3 are the start of subsections of the H2 before them, so forth down the line, with HR indicating a change in topic/section where a numbered heading is unwanted/unwarranted.

    Numbered headings do NOT mean "draw text in different sizes" nor does HR mean "draw a line across the screen -- even if those are the default appearance. I cannot say this enough times if you are choosing your markup based on the tags default appearance, you are choosing the wrong tags for ALL the wrong reasons!!!!!

    I put an anchor inside the h1 as it's usually a good idea to make that a link to the home page. For now all the anchors got an empty hash as their target as placeholders for your final URI's.

    Inside the H1 I put the subtext in as SMALL (which means de-emphasis) so it can receive styling as needed. This is where most people would have made a P or a H2 in ignorance of semantics; or at least why tags like SMALL, B and I exist... which is to say what things WOULD be in a professionally written document, NOT what they should look like. Hence why STRONG and EM are NOT replacements for B and I no matter how many halfwits claim otherwise. All four tags have different meanings since you are NOT "emphasizing" a book title!

    DIV#MainMenu -- A menu is typically a list of choices, so that means it needs a list. There's no real order to them so that means an unordered list. The two empty anchors with the hash target #mainMenu and empty # hash are there to provide the hide/show functionality. The text to make them show and be navigable will be added by the CSS when we need that functionality -- there is no point in putting the text in the markup since it's gibberish CSS off. Using the wrapping DIV as the target we can style / show / hide the anchors and the UL off this parent.

    I added a .current class to the home link so it can be styled different to show where you currently are on the site. You'd move that class around to the appropriate anchor on other pages on the site.

    DIV.columnWrapper -- this element allows us to use flex-box to auto-enlarge the page if the content is shorter than the window, and as a hook for applying our 'fauxColumn' DIV. You'll see the first two things inside this section are those two DIV which we'll explain better in the CSS.

    DIV.contentWrapper and DIV#content -- I used an id on #content so if desired it can be hash targeted in the URL (handy if you add an accessibility / accesskeys menu later on). The use of two DIV is part of the 'content first columns' where columns can be added/removed as desired. There are methods for doing this with just one DIV but I tend to find those flawed and fragile (holy grail) or just plain outright not ready for prime-time. (flex box since we're already using flex-box for min-height.)

    What follows inside #content is just headings, paragraph and that plate image. I went fancy with it and floated it the opposite direction as 'leading plates' -- aka floated left, often look goofy as the word-wrap changes in LTR (left to right) languages. If you were working RTL (right to left) then I'd float it left.

    I put the various school codes into BOLD tags to indicate they are proper titles, just as a company name or specification would. (book titles get the italic tag). Again B and I mean "would be bold or italic in professional writing" which is why EM and STRONG (emphasis and "more emphasis" respectively) are NOT 1:1 replacements and all four tags have DIFFERENT meanings.

    Likewise I put ABBR around the use of "NCC" so there's a visual queue and

    You'll also notice I gave the copy a quick rewrite to try and address the broken grammar and remove a number of pointless redundancies. Getting a professional writer on that would help a lot.

    DIV#extras, DIV.firstSection and DIV.secondSection

    I have #extras wrapping the two columns as the hook for hash navigation (often used by screen readers who won't see columns) and so that we can take the two columns and reduce them to one.

    DIV#recentUpdates.subSection -- again a ID so we can target it uniquely, and a class for the common styling. Heading and a list since that's what you have, a new subsection declared by the numbered heading, and a list of recent updates. Again I got rid of the GIF as it looked like something from 20 years ago, and not in a good way.

    TABLE#importantContacts.subSection -- you'll notice a HR before this, that means that we are in a new section of the page that does not have it's own H2. I switched to a table on this as the rows and columns have a semantic relationship as does the heading for it. You have a column of headings saying what things are, and a column of data (phone numbers). That's a semantic relationship and exactly what tables exist to DO! Remember, tables for layout bad, tables for tabular data GOOD. Some people might try to abuse definition lists or some other tags like unordered lists or DIV/span when really that's ... well, just wrong/wasteful. Hence why I laugh at the pathetic code bloat the "Tables are evil" whackjobs make themselves crap all over websites with of late.

    Then in .secondSection we find:

    DIV#nearestInstitutions.subSection -- again just a heading and a list.

    We close out #extras and the columnWrapper, and all that's left is

    DIV#footer -- again a HR before it says what follows is NOT a subsection of the H2 before it. Omitting that HR would literally mean that the content of #footer would be part of "Nearest Insitutions" which it clearly is not.

    The anchor is not part of the disclaimer, so another HR separates those semantically.

    Close out #footer, close out the BODY and HTML tags, and we're done with the markup.

    Notice that I pretty much avoided saying what anything is ACTUALLY supposed to look like and instead said what things ARE. That's semantic markup in a nutshell and why this will index well for search and be accessible. If you look at the page without the CSS:

    http://www.cutcodedown.com/for_others/alamlinks/templateNoCSS.html

    You'll notice the page while no prize pig is still functional, usable, and not that hideous even if it is a bit plain. THAT is what search engines see, THAT is what screen readers and other non-visual user agents see, and is the cornerstone of making an accessible website.

    Remember, there is more to building a website than what it looks like on the screen you just HAPPEN to be seated in front of! That's also why the people who dick around drawing goofy pictures in Photoshop before they even have semantic markup of content or possible future content have the entire development process back-asswards!

    I'm out the door for a bit, but when I get back I'll break-down the CSS to explain that as well as that's the actual COMPLICATED part and will need a GREAT deal of explanation.
     
    deathshadow, May 5, 2015 IP
    malky66 and PoPSiCLe like this.
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #8
    Alright, on to the screen media stylesheet.

    When I make the stylesheet I start with the lowest common denominator. A LOT of "names" in the industry right now will tell you that's mobile... and I tell you that's bullshit! Utter and complete nonsense in fact.

    Mobile devices in the current sense are smart -- smarter than most desktop browsers. We can use media queries to target them so why would you make what can be targeted with NEW tech the starting point? Again, progressive enhancement exists so that we ADD functionality while it can gracefully degrade on stuff that lacks it. As such the SMART starting point is browsers that don't support media queries!

    Which browsers not supporting media queries are going to be most of the traffic for such graceful degradation? OLDER DESKTOP BROWSERS like IE8/earlier. That's our starting point -- desktop resolutions and desktop layout. THEN we use media queries to strip off the desktop formatting.

    The first thing I always start with is a "reset" -- which is a brief bit of code to zero out and make consistent values that are inconsistent by default across browsers. The reason the defaults are inconsistent stems from HTML's origins as a device neutral language. The idea was to say what things ARE or WOULD BE in professional writing so that the "user agent" -- what today we call a browser -- could then style it however it thought was best to convey that meaning. At the time not all devices could even show bold text, or italic, or underlines, or show headings in different font-sizes. Headings and HR's would be indentation triggers for example, teletype might show underscores before and after the text instead of underlining it, or put tilde's around italics or asterisks around bold.

    As such up until CSS came along browser makers had full leave to style tags however they felt was best! Naturally when left to their own devices multiple rivals will always go their own directions.

    There are smaller resets like the so called "universal reset" of "* { margin:0; padding:0; border:0; }" but that can wreak havoc with trying to style certain elements like inputs (thanks actually to Mozilla and Microsoft both applying their own box-model rules to INPUT, SELECT and TEXTAREA) which is why I don't use that one. There are larger resets like Eric Meyer's "Reset Reloaded" that is so massive it's almost a framework unto itself, wastes time setting values I would just be changing anyways, and honestly is single handedly responsible for why resets have a bad name. Resets like that are why many developers say "don't bother" when without a reset you end up using more code.

    A real laugh when the dipshits saying don't use a reset then go and use a framework that contains a reset...

    The one I use (developed by Dan Schulz) is a nice safe middle-ground. At a quarter K it doesn't break the bank on bandwidth, and it doesn't interfere in anything important.

    HR -- as mentioned horizontal rules are in there for document structure. Usually for the screen version of a site we have other appearance to convey this, so I just hide them. Again, they are there for semantics and non-screen media, NOT to say "draw a line across the screen"!

    -text-size-adjust -- these two vendor specific variants are akin to the viewport META in the markup. Basically they are there to tell mobile browsers we know what the **** we are doing in terms of font sizes. These are behind a media query as I've not come across a device wider than that which needs it, and if you send it to desktop Safari it breaks the user's ability to zoom. Which is a special kind of stupid when mobile Safari it does NOT break zooming. :/

    html, body -- setting these to 100% height allows us to create the 'sticky footer' style min-height layout.

    body -- I like to set the font size used across the entire page up front and center, so later on we only need to change it for headings. I laugh when I see people changing the fonts size every five lines of code. The background colour is actually for the content area's side-bar when the screen is too wide since I made the content area semi-fluid. (has a max-width). The Min-width for non-CSS3 browsers tells older browsers (IE 7 and 8) not to go so narrow that the layout breaks.

    The font size is declared in % so it's based on the browser default, which can range anywhere from 12px to an almost unlimited limit. While MOST systems use a 16px default, the laptop I'm on right now is set to 20px, my media center uses 24px, and using % or EM for font measurements and EM for padding and any fixed widths/heights means users like myself don't have to go diving for the zoom just to use the page. Hence why declaring fonts in PX is accessibility rubbish; anyone making lame excuses for doing so (other than perhaps during an image interaction) probably shouldn't be flapping their gums.

    I also like to use taller line-heights than the default as it improves legibility. Typically I just play with that depending on the font-face. Arial looks good at 150%, while Segoe UI looks nice at 170% or more.

    display:flex and flex-direction are there for the min-height layout. "Flex-box" is a new concept that basically allows us to have things expand to the same height, or to fill an area. We still have to use the vendor specific prefixes for Safari and IE10, but thankfully Chrome and Firefox have put a stop to such BS on their browsers. IE9 and earlier don't support flex-box, so they won't get the min-height design; OH WELL. Oh noes, the footer isn't sticky in browsers people shouldn't be using anyways.

    If the site still WORKS for those users, I wouldn't get worried about them not getting things like sticky footers, text-shadows, box-shadows or rounded corners. Some people will tell you to crap all over your site with javaScript to try and implement that stuff: FORGET IT. Waste of time, waste of effort, waste of bandwidth, and quite often does more harm than good.

    Missing features that don't break USING the page in older browsers is called "graceful degradation" -- and it's WHY you are supposed to start with just the text, then add the markup, and then style it for all the different targets, and then enhance it with scripting (if any). It's called "progressive enhancement" so that when/if any of those steps along the way are missing/unavailable or intentionally blocked you are still presenting a useful page to users.

    h1, #mainMenu, #footer -- The relative position and z-index are there so things like box-shadow on the column-wrapper and faux-columns are properly chopped off/overlapped. It just makes 100% sure those elements remain "on top" of everything else on the page should there be overlap. The flex-shrink property is there to address some browsers having a broken flex-box implementation (It's still VERY young a concept) making sure these elements do not try to auto-expand to the available height.

    h1 -- I comment the use of overflow and zoom a lot as they tend to be needed a lot. Normally a wrapping tag will ignore the height of floats inside them, adding overflow:hidden (which normally means chop off anything positioned that would draw outside the box) makes the element in modern browsers 'wrap' floats. Zoom is a IE specific property that trips a render state called "haslayout" that does the same thing.

    Some people will use a class called "clearfix" or put a 'clearing DIV' in the markup for this -- that's pointless code bloat. This does the same thing.

    The left padding makes room for the image. It is declared in EM as again, the layout is "elastic" with the sizes of sections adjusting to the font-size. The image being presentation and not content is placed as a background, then background-size is used to scale the image to fill the area. I made that area the same width as the side columns so it looks nice and lines up.

    From there it's just a border and colouration.

    H1 a -- the anchor being set to display:block fills the available width, and some padding to make it look nice. From there it's just style and colouration.

    You'll also notice I set up a few CSS3 transitions. These just smooth out the hovers states to be a bit less jarring. Like most animations I really say don't let them take more than third of a second as while they are cute, if they take too long they become more hindrance than help.

    The bottom got a fraction more padding as the font in use doesn't quite align as expected, and the larger over smaller font actually creates an optical illusion of the bottom gap being smaller as well. Sometimes you have to pull this trick not because it's mathematically right, but to deal with how the eye perceives (or more specifically incorrectly perceives) things.

    Perception is so ridiculously fragile, it's a miracle we understand even the simplest aspects of the world around us.

    The left border and width actually overlaps the scaled image chopping it off. It's impractical to try and do the math precise here with the dynamic font size so that's the best way of handling it IMHO without resorting to PX fonts or killing off the idea of scaling the image the same as the column width.

    h1 a:active,
    h1 a:focus,
    h1 a:hover
    -- just the nice hover colours with a hint of glow. I target all three of these states together so people using keyboard or alternative (non-mouse) navigation get the hover states too. Technically :focus is supposed to be the keyboard state, but some older browsers use :active (which is SUPPOSED to mean it's the last thing clicked on) for that as well. If you're going to have hover states, use all three!

    h1 small -- setting this to display:block moves it to it's own line. I added some letter-spacing to make the font look a bit fancier than it actually is (sneaky trick that works quite well with a lot of 'plain' fonts), then adjusted the text-size so that it's the same width as the first line. (roughly, you don't need to be perfect on this).

    #mainMenu -- center alignment, background, border... nothing too hard to understand here.

    #mainMenu ul -- I pad the top so I can pad just the bottom of the anchors. This allows us to more easily handle the style when/if it word-wraps. We also pull the bullets off it with list-style.

    #mainMenu li -- setting these to display:inline puts them all on one line and strips MOST of the formatting off them. IE8 can have a bug called the "staircase effect" if these are floated or set to inline-block, and legacy IE can't inline-block a block-level element, so whenever possible you are better off just setting the LI in a menu to display:inline and then pretending they don't exist.

    #mainMenu li a -- I use the LI so that the two anchors outside the list don't receive this style since those are for the mobile layout. Setting the anchor to inline-block allows it to receive top/bottom padding and height calculations (something an anchors default display:inline is supposed to make be ignored)... and again there's that padding I mentioned.

    #mainMenu a -- these rules on the other hand I want all the anchors inside #mainMenu to get, such as no underlines, color and transitions (animations).

    #mainMenu a.current -- just making it white so you know what page you are on.

    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover
    -- as before all three states for the hover color. I also added a wee bit of glow to it with text-shadow just to make the hover a bit fancier.

    h2,
    #importantContacts caption
    -- these share the same basic padding, fonts and colours so style them together. (the ability to share properties across multiple selectors being why a lot of the crap like LESS or SASS serves little legitimate purpose apart from covering up developer ineptitude!)

    #extras h2 -- the ones in the sidebar get a little different padding from the content area.

    p -- I like to set paragraphs to be padded instead of using margins so that I don't have to worry about margin-collapse. Space before them is usually set either by the parent wrapper like #content, or the sibling-level tag before them like the heading or another paragraph.

    .columnWrapper -- since there are floats up above I like to do a clear just to be sure. The relative positioning allows the two faux-column DIV to treat the edges of this div as 0,0 instead of top:0 left:0 being the upper left corner of BODY. I manually set the z-index lower than the header/footer stuff just to be sure we're underneath those (some would say use negative z-index, that's unreliable cross-browser). Since there's positioning we also need haslayout and overflow to make sure things are chopped off and positioned properly.

    The auto-margin centers this element in modern browsers, but we also need align-self and the vendor specifics to make sure older flex-box implementations center this as well. Setting it's actual flex property to "1 0 auto" means that "1" this element will be the one to 'grow' to fit the page, while the h1, #mainMenu and #footer do not grow. "0" it will NOT shrink to fit it's content, and "auto" means we aren't trying to fix it's height proportionally. (the last of those being a painfully complex and ultimately useless concept in real layouts... leave it auto)

    The max-width is there to make the columns semi-fluid, which is to say preventing them from auto-expanding so wide that long paragraphs in the content column are hard to follow.

    From there it's just border, background-color and I added a box-shadow to create the gradient at the sides when the screen is more than 80em wide.

    ... and remember that EM is based off the default font size, so that maximum width is based on the needs of the content.

    * html .columnWrapper -- IE6/earlier can't do min/max-width, so we shove a fixed width at them. OH WELL, they should be thankfull anyone takes time to even think about them anymore!

    .fauxColumn1,
    .fauxColumn2
    -- these both share a lot in common. They are both set to the width of our side columns and absolute positioned on the bottom. I set them to have a massive height that is chopped off by the overflow:hidden -- hopefully you'll never have a content area that's so ridicuously tall, but if you were to you'd have to up those heights. You could TRY height:100% but with no fixed height on the parent I'd not rely on it reporting itself properly -- likewise you could try top:0 and bottom:0 together, but legacy IE chokes on that. This method works.

    Each of them then gets declared again for the parts that are unique -- one is left positioned, one is right positioned, and they each get their own little border. This FAKES the appearance of the columns being equal heights even when they are not, while still allowing the columns to be elastic width (em) with the content column still fluid (whatever space is left over)

    .contentWrapper -- this is where the magic starts. The outer wrapper for the content is set to float:left and 100% width. This leaves 0px free on the left for another float to fit, so naturally things won't float next to it... remember that for later!

    #content -- the side margins pushes the content in away from the edges to make room for the columns to be drawn in.

    .firstSection,
    .secondSection
    -- both of these are the same width and floated left, with relative positioning so they depth sort over both .contentWrapper and the two faux-columns... but how do we position them over .contentWrapper which is in the way?

    Negative margins.

    For .firstSection if we give it a negative margin equal to it's width on the right side, it's width as reported to other elements 'in flow" like with floats is reduced to zero while it is still DRAWN (rendered) the same way. This pops it up next to .contentWrapper on the right side since a 0 width element will fit into that 0 width gap. Yeah, I know. Sounds crazy, but it works like a charm. We can then use left:-100% to slide it all the way over to the other side of .contentWrapper for it to be drawn there.

    .secondSection gets the same treatment, just with the margin on the other side sliding it over .contentWrapper on the right.

    Doing it this way means we don't need flex-box (flex inside flex is still unreliable and there is no flex prior to IE10), should work all the way back to IE 6 (possibly even earlier), and allows .columnWrapper to see the 'height' of all three columns meaning it doesn't matter which one is the longest, the layout will adjust no matter what you plug into it!

    ... and that's the magic of a content-first three column "two elastic one fluid" layout. IT's more reliable than trying to use % width columns, it means the most important content is first for best usability and search, and it also means we have CSS rules we can strip off when it comes time to make it mobile friendly.

    .subSection -- just a simple margin around them.

    .subSection a -- color them to be useful.

    .subSection ul -- those lists all get the same general style. I shorten the line-height then:

    .subSection li -- pad the bottom of the LI so that they are more clearly separate items.

    #importantContacts -- being a table we need to space this a bit differently, including margin based centering for when we go down to single column layout. (more on that in the next post)

    #importantContacts th -- simple padding to make sure the title and phone numbers don't run into each-other.

    #importantContacts th,
    #importantContacts td
    -- these both get much the same formatting in terms of padding them apart, text-alignment and vertical-alignment.

    .trailingPlate -- again right floated, I use zoom to fix a minor bug in IE7 with the image placement. I also set a opacity transition of less than a third of a second so on 'hover' it will look like the image lightens.

    .trailingPlate img -- the vertical-align removes a "3px gap" in some browsers caused by image being an inline type element. I gave it a rounded border and box-shadow just to spruce it up a little, and set a centering margin should you decide to have text after the image inside a plate.

    Then the hover states set a 20% transparency for the 'light' effect.

    #footer -- simple padding all-around, border-top, colors and text-shadow aren't anything to need a lot of explanation. I set the text-align:right so that everything but the 'back to top' link is on that side.

    #footer a -- naturally since we have a different background-color the footer needs the anchors styled to be visible/useful.

    #footer .backToTop -- floated left so it's on that side and the rest of the text ends up on the same 'line', with a bit of top padding so it's centered opposite the two lines on the other side. Naturally as you change your footer you'll want to play with this.

    ... and that's the base CSS for the desktop 3 column screen layout. In the next post I'll break into the media queries that turn this into a proper responsive layout.
     
    deathshadow, May 5, 2015 IP
    malky66 and PoPSiCLe like this.
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #9
    Ok, on to the media queries. All of these 'breakpoints' were determined through experimentation to meet the needs of the content. I don't believe in "grids" or arbitrarily "designing before you have content" like PSD jockeys and the people who sleaze together off the shelf templates do for the simple fact that the end result is that you end up having to write your content to the layout, limiting what you can do for content.

    max-width:70em -- at this point we just want to remove that min-width since we know we're in media query capable browsers, and to let the .column-wrapper go full width without borders since those borders look silly when the window is smaller than the max-width.

    max-width:58em -- we strip the right column off by removing the margin from content, hiding the faux-columns, stripping the floats and column behaviors off .firstSection and .secondSection, and then making #extras (which wraps both) our actual content column by giving it the width and negative margin. Boom, two columns on each side into a single column on the right!

    max-width:54em -- at this point the menu would wrap. At that point I kind-of assume this might be a touchscreen device so I like to make the menu links "fingertip sized" to improve the usability. I give them nice visual button effects and hover states while at it.

    max-width:50em -- when we get to here the image would go under the text, but since that image is just presentation let's simply remove it, remove the border and get rid of the floats so it's just the text centered up top.

    max-width:38em -- alright, we're getting REALLY tiny now. I pull the border off the h1 as we're going to add the show/hide to the menu, and I shrink the h1 text and padding to better fit the screen.

    The #mainMenu>a means I'm targeting just the anchors that are direct children of #mainMenu, which is .showMenu and .hideMenu. They both get left aligned text, slightly larger text, big padding and a darker blue background, along with a coloured hover state. They also pick up the text-color and text-shadow from the normal anchor declaration used in the desktop layout.

    #mainMenu>a:before is floated right so that our generated triangle symbols are, well.. on the right.

    :before and :after are VERY powerful ways to "generate content" from the CSS. I prefer only to use generated content for things that only serve a purpose when CSS is active or in very specific CSS cases like media queries. The show/hide menu most definitely fits that description.

    So using :after we add the "Show Menu" and "Hide Menu" text to the appropriate anchors, and :before to add the up or down facing triangles using UTF-8 escape codes.

    :target is another REALLY powerful element that basically says "if the hash in the URL is the same as this element's ID, this state is true". We can leverage this to show and hide the menu.

    First if #mainMenu is NOT at the end of the URL we hide the UL and .hideMenu text, and if it is we hide the .showMenu text. We then reverse that logic so that if it IS the target we show the UL and .hideMenu elements...

    ... and boom, that's ALL the code needed for that 'mobile friendly' menu! Hell of a lot simpler than the scripttardery and input element abuse I've seen floating around out there. Big tip, if someone says adding JS is going to make something more mobile friendly, they're more full of manure than Biff Tannen's 1946 Ford Super De Luxe.

    This is also the point we need to just pull the plug on having two columns up top... so we pull floats, widths, margins and positioning and hide .fauxColumn, adding a border to the bottom of #content to make the transition from "content" to "extra stuff" clearer. I then pull a cute trick to make the two sidebars two columns BELOW the content by simply floating .firstSection, letting .secondSection take up any remaining space. The 'overflow:hidden' on .secondSection tells it not to de-indent should it's content be longer than .firstSection.

    max-width:28em -- our smallest media query just pulls the columns off .firstSection and .secondSection, and gets rid of the left/right divide between .backToTop and the rest of the content of #footer.

    ... and that's how you make a semi-fluid elastic responsive gracefully degrading search friendly mobile friendly device neutral accessible website from top to bottom. No stinking frameworks, goofy HTML 5-tardery, scripttardery or other bits of nonsense needed. (hell you could even deploy this as HTML 4 strict if you wanted!)

    I know that's a LOT to take in and read, and I imagine language barrier may be a slight issue, but hopefully you (and others) can learn from what I just did.

    Any questions, fire away. Hope this helps, or that you can at least glean some information useful to you from it.

    ... and as I said, four posts that cover a BUNCH of things I bet you would NEVER learn in a four or even six year college level program.
     
    deathshadow, May 5, 2015 IP
    malky66 and PoPSiCLe like this.
  10. alamlinks

    alamlinks Active Member

    Messages:
    978
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    90
    #10
    alamlinks, May 8, 2015 IP
  11. malky66

    malky66 Acclaimed Member

    Messages:
    3,846
    Likes Received:
    2,191
    Best Answers:
    85
    Trophy Points:
    515
    #11
    Have you read any of @deathshadow 's answers, he's completely re-written the whole site for you how it should be done and you haven't even said thanks, how much more help do you need? The crap that you have built should be completely thrown away.
     
    malky66, May 8, 2015 IP
  12. digi_media

    digi_media Active Member

    Messages:
    99
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    68
    #12
    Go to website www.w3schools.com, and get help regarding every issue you are going through. Simple...
     
    digi_media, May 27, 2015 IP
  13. malky66

    malky66 Acclaimed Member

    Messages:
    3,846
    Likes Received:
    2,191
    Best Answers:
    85
    Trophy Points:
    515
    #13
    I can't believe people still recommend that crap hole of a site for learning anything, have you seen his site? it looks like he gleaned all his "skills" from there.
     
    malky66, May 27, 2015 IP
    deathshadow likes this.