HomeНаука и техникаRelated VideosMore From: TechnicalCafe

CSS Tutorial 11 - Styling Unordered Lists

71 ratings | 15599 views
In this video, we talk about how to style unordered lists using CSS, changing things like font color, font family, padding, margins, and the display settings. We also learn how to change the style of the bullet points, as well as how to make lists into navigation menus, which are more accessible to those who may be visually impaired. If you have any questions, comments, or suggestions for this video, or anything at all, please don't hesitate to ask! TechnicalCafe Blog: http://TechnicalCafe.com TechnicalCafe Twitter: http://Twitter.com/TechnicalCafe TechnicalCafe Forums: http://TechnicalCafe.net Jamie's Twitter: http://Twitter.com/Jamiemcg
Html code for embedding videos on your blog
Text Comments (29)
LinnErellie haha (2 months ago)
Can you tell me how to change the style like italic or bold without using a style sheet while it's in a list.
TechnicalCafe (1 month ago)
You could wrap <i></i> tags around text that you'd like to make italic and <b></b> tags around text that you'd like to make bold. This should work anywhere within your HTML code, even if the text is in a list or other elements.
abu yusef (3 months ago)
please what is application name you use here
TechnicalCafe (2 months ago)
The text editor that I was using in this tutorial was Sublime Text 2. However, I’ve since switched over to Atom and VS Code, both of which can be downloaded for free. Thank you for watching and please let me know if you have any questions, comments, or suggestions.
Happy Shah (4 months ago)
VERY NICE VIDEO!!NOT TRYING TO BE MEAN BUT YOU WERE TALKING A BIT TO FAST!
Happy Shah (3 months ago)
Its fine!It was a great video!
TechnicalCafe (3 months ago)
Thank you for watching and for the feedback! Sorry if I was a difficult to follow! Hopefully I’ve slowed down a bit in newer videos!
setsuna kazama (5 months ago)
underrated tutorial
TechnicalCafe (5 months ago)
Thanks for watching and for the compliment! I appreciate it!
Farzan Razick (6 months ago)
How can I put list items in to 2 coloumns; right align?
TechnicalCafe (6 months ago)
You could align lists using divs and then applying styles to those divs using some CSS code. Alternatively, a table might do the trick as well (though, I'd recommend using divs over a table if possible).
A Girl (11 months ago)
how can i move the list up and down?
TechnicalCafe (9 months ago)
When you say "move the list up and down", what exactly is it that you mean?
bobby midha (1 year ago)
did you enjoy your line of coke?
Happy Shah (4 months ago)
true!
bobby midha (1 year ago)
content was great but tbh, you were speaking a bit fast
TechnicalCafe (1 year ago)
+bobby midha Ha, I’m assuming I was talking too fast in this one?
Eric The Red (1 year ago)
How does one center a UL and get the bullets to center with the list?
you saved me a headache man, I just could not center my list (no matter what I did) - then I saw you then I just went and centered the list in the html instead of the style sheet. I was like "can you do that....?" Thanx a ton.
ok cool man, thank you. Yeah I have figure out to use CSS and saw my mistake .
TechnicalCafe (2 years ago)
Glad to hear that you found this tutorial helpful! While you can center lists and other elements using the <center></center> tags in HTML, it is not recommended any longer. Instead, and perhaps unfortunately, CSS is the preferred way of centering elements now adays. Please don't hesitate to ask if you have any questions, though! I'd be glad to try and help out where I can! Thanks for watching!
filfy rich (4 years ago)
how do you center it whilst its in bullet points?
Lindio Pojani (4 years ago)
Can you tell me what exactly means <link rel="stylesheet"> and <link type="text/css"> ? Thanks.
TechnicalCafe (4 years ago)
+Lindio Pojani When you use <link rel="stylesheet">, you are basically telling the browser that there is a "link" or associated page that is a stylesheet - this is how we can use an external CSS document to style HTML code within another webpage!  As for <link type="text/css">, this is telling the browser that the linked document contains text and/or CSS code!
TechnicalCafe (5 years ago)
Hey, James! I haven't really "studied" web development academically, but I have been making HTML webpages and such since middle school (around grade 8 or so?), when we learned how to write basic HTML code in computer class! However, as a Computer Science major, I have taken classes on Java and a class on C, which are pretty interesting languages, haha! As for the best way to study and learn how to program, I would say to practice as much as you can! Feel free to message me for more info! :)
Happy Shah (4 months ago)
MY SCHOOL IS BORING!I AM STILL IN MIDDLE SCHOOL!
James (5 years ago)
Yeah Jamie couple Q's, how long have you been studying WebDevelopment for? I'm starting in a 1yr WebDevelopment Diploma course next fortnight, very excited to be doing so as I very much dislike my current job as a security guard lol, has taken me 25yrs to find this area which I'm very much interested in. What did u find worked best for you as the most effective way of learning all the code, books, w3schools, tafe/uni? How many languages do u know and what is the best order to learn them in?
TechnicalCafe (5 years ago)
Thank you for the compliment, and for watching, James! I appreciate it! If you have any questions, comments, or suggestions, please feel free to let me know!
James (5 years ago)
Great vid. Keep up the great work mate!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.