Bootstrap 里定义了很多实用的样式，但是不能解决我们遇到的所有问题，我们要为页面手工添加一些样式。下面我们先去创建一个样式表，然后再把它链接到网页中 ....

新建一个文件，命名为 style.css，样式表的后缀名是 .css

回到网页，复制一行链接样式表的代码 ... 修改一下 href 属性的值 ，style.css 和这个网页在同一目录下，所以这里，我们直接输入 style.css ...

注意网页中使用的样式表的顺序，下面的样式表可以覆盖上面的样式表里定义的样式，如果你想用我们手工创建的样式表，覆盖 bootstrap.css 样式表里定义的样式，我们要把 style.css 这个样式表放在 bootstrap.css 这个样式表的下面。

下面我们手工为页头部分的内容添加一些样式，在我们的设计里，标志图像和搜索框的上面跟下面都有一些空白的地方 ...

我们可以在标志图像和搜索框周围的元素上定义 ID 或者 类，通过这些类，在样式表里添加相应的样式。

在 <img> 标签里，输入 id="logo" ，这样我们就定义了一个名为 logo 的 id，注意同一个 id 只能出现在一个地方，也就是如果你在这里使用了一个叫 logo 的 id ，就不能在其它元素上添加同样的 id 。

找到包围搜索框的元素，在这个 <div> 标签上，也定义一个 id ，输入 id="search"

这样我们可以使用 logo 和 search 这两个 id 做为样式的选择器，来为这两个 id 所在的元素添加一些样式。

打开网页的样式表 ...

先输入一点注释的文字，说明一下接下来的样式 ... 注释的开始使用 /* 然后输入注释的内容 ... 注释结束的地方输入 */

另起一行输入样式，先要输入样式的选择器，也就是你想把样式应用在页面中的哪一部分上，这里我们使用 id 做为选择器。

我们要给页头部分里的标志和搜索框的上边和下边添加点边距，这里可以输入

#logo,
#search{
}

这里我们用了两个 id 选择器， # 号表示 id ，后面是 id 的名称，这两个 id 选择器的中间我们用一个逗号分开... 表示在后面大括号里定义的样式，会同时应用在带有这两个 id 的元素上面。

为元素添加边距，可以使用 padding 或者是 margin ， padding 表示元素内部的边距，margin 表示元素外部的边距。

这里我们可以使用内边距。输入 padding: 30px 0 30px 0; 第一个值表示元素上边的内边距，第二值是右边的内边距，第三个值是下边的内边距，最后一个值是右边的内边距。这行样式的意思是给元素的上边和下边各添加一个 30px 的内边距 ... 左边和右边的内边距设置为 0 。

这里我们可以简写这行样式，直接使用 30px 0 ，第一个值表示上边和下边的内边距，第二值表示左边和右边的内边距。

现在页面头部的设计就处理好了。