Fighting with CSS questions – a way from newbie to master CSS

May 14, 2007

9th ques: Can you create a simple styled website & explain how it works?

Filed under: --- Level: 3, ♥ List of CSS Questions — cssquestions @ 2:17 am

Can you create a simple styled website with navigation bar like this one:

final_site1.png

and explain how each line of CSS code mean. It means you have to understand what you write, not copy & paste the code from Internet. [I really did copy & paste this website from a tutorial on Internet. Do you know where is it? Can you search it? ok, maybe you can do, but you'd better do-it-yourself first]

May 8, 2007

5th KEYWORDs: 10 CSS

Filed under: Asking Mr. Google, My del.icio.us — cssquestions @ 6:20 pm

google: 10 CSS

http://www.google.com.vn/search?q=10+CSS

  1. Ten CSS tricks you may not know
  2. Ten more CSS tricks you may not know
  3. My Top Ten CSS Tricks
  4. 10 CSS Tips You Might Not Have Known About
  5. 10 Quick Tips for an Easier CSS Life

and one more from del.icio.us, not 10 google search results

  1. (The Only) Ten Things To Know About CSS

10 amazing or confusing things newbies may not know about CSS

Filed under: --- Level: 2, ♥ List of CSS Questions, CSS in my eyes — cssquestions @ 6:05 pm
  1. div and span are also called tag like every Other-Tags (such as p, h1, h2, b, i, u, br, strong, etc., )
  2. each tag has its own function (ex: p-tag to make paragraph, h1-tag to make a “biggest” header, b-tag to make text bold, br-tag to make a line break, etc.,). But div-tag and span-tag may be the exceptions ;) .
  3. you can change the function of every tag by applying CSS to it (ex: force the i-tag to make text bold against its own default function making text italic, etc.,) . [how?]
  4. you can force the div-tag and span-tag do the function of every tag you want by using CSS (ex: use span-tag to make text bold, etc.,) [how?]
  5. browsers ignore the CSS elements if it cannot detect which tag CSS apply to. [how? & why we need to use id & class to name the tag?]
  6. div-tag is box and follow the rule of “box model”. [how?]
  7. div-tag is usually used for making layout. [why?]
  8. span-tag to markup text.[when?]
  9. Default tag functions are different in different browsers. [how?]
  10. CSS may works in different ways in different browsers. [when?]

Note: the questions in square-blankets is for u :), but maybe it’s hard for u to answer this time.

8th ques: CSS quiz from w3schools

Filed under: --- Level: 2, ♥ List of CSS Questions — cssquestions @ 5:36 pm

I’ve copied it here so we can discuss about it.

1.     What does CSS stand for?

Creative Style Sheets
Computer Style Sheets
Cascading Style Sheets
Colorful Style Sheets

2.     What is the correct HTML for referring to an external style sheet?

<style src=”mystyle.css”>
<stylesheet>mystyle.css</stylesheet>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

3.     Where in an HTML document is the correct place to refer to an external style sheet?

In the <body> section
In the <head> section
At the top of the document
At the end of the document

4.     Which HTML tag is used to define an internal style sheet?

<css>
<script>
<style>

5.     Which HTML attribute is used to define inline styles?

font
class
style
styles

6.     Which is the correct CSS syntax?

body {color: black}
{body;color:black}
body:color=black
{body:color=black(body}

7.     How do you insert a comment in a CSS file?

/* this is a comment */
// this is a comment //
‘ this is a comment
// this is a comment

8.     Which property is used to change the background color?

color:
bgcolor:
background-color:

9.     How do you add a background color for all <h1> elements?

h1.all {background-color:#FFFFFF}
h1 {background-color:#FFFFFF}
all.h1 {background-color:#FFFFFF}

10.     How do you change the text color of an element?

text-color=
fgcolor:
color:
text-color:

11.     Which CSS property controls the text size?

font-style
font-size
text-style
text-size

12.     What is the correct CSS syntax for making all the <p> elements bold?

p {text-size:bold}
<p style=”font-size:bold”>
<p style=”text-size:bold”>
p {font-weight:bold}

13.     How do you display hyperlinks without an underline?

a {decoration:no underline}
a {text-decoration:no underline}
a {underline:none}
a {text-decoration:none}

14.     How do you make each word in a text start with a capital letter?

text-transform:capitalize
text-transform:uppercase
You can’t do that with CSS

15.     How do you change the font of an element?

font=
f:
font-family:

16.     How do you make the text bold?

font-weight:bold
style:bold
font:b

17.     How do you display a border like this:
The top border = 10 pixels
The bottom border = 5 pixels
The left border = 20 pixels
The right border = 1pixel?

border-width:5px 20px 10px 1px
border-width:10px 5px 20px 1px
border-width:10px 1px 5px 20px
border-width:10px 20px 5px 1px

18.     How do you change the left margin of an element?

margin-left:
text-indent:
margin:
indent:

19.     To define the space between the element’s border and content, you use the padding

property, but are you allowed to use negative values?

Yes
No

20.     How do you make a list that lists its items with squares?

type: 2
type: square
list-type: square
list-style-type: square

May 7, 2007

Editors I used

Filed under: CSS in my eyes — cssquestions @ 4:45 pm

My first softwares I’ve used for edit HTML and CSS files is Notepad.

And then, when I was looking for some more convenient editors, I found PSPad and TopStyle Lite.

PSPad is used for editing (x)HTML file.

TopStyle Lite is for CSS files. (There is also  TopStyle Pro with some advanced feature, but I like the simple of TopStyle Lite).

They are both free and good enough to edit.

===Note for Unicode Editing in PSPad: ===

Unicode (utf-8) is not default setting for new file in PSPad.

To edit utf-8, click Menu: Format > UTF-8.

To change option(s) for saved UTF-8 files, click Menu: Settings > Program Settings > Program Behavior

May 4, 2007

Comparing between Building Website and Building House

Filed under: CSS in my eyes — cssquestions @ 6:44 am

=== CSS from Civil Engineer’s eye ===

Before my decision to become a web designer, I was a Civil Engineer.  Today I have had an idea to compare between the work of building a website with house building work flow

house_vs_css2.png

house_vs_css1.png

—- to be continue …………………

7th ques: Why & When we use id & class?

Filed under: --- Level: 2, ♥ List of CSS Questions — cssquestions @ 3:49 am

id & class is the heart of CSS. Do you know why we need to use id & class. And when we use “id”, when we use “class”?

 This is an VERY, VERY, VERY important question.

And one more extra question: do you know what does “div” mean? what “div” is stand for?

May 1, 2007

6th ques: Can you create a simple Navigation Menu?

Filed under: --- Level: 2, ♥ List of CSS Questions — cssquestions @ 9:26 am

A website must have a Navigation Menu (or Navigation Bar). Can you create a Navigation Menu like the following one:

Picture of Navigation Menu

==============Some more knowledge==================

- The link you’ve visited is called “visited link” – its color is always changed by browser. In the example above, the visited link is in purple color (the ones you haven’t visited is in blue color)

5th ques: Can you create a basic xHTML site WITH Style

Filed under: --- Level: 2, ♥ List of CSS Questions — cssquestions @ 4:02 am

Ok! you’ve done your basic xHTML site. Now we’d better make it more styled with CSS.
Can you creat a site like this following one:

Picture of a blank website

April 30, 2007

4th ques: Can you create a basic xHTML website?

Filed under: --- Level: 2, ♥ List of CSS Questions — cssquestions @ 3:50 am

You’re here to learn how to apply CSS to your xHTML file, not to learn how to create a xHTML file, so you must have known about xHTML basic already (I suppose that). This question is to confirm you REALLY know it :)  (or not).

Can you create a website like the following one, remember using only xHTML (not styled, we’ll learn how to style it later):

Picture of a web not styled

Older Posts »

The Banana Smoothie Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.