I want to make a demo of some sort online study book. I am trying to use bootstrap as a core for my styles but it feels like it's not enough.
What I really like is a bootstrap site itself: getbootstrap.com.
Both of these sidebars with navigation and this fancy header. Plus they have nicer styles for typography:
So I have two question:
1) Am I allowed to use their styles?
2) If so what will be the right way to get those styles? I can see two extra files in the head of the site but I hope that maybe there is a repository or something.
P.S. any other advises are welcome too. Maybe you can recommend framework for online books/documentation or something?
Thanks.
UPD: For those who vote negatively on this question could you please explain why?
I'm not sure if you're directly allowed to use their styles. However, you could always legally obtain a similar template such as
https://guidebook.webuildthemes.com/html/docs/layout-2.html
Alternatively, there are plenty of other free options designed to build documentations and have them customized to suit your design needs. A few of them are listed below:
https://docusaurus.io/docs/en/installation
https://docsify.js.org/#/
https://daux.io/
https://www.mkdocs.org/
Hi for the last month I have started to learn CSS.Fist thing I did is read everything i could find on www.w3school.com , after that I started reading CSS Mastery 2nd edition.I have build a couple of my own websites with succes but I'm still not happy with what I know , I even practiced with the new CSS3 elements.
I've seen alot of cool stuff build using css especialy on http://www.cssplay.co.uk/ but the only problem is the source code is not displayed and I don't know how the bloody things are.A good example is this:
http://www.cssplay.co.uk/menu/tilt.html
And these is only one of the things that I've seen on this website and would like o learn how to build them.
So anyone know any other similar sites that ofer a good explanation on the more advanced stuff about css(not beginer stuff like building some drop down menus , rollover or hover efects )?Any advice is much apreciated thank you!
As already mentioned, tools like Firebug/Chrome Inspector are definite must haves.
I gained the most experience from real world problems with various different browsers. You make a site, it doesn't look so good in a particular browser. So you search on the internet. Find a solution and memorize it. I think that CSS in itself is a fairly simple tool, I class 'advanced' CSS as mastering the various techniques required to make sites work cross browser and in browsers like IE6/IE7+.
Also, Never give up with CSS, if you find a problem try and find an answer. Most of the time, there will be a simple solution.
In general, make sure your CSS is as simple as can be. I generally find that most complicated CSS can be replaced with relatively simple code, and find people get carried away and forget simple techniques to achieve similar solutions. One such problem, would be putting a button on the right hand side of a div, like below:
-----------------------------------------------
| Button |
-----------------------------------------------
You may see that some people will float the button right, adding more complexity than necessary. What ever happened to text-align:right? :-)
Finally, make sure you find a couple of blogs you like, for example http://csstricks.com and read them, taking note of new techniques. Try and master a '2 column layout', understand the difference between block/inline-block/inline, margin collapsing, tables, html forms, IE6/7 hasLayout, the list goes on. Most of which you will cover if you try and make a website template from scratch. Maybe start with an existing site and see if you can achieve the same layout.
I'm not sure with CSS how to learn it's pitfalls without encountering them mistakenly.
It looks like the stylesheet for the maze is located at: http://www.cssplay.co.uk/menu/candr/tilt.css. You can use that against the source code to figure it out.
One of my favorite is A List Apart. Great articles, not only about CSS like I linked, but about web design and more.
Also HTML Dog has some nice CSS entries.
Then, you can find great CSS resources on the w3 site.
I have a question about how to layout the webpages and relate each image together so it can flow together.I have multiple many image that some will be layered partially over each other and some are just side-by-side with some space in between them. as well some pictures will be hyperlinks and some will be hyperlinks wih image changes on hover. as well some will be backgrounds to a links of links. I haven't build a real website before. i Just create applications and I am trying to help my friend with this project
They designed it in PhotoShop, as well they have given me each piece as separate images:
(source: missadventures.ca)
This is a bigger question that can be answered here, and you're going to need some more general knowledge on building sites.
First, decide whether you want to hand-code the site or use a WYSIWYG editor. If you want to use a WYSIWYG, Adobe Dreamweaver is easy to use and very good.
Now onto the code part. Regardless of your previous choice, you should have a basic understanding of HTML and CSS just for debugging. These two books helped me immensely when I was starting out:
Designing with Web Standards
Eric Meyer on CSS
Along with StackOverflow, you can also use the following sites as learning tools and a reference:
http://www.alistapart.com
http://www.thinkvitamin.com
http://www.devguru.com
Finally, make sure to install the Firebug debugging tool for Firefox
Good luck!
First things first. I have been struggling while dealing with raw CSS to generate complex page layouts. It gets further complicated with browser vendors looking in different directions. Well, now that can't be changed.
So after a lot of efforts I started looking for:
A WYSIWYG editor that would take in content and allow me to define the desired layout and magically generate CSS that would honor most of the latest browsers, while also taking into account the liquid & fluid attributes of the layout
jQuery plugin that would take care of content arrangement complexity while just taking in inputs for the desired layout.
I haven't been able to find anything for the first quest. I'd like to know if there is any such WYSIWYG editor out there. There are many CSS editors but they don't abstract the raw CSS. One needs to know CSS thoroughly and that IMHO beats the need of such an editor. Notepad or a regular IDE is good enough.
For the second point, I came across this thread on stackoverflow. Now this put me in a problem of abundance (not a bad thing BTW). This post has links to several jQuery plugins that do the trick. Some of them are:
jQuery UI.Layout Plug-in
jLayout jQuery Plugin
Docking Layout Manager
I am looking for comments and recommendations from people who may have used 1 or more of these. Plugin's simplicity is important and equally important is the flexibility (plugin shouldn't be restrictive.
Frankly, I'd like to offload much of the CSS job to a tool.
Most layouts shouldn't be that hard to get working - it's probably worth checking you understand the different ways of positioning: float, relative and absolute properly, and that you are aware of how to clear floats.
You could try looking at blueprint or 960.gs for ways to get complex grid based layouts without much hassle.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
As web based designer who has designed web sites using tables but never with css, how can a novice get started with css?
Related SO posts
SO - Css Book & website for CSS
SO - Css blog
Get started by reading tutorial web site first. This way, he will see how to create simple CSS and see the benefits.
http://www.w3schools.com/css/
http://www.echoecho.com/css.htm
http://www.csstutorial.net/
http://www.w3.org/Style/Examples/011/firstcss
http://www.westciv.com/style_master/academy/css_tutorial/
Than, I suggest since he knows how to design website to check other website source and see their CSS files. Zen Garden is a good start.
If he requires more information, he can always get a book (I do not think it's necessary but if he wants a book), he could try Core-Css.
Definitely get the Firebug plugin for Firefox. Go to a site you like and check out the CSS for it. Turn some off and on, change things, just get a feel for how it all comes together. Great learning tool.
Read CSS: The Definitive Guide, Third Edition by Eric A. Meyer. It's one of the best technical books I've read.
To all the other suggestions I would add Smashing Magazine's list of CSS articles.
I recommend Transcending CSS: The Fine Art of Web Design by Andy Clarke. It's less about the technical aspects of CSS and more about the mindset switch that needs to happen when moving from tables based design to separating content from design.
When I started learning CSS, I found myself coding pretty much the same way. Instead of tables and tds, I was using divs and spans. Still working from the outside (design) inward (toward the content) and designing my markup and contents around the look of the page, locking it into the design. Transcending CSS gets into the process of going from the inside (content and markup) out (design) leaving the site's appearance flexible.
Technical info is easy enough to find. I tend to frequent W3Schools.
I'm a big fan of reading tech books, so I learned from Beginning CSS Web Development: From Novice to Professional
I learned a lot from Eric Meyer on CSS and More Eric Meyer on CSS. The books take you through several examples step-by-step, starting with unstyled pages and explain the purpose for each step along the way. They would only be a starting point though, since they're a little bit dated. Sites like A List Apart will give you the most up-to-date information.
Start simple. Read a few sites like A List Apart and Position Is Everything.
Don't try to replace your whole site at once - change one piece at a time.
Keep testing it in different browsers - the earlier you find out it looks different in one (or all!) the better.
The book that got me started was Web Standards Solutions: The Markup and Style Handbook. by Dan Cederholm It is not a reference, but gives you a good start with real-world examples. Dan does a good job of holding your hand, taking it slow and not boring you. I bought it several years ago and still refer to it on occasion.
This is the only CSS book I own. I use the web as my CSS reference.
SitePoint have a large amount of tutorials and reference on this. They even have a book that sound like it would answer your question directly!
HTML Utopia: Designing Without Tables Using CSS, 2nd Edition
http://www.sitepoint.com/books/css2/
with 4 chapters available free
For French there is a good site : http://www.alsacreations.com/ there is tutorials on HTML, xHTML and CSS and many examples (how to create "pretty" menus etc...)
I learned a lot of CSS by downloading free site designs from http://www.oswd.org/ and trying to implement the same effects on my own. It also gave me some insights into ideas for site-wide design patterns in CSS.
I'm a fan of the brute-force approach. Learn a few basics then start trying to recode your HTML using pure CSS. Every time you need a new technique, google it. You may want to subscribe to the CSS-discuss mailing list or read the wiki.
http://www.w3.org/Style/CSS/#specs
Someone already listed a w3c link. This link goes to the specs which is how I learned what I know about css. Anyway, start with level 1 then move on to the other levels. Well, level 1 should get you most of what you'll use so you may just want to learn level 1 then google the other things you want to do as needed.
I have found that using a DreamWeaver template is a good first place to start when creating a new page. They have made some very simple templates that allow you add any formatting you want, you just need to know things like 2 or 3 columns or elastic or fixed. Before I started doing this, I was constantly trying to figure out how to position stuff, but this has helped a lot, at least giving me a start.
Also consider a reset CSS file. It really helps dealing with browser differences.
Along with this, of course read tutorials and search the net.
Have a look at the Web Design From Scratch website. It has been really useful to me.
One important concept that most references are missing is that the CSS attributes aren't independent or cumulative. The most important properties, 'display' and 'position' react to each other and even change the behavior of other attributes. They interact in such a way that any guide that tries to teach these attributes independently is fail.
Most people doing HTML/CSS don't understand this, and are stuck fiddling without a real clue.
The only book I've found that relates these attributes at all is "Pro CSS and HTML Design Patterns". Eric Meyers book might... Personally I hate the style "Pro CSS and HTML Design Patterns" is written in, but its still the most effective guide to CSS that I have found.
I wrote an overall intro guide including some good CSS links elsewhere (see the comments too)... might be useful.